All Projects → SinanMtl → Vue Rate

SinanMtl / Vue Rate

Licence: mit
Rate component for Vue

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Vue Rate

Liquor Tree
Tree component based on Vue.js
Stars: ✭ 348 (+74.87%)
Mutual labels:  component, vue-components
Fish Ui
A Vue.js 2.0 UI Toolkit for Web
Stars: ✭ 861 (+332.66%)
Mutual labels:  component, vue-components
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+129.15%)
Mutual labels:  component, vue-components
Vue Glide
A slider and carousel as vue component on top of the Glide.js
Stars: ✭ 225 (+13.07%)
Mutual labels:  component, vue-components
Maz Ui
Stand-alone components library to build your interfaces with Vue.JS & Nuxt.JS
Stars: ✭ 109 (-45.23%)
Mutual labels:  component, vue-components
Mint Ui
Mobile UI elements for Vue.js
Stars: ✭ 16,471 (+8176.88%)
Mutual labels:  component, vue-components
Vuep
🎡 A component for rendering Vue components with live editor and preview.
Stars: ✭ 840 (+322.11%)
Mutual labels:  component, vue-components
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+27.14%)
Mutual labels:  component, vue-components
Vuescroll
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
Stars: ✭ 1,016 (+410.55%)
Mutual labels:  component, vue-components
Vue Flip
A Vue.js component to flip elements.
Stars: ✭ 37 (-81.41%)
Mutual labels:  component, vue-components
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+8.54%)
Mutual labels:  component, vue-components
Vue Info Card
Simple and beautiful card component with an elegant spark line, for VueJS.
Stars: ✭ 159 (-20.1%)
Mutual labels:  component, vue-components
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+2559.8%)
Mutual labels:  component, vue-components
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-82.91%)
Mutual labels:  component, vue-components
Vue Loaders
Vue + loaders.css
Stars: ✭ 127 (-36.18%)
Mutual labels:  component, vue-components
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-5.53%)
Mutual labels:  component, vue-components
React Native Popover View
A well-tested, adaptable, lightweight <Popover> component for react-native
Stars: ✭ 191 (-4.02%)
Mutual labels:  component
Stopwatch
The Stopwatch component provides a way to profile code.
Stars: ✭ 2,388 (+1100%)
Mutual labels:  component
Vue Infinite Slide Bar
∞ Infinite slide bar component (no dependency and light weight 1.48 KB)
Stars: ✭ 190 (-4.52%)
Mutual labels:  component
Vue Plugin Template
🚀 Solid foundation to start a Vue plugin with the best developer experience and a focus on performance
Stars: ✭ 189 (-5.03%)
Mutual labels:  component

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'
import 'vue-rate/dist/vue-rate.css'

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" />
  • iconref {string}: ID of symbol icon

Insert symbol icon into your codebase

<symbol id="icon-heart" class="icon" viewBox="0 0 32 32">
  <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
</symbol>

Then add Rate component. iconref must be symbol's id

<rate :length="5" iconref="icon-heart" />
  • 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].