vue实现星级评价

Vue 实现星级评价

基本实现思路

使用 Vue 的 v-for 指令渲染星星图标，通过绑定点击事件和动态类名实现交互效果。核心逻辑包括：

• 数据驱动：用 currentRating 存储当前评分
• 鼠标悬停高亮：用 hoverRating 跟踪鼠标悬停状态
• 图标切换：根据评分状态显示实心/空心星星

代码实现

<template>
  <div class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star"
      @click="setRating(star)"
      @mouseover="hoverRating = star"
      @mouseleave="hoverRating = 0"
      :class="['star', { 'filled': (hoverRating || currentRating) >= star }]"
    >
      {{ (hoverRating || currentRating) >= star ? '★' : '☆' }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      hoverRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star
    }
  }
}
</script>

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

进阶优化方案

1. 可配置项

   

   props: {
   maxStars: {
    type: Number,
    default: 5
   },
   initialRating: {
    type: Number,
    default: 0
   }
   }

2. 半星评分实现

   <span 
   v-for="star in maxStars" 
   @mousemove="setHoverPosition($event, star)"
   >
   <span class="star-background">☆</span>
   <span 
    class="star-foreground" 
    :style="{ width: getStarWidth(star) }"
   >★</span>
   </span>

3. 动画效果

   

   .star {
   transition: transform 0.2s;
   }
   .star:hover {
   transform: scale(1.2);
   }

第三方库方案

1. 安装 vue-star-rating：

   npm install vue-star-rating

2. 使用示例：

   <star-rating 
   :rating="3.5"
   :star-size="30"
   :read-only="false"
   @rating-selected="setRating"
   />

注意事项

• 移动端适配需增加触摸事件处理
• 考虑添加 readonly 状态用于展示场景
• 可通过 localStorage 持久化用户评分
• 表单集成时建议使用 v-model 双向绑定

完整实现可根据实际需求选择基础方案或扩展功能，关键是根据交互状态动态更新 UI 表现。