Vue-tiny-rate NPM

Vue Tiny Rate

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

Chinese (Simplified)

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 />

npm.io

Options from props

value {number|string} : Star value default:0

<Rate value="0.5"></Rate>
<Rate value="1"></Rate>
<Rate value="3.6"></Rate>

npm.io

readonly {boolean} : Rate read-only. default:false

<Rate value="0.5"></Rate>
<Rate value="1"></Rate>
<Rate value="3.6" readonly="true"></Rate>

npm.io

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>

npm.io

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>

npm.io

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>

npm.io

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>

npm.io

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
    }
  }
})

npm.io