Vue JavaScript Makefile HTML
Clone or download

README.md

Vue Rate

npm version npm

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.