当前位置：首页 > VUE

vue实现星星评分

2026-01-08 14:48:07VUE

vue实现星星评分的方法

使用组件实现星星评分

创建一个可复用的星星评分组件，通过v-for循环渲染星星图标，利用动态绑定类名实现选中和未选中状态。

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="rate(star)"
      :class="{ 'active': star <= stars }"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      stars: this.initialRating
    }
  },
  methods: {
    rate(star) {
      this.stars = star
      this.$emit('rated', star)
    }
  }
}
</script>

<style>
.star-rating span {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
}
.star-rating span.active {
  color: gold;
}
</style>

使用第三方库

安装并使用专门的评分组件库，如vue-star-rating。

npm install vue-star-rating

<template>
  <star-rating 
    v-model="rating"
    :increment="0.5"
    :star-size="30"
  />
</template>

<script>
import StarRating from 'vue-star-rating'

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

实现半星评分

通过计算显示半星或全星，使用字体图标或SVG实现更精细的控制。

<template>
  <div class="star-rating">
    <span 
      v-for="star in starsArray" 
      :key="star.index"
      @click="rate(star.value)"
    >
      <span v-if="star.isHalf">½</span>
      <span v-else>★</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    maxStars: {
      type: Number,
      default: 5
    }
  },
  computed: {
    starsArray() {
      const stars = []
      for (let i = 1; i <= this.maxStars; i++) {
        stars.push({
          index: i,
          value: i,
          isHalf: this.value >= i - 0.5 && this.value < i
        })
      }
      return stars
    }
  },
  methods: {
    rate(star) {
      this.$emit('input', star)
    }
  }
}
</script>