A Vue2.x Star Rating Component for mobile
a simple star rating component for morden mobile browsers
USAGE
Install
npm i vue-star-rate
QuickStart
- for vue >= 2.2.0
<template> <div> <span>MyRatings</span> <star-rating :size="size" :color="color" :maxScore="maxScore" :readOnly="readOnly" v-model="score" ></star-rating> <span>score</span> </div></template> <script>; name: "HelloWorld" components: starRating { return score: 35 color:'#f00' size:1 maxScore:5 readOnly:false ; }</script>
- for vue < 2.2.0
<template> <div> <span>MyRatings</span> <star-rating :size= 'size' :color= 'color' :score= 'score' :maxScore= 'maxScore' :readOnly= 'readOnly' @rate='rate' ></star-rating> <span>score</span> </div></template> <script>; name: "HelloWorld" components: starRating { return score: 35 color:'#f00' size:1 maxScore:5 readOnly:false ; } methods: { thisscore = val; } </script>
Docs
- Attribute
Attribute | Description | Type | Default |
---|---|---|---|
score | The initial rating | Number | 0 |
maxScore | The max score | Number | 5 |
size | The fontSize of star, you should use rem unit | Number | 1 |
color | The color of star | String | #f7ba2a |
readOnly | whether Rate is read-only | Boolean | false |
v-model | binding value(vue>2.2.0) | Number | - |
- Event
Event Name | Description | Parameters |
---|---|---|
rate | Triggers when you click the star to rate | value of your rating |
LICENSE
MIT