vue实现一个星级打分效果_vue 星星评分组件

下面是一个简单的 Vue 星级评分组件的实现：

<template>
  <div class="rating">
    <span v-for="(star, index) in stars"
          :class="['star', star]"
          :key="index"
          @click="select(index)">
    </span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      stars: []
    }
  },
  mounted() {
    this.updateStars()
  },
  methods: {
    updateStars() {
      this.stars = []
      for (let i = 0; i < this.max; i++) {
        this.stars.push(i < this.value)
      }
    },
    select(index) {
      this.value = index + 1
      this.$emit('input', this.value)
      this.updateStars()
    }
  }
}
</script>

<style>
.star {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(star.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}
.star:hover,
.star.active {
  background-position: 0 -24px;
}
</style>

使用方式：

<template>
  <div>
    <h3>我的评分：{{ rating }}</h3>
    <star-rating v-model="rating"></star-rating>
  </div>
</template>

<script>
import StarRating from './StarRating.vue'

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 3
    }
  }
}
</script>

其中，star.png 是一张包含两个星星的图片，第一个星星是默认状态，第二个星星是激活状态。

这个组件的实现很简单，通过 props 接收评分值和最大值，然后用一个数组来表示星星的激活状态，点击某个星星时更新评分值和星星状态，通过事件向父组件传递更新后的评分值。最后，用 CSS 来实现星星的样式。