Nominally Patriotic Meathead

    vue-tiny-rate

    0.2.0 • Public • Published

    Vue Tiny Rate

    npm

    The Smallest Rating Component for Vuejs

    based single-line rate component

    function rate(num){
      return "★★★★★☆☆☆☆☆".slice(5 - num, 10 - num);
    }
    rate(3)   // "★★★☆☆"
     

    Features

    • based ☆ and ★
    • support float such as 3.5 4.7
    • theme
    • animate
    • size

    Translation

    Installation and usage

    Once, install rate component for your project

    npm install vue-tiny-rate --save

    Import Vue Rate into your app

    import Rate from 'vue-tiny-rate';
     
    new Vue({
        components: {
            Rate
        }
    })

    Use HTML template

    <Rate />

    Options from props

    • value {number|string} : Star value default:0
    <Rate value="0.5"></Rate>
    <Rate value="1"></Rate>
    <Rate value="3.6"></Rate>

    • readonly {boolean} : Rate read-only. default:false
    <Rate value="0.5"></Rate>
    <Rate value="1"></Rate>
    <Rate value="3.6" readonly="true"></Rate>

    • length {number|string} : Star size default:5
    <Rate value="2" length="4"></Rate>
    <Rate value="3.6" length="8"></Rate>
    <Rate value="7.6" length="10"></Rate>

    • theme {color|enum('yellow','green','blue','red','purple','orange','black','wihte')}: Star color. default: yellow
    <Rate value="4.5">Yellow</Rate>
    <Rate value="4.5" theme="green">Green</Rate>
    <Rate value="4.5" theme="blue">Blue</Rate>
    <Rate value="4.5" theme="red">Red</Rate>
    <Rate value="4.5" theme="purple">Purple</Rate>
    <Rate value="4.5" theme="orange">Orange</Rate>
    <Rate value="4.5" theme="black">Black</Rate>
    <Rate value="4.5" theme="#91d5ff">#91d5ff</Rate>
     

    • size {number|string}: Rate size.
    <Rate value="4.5" size='12px'>12px</Rate>
    <Rate value="4.5" size='16px'>16px</Rate>
    <Rate value="4.5" size='20px'>20px</Rate>
    <Rate value="4.5" size='40px'>40px</Rate>

    • animate {number|string}: Rate animate duration. default:0
    <Rate value="3.5" animate='1'>1s</Rate>
    <Rate value="3.5" animate='2'>2s</Rate>
    <Rate value="3.5" animate='3'>3s</Rate>

    Events

    • onRate: Rate select callback.
    <Rate @onRate="onrate" :value="value"/>
    new Vue({
      el: '#app',
      components: { Rate },
      template: '<Rate @onRate="onrate" :value="value"/>',
      data: {
        value: '2.6'
      },
      methods: {
        onrate (num) {
          console.log(num)
          this.value = num
        }
      }
    })

    Link

    License

    MIT.

    Install

    npm i vue-tiny-rate

    DownloadsWeekly Downloads

    56

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    10.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar