当前位置：首页 > VUE

vue实现星星评分

2026-03-08 04:12:50VUE

实现星星评分的基本思路

在Vue中实现星星评分功能，通常需要创建一个可交互的星级评分组件。用户可以通过点击星星来设置评分，同时组件需要能够显示当前评分值。

创建评分组件

创建一个Vue组件，用于渲染星星并处理用户交互。可以使用v-for指令来渲染多个星星图标。

vue实现星星评分

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

定义组件数据和方法

在组件的script部分定义必要的数据和方法，包括当前评分、悬停状态和星星数量。

<script>
export default {
  data() {
    return {
      stars: 5, // 星星总数
      currentRating: 0, // 当前评分
      tempRating: 0 // 悬停时的临时评分
    };
  },
  methods: {
    setRating(rating) {
      this.currentRating = rating;
      this.$emit('rating-selected', rating); // 触发事件通知父组件
    },
    hoverRating(rating) {
      this.tempRating = rating;
    },
    resetRating() {
      this.tempRating = this.currentRating;
    }
  },
  computed: {
    displayRating() {
      return this.tempRating || this.currentRating;
    }
  }
};
</script>

样式设计

为星星评分组件添加样式，确保星星在悬停和选中时有视觉反馈。

vue实现星星评分

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

使用组件

在父组件中使用星星评分组件，并监听评分事件。

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

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

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

进阶功能

如果需要更复杂的功能，例如半星评分或只读模式，可以通过以下方式扩展：

半星评分：使用两个半星图标组合，通过计算显示部分星星。
只读模式：通过props传递readonly属性，禁用交互事件。
自定义星星数量：通过props动态设置星星总数。

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