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

<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