当前位置：首页 > VUE

vue实现星级评分效果

2026-01-20 22:24:00VUE

实现星级评分的基础结构

使用Vue实现星级评分需要构建一个可交互的星级组件。基本思路是通过v-for循环生成星星图标，并通过动态绑定类名或样式来控制选中状态。

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

组件数据与事件处理

定义组件的数据属性和方法，处理用户交互逻辑。currentRating存储当前评分，hoverRating处理鼠标悬停效果。

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

样式优化与自定义

通过CSS美化评分组件，允许自定义星星颜色和大小。使用动态类名实现选中状态样式切换。

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

支持半星评分

扩展组件功能以支持半星评分。需要修改模板和评分逻辑，使用小数表示部分选中状态。

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      @mouseover="setHover(star)"
      @mouseleave="resetHover"
    >
      <span v-if="showHalfStar(star)">½</span>
      <span v-else>{{ star <= displayedRating ? '★' : '☆' }}</span>
    </span>
  </div>
</template>

完整组件实现

结合所有功能点的完整组件代码，包含props验证、事件发射和样式控制。

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5,
      validator: value => value > 0
    },
    rating: {
      type: Number,
      default: 0,
      validator: value => value >= 0
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      hoverRating: 0
    }
  },
  computed: {
    displayedRating() {
      return this.hoverRating || this.rating;
    }
  },
  methods: {
    setRating(star) {
      if (!this.editable) return;
      this.$emit('update:rating', star);
    },
    setHover(star) {
      if (!this.editable) return;
      this.hoverRating = star;
    },
    resetHover() {
      this.hoverRating = 0;
    }
  }
}
</script>

使用第三方图标库

替代纯文本星星，使用Font Awesome或其他图标库实现更专业的视觉效果。需要先安装相应图标库。

<template>
  <div class="star-rating">
    <font-awesome-icon
      v-for="star in maxStars"
      :key="star"
      :icon="star <= currentRating ? 'fas fa-star' : 'far fa-star'"
      @click="rate(star)"
    />
  </div>
</template>

vue实现星级评分效果