vue实现简单星星评分

实现星星评分组件

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

组件模板部分

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star"
      @click="setRating(star)"
      @mouseover="hoverRating(star)"
      @mouseleave="resetRating"
      :class="{ 'active': star <= currentRating, 'hover': 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: {
    setRating(star) {
      this.currentRating = star;
      this.$emit('rating-changed', star);
    },
    hoverRating(star) {
      this.hoverRating = star;
    },
    resetRating() {
      this.hoverRating = 0;
    }
  }
}
</script>

组件样式部分

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

.star-rating span {
  margin-right: 5px;
}

.star-rating .active {
  color: gold;
}

.star-rating .hover {
  color: orange;
}
</style>

使用方法

在父组件中引入并使用星星评分组件：

<star-rating 
  :max-stars="5" 
  :initial-rating="3"
  @rating-changed="handleRatingChange"
/>

methods: {
  handleRatingChange(rating) {
    console.log('Selected rating:', rating);
  }
}

实现半星评分

如需实现半星评分功能，可以修改组件逻辑：

<template>
  <div class="star-rating">
    <span 
      v-for="star in fullStars" 
      :key="'full-' + star"
      @click="setRating(star)"
    >★</span>

    <span 
      v-if="hasHalfStar"
      @click="setRating(fullStars + 0.5)"
    >½</span>

    <span 
      v-for="star in emptyStars" 
      :key="'empty-' + star"
      @click="setRating(fullStars + 0.5 + star)"
    >☆</span>
  </div>
</template>

computed: {
  fullStars() {
    return Math.floor(this.currentRating);
  },
  hasHalfStar() {
    return this.currentRating % 1 !== 0;
  },
  emptyStars() {
    return this.maxStars - Math.ceil(this.currentRating);
  }
}

以上实现提供了完整的星星评分功能，包括交互效果和样式自定义，可根据实际需求进行调整。