The vue-star-rate from pooyagolchian

vue-star-rate's Introduction

Vue.js fontawesome icon rate component

It's easy to use Vue.js component for star rating!

This package is fully customized (Shape, Color, Rate, ...).
I used Vue font awesome.
You can change your rating shape with free and open source font awesome project.

Install package

Install with npm npm i vue-js-star-rating --save
Install with yarn yarn add vue-js-star-rating --save

Code sample

After import and registering component in your Vue.js application:

<template>
  <div>
    <vue-star-rate
      :rateRange="3"
      :maxIcon="5"
      :iconHeight="22"
      :iconWidth="22"
      :hasCounter="true"
      iconColor="#FFFF99"
      iconColorHover="#FFFF99"
      iconShape="star"
    ></vue-star-rate>
  </div>
</template>

<script>
import vueStarRate from "vue-js-star-rating";
export default {
  components: { vueStarRate }
};
</script>

Documents

Attribute	Description	Type	Default
rateRange	Number of active icon	Number	3
maxIcon	Number of icons	Number	5
iconHeight	Icon height	Number	45
iconWidth	Icon width	Number	45
hasCounter	Counter like 3 of 5	Boolean	true
iconColor	Color of icon	String	#f3d23e
iconColorHover	Color of hover icon	String	#f3d23e
iconShape	Shape of icon like star, heart, etc	String	star
ratingSet	Event after click on icon	Event	null

Events

When a star is clicked, an event is emitted called ratingSet. You can listen for this event to get the value of the rating.

<template>
  <div>
    <vue-star-rate v-on:ratingSet="myRatingMethod"></vue-star-rate>
  </div>
</template>

<script>
import vueStarRate from "vue-js-star-rating";
export default {
  components: { vueStarRate },
  methods: {
    myRatingMethod(rating) {
      console.log("The selected rating is " + rating);
    }
  }
};
</script>

Recommend Projects