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
Installation and usage
Once, install rate component for your project
npm install vue-tiny-rate --saveImport 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 valuedefault: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 sizedefault: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.