Skip to content

weenta/vue-star-rate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
<template>
  <div class="hello">
    <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
  • Event
Event Name Description Parameters
rate Triggers when you click the star to rate value of your rating

LICENSE

MIT