vue-star-rating.vue

vue-star-rating.vue

<script>
module.exports = {
  props: {
    value: {
      type: Number,
      twoWay: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      isPreview: false,
      tempValue: null,
      ratings: [1, 2, 3, 4, 5]
    };
  },
  
  methods: {
    over(index) {
      if (!this.isPreview) {
        this.isPreview = true;
				this.tempValue = this.value;
			}
      this.value = index;
    },
    out() {
      if (this.isPreview) {
        this.value = this.tempValue;
        this.tempValue = null;
        this.isPreview = false;
      }
    },
    set(value) {
      this.tempValue = value;
      this.value = value;
      this.isPreview = false;
    }
  }
};
</script>

<style lang="sass">
  .star-rating {
    div {
      display: inline-block;
      cursor: pointer;
    }
  }
</style>

<template>
  <div class="star-rating" @mouseout="out">
    <div
      v-for="rating in ratings"
      :class="{'is-selected': ((value >= rating) && value != null), 'is-disabled': disabled}"
      @mouseover="over(rating)"
      @click="set(rating)">
        <i v-if="value >= rating && value != null" class="icon-star"></i>
        <i v-else class="icon-star-empty"></i>
    </div>
  </div>
</template>