Rate component for Vue
Vue Rate Rate component for Vue Installation and usage Once, install rate component for your project npm install vue-rate --save Import Vue Rate into your app import Rate from 'vue-rate'; new Vue({ components: { Rate } }) Use HTML template
Vue Rate
Rate component for Vue - Demo
Installation and usage
Once, install rate component for your project
npm install vue-rate --save
Import Vue Rate into your app
import rate from 'vue-rate';
Vue.use(rate)
Use HTML template
<rate :length="5" />
Options from props
-
length {number}
: Star size
<rate :length="5" />
-
value {number}
: Default value
<rate :length="5" :value="2" />
-
showcount {boolean}
: Shows rate number when mouseover the star.
<rate :length="5" :value="2" :showcount="true" />
-
ratedesc {object}
: Rate star description array.
<rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']" />
-
disabled {boolean}
: Disable rate.
<rate :length="5" :value="2" :disabled="true" />
-
readonly {boolean}
: Read-only rate.
<rate :length="5" :value="2" :readonly="true" />
-
v-model
new Vue({
...
data: {
return () {
myRate: 0
}
}
...
})
<rate :length="5" v-model="myRate" />
Events
new Vue({
...
methods: {
onBeforeRate (rate) {
alert(rate)
},
onAfterRate (rate) {
alert(rate)
}
}
...
})
<rate :length="5" :value="2" @before-rate="onBeforeRate" @after-rate="onAftereRate" />
License
MIT.