当前位置：首页 > VUE

vue 实现评分

2026-01-13 02:23:30VUE

实现评分功能的方法

在Vue中实现评分功能可以通过多种方式完成，以下是几种常见的实现方法：

使用第三方库

使用现成的评分组件库可以快速实现评分功能，例如vue-star-rating或rate-it。

安装vue-star-rating：

npm install vue-star-rating

在组件中使用：

vue 实现评分

<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: 0
    }
  }
}
</script>

自定义评分组件

创建一个自定义的评分组件，使用字体图标或SVG实现星星效果。

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

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentRating: this.initialRating
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star;
      this.$emit('rating-changed', star);
    }
  }
}
</script>

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

使用Element UI评分组件

如果项目中使用Element UI，可以直接使用其评分组件。

vue 实现评分

安装Element UI：

npm install element-ui

使用示例：

<template>
  <el-rate v-model="rating" :colors="colors" :max="10"></el-rate>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    }
  }
}
</script>

实现半星评分

要实现更精细的半星评分，可以修改自定义组件逻辑。

<template>
  <div class="rating">
    <span 
      v-for="star in stars" 
      :key="star.index"
      @click="setRating(star.index)"
      @mousemove="hoverRating(star.index)"
      @mouseleave="resetRating"
    >
      <span v-if="star.isHalf">½</span>
      <span v-else>★</span>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stars: Array(10).fill().map((_, i) => ({ index: i + 1, isHalf: false })),
      tempRating: 0,
      currentRating: 0
    }
  },
  methods: {
    setRating(rating) {
      this.currentRating = rating;
    },
    hoverRating(rating) {
      this.tempRating = rating;
      this.updateStars();
    },
    resetRating() {
      this.tempRating = 0;
      this.updateStars();
    },
    updateStars() {
      const activeRating = this.tempRating || this.currentRating;
      this.stars = this.stars.map(star => ({
        ...star,
        isHalf: activeRating >= star.index - 0.5 && activeRating < star.index
      }));
    }
  }
}
</script>

以上方法提供了从简单到复杂的评分实现方案，可以根据项目需求选择合适的方式。