vue-star-rate

a vue star rating component for mobile
1,096 1
Install
npm install vue-star-rate
Latest Version:1.2.0
Vue:2
License:MIT
Last Updated:Apr 23, 2019
Links: GitHub  ·  npm
Maintainer: weenta

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

Related Packages

vue-star-rating

A simple, highly customisable star rating component for Vue 2.x.

1,512,217 651
awesome-vue-star-rating

A simple, highly customisable star rating component for Vue 2.x without any exte...

2,307 6
tdesign-mobile-vue

tdesign-mobile-vue

1,024,396 437
vue-mobile-detection

Vue.js prototype function `this.$isMobile()` that returns a Boolean value depend...

139,558 69

Version History

Version Released Vue License
1.2.0 ^2.6.10 MIT
1.1.1 ^2.6.10 MIT
1.1.0 ^2.5.8 MIT
1.0.9 ^2.5.8 MIT
1.0.7 ^2.5.8 MIT