vue实现星星

Vue 实现星星评分功能

在 Vue 中实现星星评分功能可以通过组件化方式完成，以下是具体实现方法：

基础实现（静态评分）

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

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

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

.star-rating span.active {
  color: gold;
}
</style>

进阶实现（支持半星）

<template>
  <div class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star"
      @mouseover="hoverRating = star"
      @mouseleave="hoverRating = 0"
      @click="setRating(star)"
    >
      <span 
        v-if="star <= currentRating || (hoverRating && star <= hoverRating)"
        style="color: gold;"
      >
        ★
      </span>
      <span v-else style="color: #ccc;">★</span>
    </span>
  </div>
</template>

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

封装为可复用组件

<!-- StarRating.vue -->
<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star"
      @click="rate(star)"
      @mouseover="hover(star)"
      @mouseleave="hover(0)"
    >
      <span :style="getStarStyle(star)">★</span>
    </span>
    <span v-if="showRating">{{ currentRating }} / {{ maxStars }}</span>
  </div>
</template>

<script>
export default {
  props: {
    rating: {
      type: Number,
      default: 0
    },
    maxStars: {
      type: Number,
      default: 5
    },
    showRating: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      currentRating: this.rating,
      hoverRating: 0
    }
  },
  methods: {
    rate(star) {
      this.currentRating = star
      this.$emit('rating-changed', star)
    },
    hover(star) {
      this.hoverRating = star
    },
    getStarStyle(star) {
      const color = star <= (this.hoverRating || this.currentRating) 
        ? 'gold' 
        : '#ccc'
      return { color, fontSize: '24px', cursor: 'pointer' }
    }
  }
}
</script>

使用组件示例

<template>
  <div>
    <star-rating 
      :rating="3" 
      @rating-changed="updateRating"
    />
    <p>当前评分: {{ userRating }}</p>
  </div>
</template>

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

export default {
  components: {
    StarRating
  },
  data() {
    return {
      userRating: 3
    }
  },
  methods: {
    updateRating(rating) {
      this.userRating = rating
    }
  }
}
</script>

这些实现方法可以根据具体需求进行调整，例如添加动画效果、自定义星星图标或与后端API集成等功能。