vue实现星星评分原理

实现星星评分的基本原理

星星评分通常通过显示一组星星图标，允许用户点击或悬停来选择评分值。Vue 的响应式特性使得实现这一功能变得简单，核心逻辑包括数据绑定、事件处理和动态样式控制。

数据绑定与渲染

定义评分数据模型，通常使用一个数组或数字表示当前评分和最大评分。通过 v-for 循环渲染星星图标，根据评分值动态决定星星的显示状态（如空心、半星、实心）。

<template>
  <div class="star-rating">
    <span 
      v-for="(star, index) in stars" 
      :key="index"
      @click="rate(index + 1)"
      @mouseover="hover(index + 1)"
      @mouseleave="resetRating"
    >
      {{ star }}
    </span>
  </div>
</template>

事件处理

通过 @click 事件绑定用户点击评分，@mouseover 和 @mouseleave 实现悬停效果。Vue 的方法可以更新评分数据，触发视图重新渲染。

<script>
export default {
  data() {
    return {
      rating: 0,
      tempRating: 0,
      maxStars: 5
    };
  },
  computed: {
    stars() {
      return Array(this.maxStars).fill().map((_, i) => {
        return i < this.tempRating ? '★' : '☆';
      });
    }
  },
  methods: {
    rate(score) {
      this.rating = score;
    },
    hover(score) {
      this.tempRating = score;
    },
    resetRating() {
      this.tempRating = this.rating;
    }
  }
};
</script>

动态样式控制

通过 CSS 或内联样式控制星星的颜色和大小。可以使用 :class 或 :style 绑定动态类名或样式，根据评分值切换星星的显示状态。

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

支持半星评分

如果需要半星评分，可以通过更复杂的数据处理和样式控制实现。例如，将评分值乘以 2 处理为整数，再根据奇偶性显示半星。

stars() {
  return Array(this.maxStars).fill().map((_, i) => {
    const score = i + 1;
    if (this.tempRating >= score) return '★';
    if (this.tempRating + 0.5 === score) return '½';
    return '☆';
  });
}

使用第三方库

对于更复杂的需求，可以直接使用现成的 Vue 星星评分组件库，如 vue-star-rating。这些库提供了丰富的配置选项，如自定义星星数量、颜色、大小和半星支持。

npm install vue-star-rating

import StarRating from 'vue-star-rating';

export default {
  components: {
    StarRating
  }
};

<star-rating 
  :rating="rating"
  @rating-selected="setRating"
  :star-size="20"
  :rounded-corners="true"
  :border-width="1"
></star-rating>