Vue-star-rate NPM

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	-