vue实现评分星星

Vue 实现评分星星

方法一：使用 v-for 循环生成星星

通过 v-for 循环生成星星图标，利用动态绑定类名实现选中和未选中状态。

<template>
  <div>
    <span 
      v-for="star in 5" 
      :key="star" 
      @click="setRating(star)"
      :class="['star', { 'active': star <= rating }]"
    >
      ★
    </span>
    <p>当前评分: {{ rating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0
    }
  },
  methods: {
    setRating(star) {
      this.rating = star
    }
  }
}
</script>

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

方法二：使用组件实现可复用评分

将评分功能封装为独立组件，便于复用。

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

<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>

<style>
.star-rating {
  display: inline-block;
}
.star {
  font-size: 24px;
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s;
}
.star.filled {
  color: #ffcc00;
}
</style>

方法三：使用 SVG 实现更精美的星星

使用 SVG 绘制星星，可以获得更好的视觉效果。

<template>
  <div class="svg-star-rating">
    <svg 
      v-for="star in 5" 
      :key="star" 
      @click="setRating(star)"
      :class="{ 'active': star <= rating }"
      width="24" 
      height="24" 
      viewBox="0 0 24 24"
    >
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0
    }
  },
  methods: {
    setRating(star) {
      this.rating = star
    }
  }
}
</script>

<style>
.svg-star-rating svg {
  fill: #ddd;
  cursor: pointer;
  margin-right: 5px;
}
.svg-star-rating svg.active {
  fill: #ffcc00;
}
</style>

方法四：实现半星评分

通过计算实现半星评分功能，提供更精确的评分体验。

<template>
  <div class="half-star-rating">
    <div 
      v-for="star in 5" 
      :key="star" 
      class="star-container"
      @mousemove="setHoverValue($event, star)"
      @mouseleave="hoverValue = 0"
      @click="setRating(star)"
    >
      <div class="star-background">★</div>
      <div 
        class="star-foreground" 
        :style="{ width: getStarWidth(star) }"
      >★</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      hoverValue: 0,
      hoverPosition: 0
    }
  },
  methods: {
    setHoverValue(event, star) {
      const rect = event.target.getBoundingClientRect()
      this.hoverPosition = (event.clientX - rect.left) / rect.width
      this.hoverValue = star - 0.5 + this.hoverPosition
    },
    setRating(star) {
      this.rating = star - 0.5 + this.hoverPosition
    },
    getStarWidth(star) {
      const value = this.hoverValue || this.rating
      const starValue = value - (star - 1)
      return `${Math.min(1, Math.max(0, starValue)) * 100}%`
    }
  }
}
</script>

<style>
.half-star-rating {
  display: flex;
}
.star-container {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
}
.star-background, .star-foreground {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 24px;
  line-height: 1;
}
.star-background {
  color: #ddd;
}
.star-foreground {
  color: gold;
  overflow: hidden;
  white-space: nowrap;
}
</style>

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