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>
    <p v-if="showRating">{{ currentRating }} of {{ maxStars }} stars</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: {
    setRating(star) {
      this.currentRating = star;
      this.$emit('rating-selected', star);
    },
    hoverRating(star) {
      this.hoverRating = star;
    },
    resetRating() {
      this.hoverRating = 0;
    }
  }
}
</script>

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

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

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

使用组件示例

在父组件中使用星星评分组件：

<template>
  <div>
    <star-rating 
      :max-stars="5" 
      :initial-rating="3" 
      @rating-selected="handleRating"
    />
  </div>
</template>

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

export default {
  components: {
    StarRating
  },
  methods: {
    handleRating(rating) {
      console.log('Selected rating:', rating);
    }
  }
}
</script>

可选功能扩展

增加半星评分功能：

<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 + hasHalfStar + star)"
    >
      ☆
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    rating: {
      type: Number,
      default: 0
    }
  },
  computed: {
    fullStars() {
      return Math.floor(this.rating);
    },
    hasHalfStar() {
      return this.rating % 1 >= 0.5;
    },
    emptyStars() {
      return this.maxStars - this.fullStars - (this.hasHalfStar ? 1 : 0);
    }
  },
  methods: {
    setRating(rating) {
      this.$emit('update:rating', Math.min(rating, this.maxStars));
    }
  }
}
</script>

样式优化建议

对于更精美的视觉效果，可以使用CSS动画和变换：

.star-rating span {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.star-rating span:hover {
  transform: scale(1.2);
}

.star-rating span.active {
  color: #ffc107;
  text-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
}