vue实现星星评价

实现星星评价组件

在Vue中实现星星评价功能，可以通过自定义组件完成。以下是一个完整的实现方案：

创建星星评价组件

新建一个StarRating.vue文件，包含以下代码：

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star"
      @click="rate(star)"
      @mouseover="hoverRating = star"
      @mouseleave="hoverRating = 0"
    >
      <span v-if="star <= currentRating">★</span>
      <span v-else-if="star <= hoverRating">★</span>
      <span v-else>☆</span>
    </span>
    <p v-if="showRating">当前评分: {{ currentRating }} / {{ maxStars }}</p>
  </div>
</template>

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

<style>
.star-rating {
  font-size: 24px;
  color: gold;
  cursor: pointer;
}
.star-rating span {
  margin-right: 5px;
}
</style>

使用星星评价组件

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

<template>
  <div>
    <h2>评价我们的产品</h2>
    <star-rating 
      :max-stars="5" 
      :initial-rating="3" 
      @rating-changed="handleRatingChange"
    />
  </div>
</template>

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

export default {
  components: {
    StarRating
  },
  methods: {
    handleRatingChange(rating) {
      console.log('新评分:', rating);
      // 可以在这里处理评分变化逻辑，如发送到API
    }
  }
}
</script>

实现半星评价功能

如果需要更精细的半星评价，可以修改组件如下：

<template>
  <div class="star-rating">
    <span 
      v-for="star in starsArray" 
      :key="star.index"
      @click="rate(star.value)"
      @mouseover="hoverRating = star.value"
      @mouseleave="hoverRating = 0"
    >
      <span v-if="star.value <= currentRating">★</span>
      <span v-else-if="star.value <= hoverRating">★</span>
      <span v-else-if="star.half && currentRating >= star.index - 0.5">½</span>
      <span v-else>☆</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      currentRating: 0,
      hoverRating: 0
    }
  },
  computed: {
    starsArray() {
      const stars = [];
      for (let i = 1; i <= this.maxStars; i++) {
        stars.push({
          index: i,
          value: i,
          half: true
        });
      }
      return stars;
    }
  },
  methods: {
    rate(rating) {
      this.currentRating = rating;
    }
  }
}
</script>

添加动画效果

为星星评价添加悬停动画，可以修改CSS部分：

.star-rating span {
  transition: all 0.2s ease;
  margin-right: 5px;
}
.star-rating span:hover {
  transform: scale(1.2);
}

实现只读模式

添加只读属性，用于展示评分而不允许修改：

<script>
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    rate(star) {
      if (!this.readonly) {
        this.currentRating = star;
        this.$emit('rating-changed', star);
      }
    }
  }
}
</script>

这些实现方案提供了完整的星星评价功能，包括基本评分、半星评价、动画效果和只读模式，可以根据实际需求选择或组合使用。