vue实现星级评价

Vue 实现星级评价的方法

使用组件库实现

安装现成的 Vue 星级评价组件库，例如 vue-star-rating 或 vue-rate。以 vue-star-rating 为例：

1. 安装组件库：

   npm install vue-star-rating

2. 在组件中使用：

   
   <template>
   <star-rating 
    v-model="rating" 
    :star-size="30" 
    :show-rating="false"
   />
   </template>

import StarRating from 'vue-star-rating';

export default { components: { StarRating }, data() { return { rating: 3 }; } };

```

自定义实现

如果需要完全自定义星级评价，可以通过以下方式实现：

1. 创建星级评价组件：

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

export default { data() { return { currentRating: 0 }; }, methods: { setRating(rating) { this.currentRating = rating; this.$emit('rating-selected', rating); } } }; .star-rating span { font-size: 24px; color: #ccc; cursor: pointer; } .star-rating span.active { color: gold; } ```

1. 在父组件中使用：

   
   <template>
   <div>
    <StarRating @rating-selected="handleRating" />
    <p>当前评分: {{ selectedRating }}</p>
   </div>
   </template>

import StarRating from './StarRating.vue';

export default { components: { StarRating }, data() { return { selectedRating: 0 }; }, methods: { handleRating(rating) { this.selectedRating = rating; } } };

```

实现半星评价

如果需要支持半星评价，可以修改自定义组件：

<template>
  <div class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star" 
      @click="setRating(star)"
      @mousemove="setTempRating(star)"
      @mouseleave="resetTempRating"
      :class="{
        'active': star <= currentRating,
        'half-active': star === Math.ceil(currentRating) && currentRating % 1 > 0
      }"
    >★</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      tempRating: 0
    };
  },
  methods: {
    setRating(rating) {
      this.currentRating = rating;
      this.$emit('rating-selected', rating);
    },
    setTempRating(rating) {
      this.tempRating = rating;
    },
    resetTempRating() {
      this.tempRating = 0;
    }
  },
  computed: {
    displayRating() {
      return this.tempRating || this.currentRating;
    }
  }
};
</script>

<style>
.star-rating span {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  position: relative;
}
.star-rating span.active {
  color: gold;
}
.star-rating span.half-active::before {
  content: '★';
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: gold;
}
</style>

注意事项

• 组件可以接收初始评分作为 prop
• 可以通过 CSS 自定义星星的大小、颜色和间距
• 可以添加动画效果提升用户体验
• 考虑添加无障碍访问特性，如 ARIA 标签

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