vue实现简单星星评分

Vue实现简单星星评分组件

以下是一个基于Vue的简单星星评分实现方案，支持点击评分和展示评分：

组件代码

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="rate(star)"
      @mouseover="hoverRating = star"
      @mouseleave="hoverRating = 0"
      :class="{ 'active': star <= currentRating || star <= hoverRating }"
    >
      ★
    </span>
    <span v-if="showRating">{{ currentRating }} / {{ maxStars }}</span>
  </div>
</template>

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

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

使用方法

<template>
  <div>
    <star-rating 
      :initial-rating="3" 
      @rated="handleRating"
    />
  </div>
</template>

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

export default {
  components: {
    StarRating
  },
  methods: {
    handleRating(rating) {
      console.log('用户评分:', rating);
    }
  }
}
</script>

功能说明

1. 可自定义星星数量：通过maxStars prop设置最大星星数（默认5颗）
2. 初始评分设置：通过initialRating prop设置初始评分
3. 评分显示：通过showRating控制是否显示当前评分
4. 交互反馈：鼠标悬停时显示临时评分效果，点击后确定评分
5. 事件触发：评分变化时触发rated事件

进阶优化方向

1. 半星评分：修改组件逻辑支持半星显示
2. 禁用状态：添加disabled prop防止二次修改
3. 自定义样式：通过slot或props支持自定义星星图标
4. 只读模式：纯展示不交互的场景支持

该实现保持简洁的同时提供了基本的评分功能，可根据实际需求进行扩展。组件采用单向数据流设计，通过事件通知父组件评分变化，符合Vue的最佳实践。