lgs / vue-rate

Rate component for Vue

Vue Rate

Rate component for Vue - Demo

Installation and usage

Once, install rate component for your project

npm install vue-rate --save

Import Vue Rate into your app

import rate from 'vue-rate';

Vue.use(rate)

Use HTML template

<rate :length="5" />

Options from props

• length {number}: Star size

<rate :length="5" />

• value {number}: Default value

<rate :length="5" :value="2" />

• showcount {boolean}: Shows rate number when mouseover the star.

<rate :length="5" :value="2" :showcount="true" />

• ratedesc {object}: Rate star description array.

<rate :length="5" :value="2" :ratedesc="['Very bad', 'bad', 'Normal', 'Good', 'Very good']" />

• disabled {boolean}: Disable rate.

<rate :length="5" :value="2" :disabled="true" />

• readonly {boolean}: Read-only rate.

<rate :length="5" :value="2" :readonly="true" />

• v-model

new Vue({
  ...
  data: {
    return () {
      myRate: 0
    }
  }
  ...
})

<rate :length="5" v-model="myRate" />

Events

new Vue({
  ...
  methods: {
    onBeforeRate (rate) {
      alert(rate)
    },
    onAfterRate (rate) {
      alert(rate)
    }
  }
  ...
})

<rate :length="5" :value="2" @before-rate="onBeforeRate" @after-rate="onAftereRate" />

License

MIT.