vue 实现星级评价

实现星级评价的基本思路

在Vue中实现星级评价通常涉及动态渲染星星图标，并根据用户交互（点击或悬停）切换选中状态。核心逻辑包括数据绑定、事件处理和样式控制。

基于原生Vue的实现

模板部分
使用v-for循环生成星星，通过动态类名控制选中状态：

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

脚本部分
定义评分逻辑和交互状态：

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

样式部分
通过CSS控制星星颜色和交互效果：

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

使用第三方库（vue-star-rating）

若需要更丰富的功能（如半星评分），可引入现成库：

1. 安装依赖：

   

   npm install vue-star-rating

2. 组件中使用：

   
   <template>
   <star-rating 
    :rating="rating"
    @rating-selected="setRating"
    :increment="0.5"
    :star-size="30"
   />
   </template>

import StarRating from 'vue-star-rating'; export default { components: { StarRating }, data() { return { rating: 3.5 }; }, methods: { setRating(rating) { this.rating = rating; } } }; ```

高级自定义选项

带动态提示文本
在评分时显示提示信息（如“差/一般/好”）：

data() {
  return {
    labels: ['差', '一般', '中等', '好', '优秀']
  };
},
computed: {
  hintText() {
    return this.labels[this.currentRating - 1] || '';
  }
}

禁用状态
通过v-bind控制是否允许交互：

<span 
  v-for="star in maxStars"
  :class="{ 'disabled': isDisabled }"
  @click="!isDisabled && setRating(star)"
>
  ★
</span>

注意事项

• 若需要持久化评分，可通过axios将currentRating提交至后端。
• 移动端适配建议增加触摸事件（如@touchstart）。
• 可替换Unicode字符★为SVG图标以获得更精细的样式控制。