vue-star-rate
Version:
a vue star rating component for mobile
117 lines (98 loc) • 2.33 kB
Markdown
# A Vue2.x Star Rating Component for mobile
a simple star rating component for morden mobile browsers
## USAGE
### Install
```bash
npm i vue-star-rate
```
### QuickStart
- for vue >= 2.2.0
```js
<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>
import starRating from "vue-star-rate";
export default {
name: "HelloWorld",
components: {
starRating
},
data() {
return {
score: 3.5,
color:'#f00',
size:1,
maxScore:5,
readOnly:false
};
}
}
</script>
```
- for vue < 2.2.0
```js
<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>
import starRating from "vue-star-rate";
export default {
name: "HelloWorld",
components: {
starRating
},
data() {
return {
score: 3.5,
color:'#f00',
size:1,
maxScore:5,
readOnly:false
};
},
methods: {
rate(val) {
this.score = 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