vue实现星级评分

Vue 实现星级评分的方法

使用组件库实现

安装 element-ui 或 ant-design-vue 等 UI 库，它们提供了现成的星级评分组件。

// 使用 element-ui 的 Rate 组件
<template>
  <el-rate v-model="rating" :colors="colors"></el-rate>
</template>

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

自定义实现

通过 Vue 的模板和事件绑定，可以自定义星级评分组件。

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

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

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

支持半星评分

如果需要支持半星评分，可以稍微修改逻辑和样式。

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="rate(star)" 
      @mousemove="hover(star)"
      @mouseleave="resetHover"
      :class="getClass(star)"
    >★</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStars: 0,
      hoverStars: 0
    }
  },
  methods: {
    rate(star) {
      this.currentStars = star
    },
    hover(star) {
      this.hoverStars = star
    },
    resetHover() {
      this.hoverStars = 0
    },
    getClass(star) {
      return {
        'active': star <= this.currentStars,
        'hover': star <= this.hoverStars && star > this.currentStars
      }
    }
  }
}
</script>

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

使用 SVG 图标

为了更好的视觉效果，可以使用 SVG 图标代替 Unicode 星星。

<template>
  <div class="star-rating">
    <svg 
      v-for="star in maxStars" 
      :key="star" 
      @click="rate(star)"
      :class="{ 'filled': star <= currentStars }"
      width="24" 
      height="24" 
      viewBox="0 0 24 24"
    >
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
    </svg>
  </div>
</template>

添加动画效果

可以为星级评分添加简单的动画效果，提升用户体验。

<style>
.star-rating svg {
  transition: all 0.2s ease;
}
.star-rating svg:hover {
  transform: scale(1.2);
}
</style>

以上方法可以根据实际需求选择使用，组件库实现快速但自定义程度低，自定义实现灵活性高但需要更多代码。