vue实现评分案例

实现评分组件的基本结构

在Vue中创建一个评分组件，可以使用v-for循环生成星星图标，并通过v-model或自定义事件实现双向绑定。以下是一个基于Font Awesome图标的实现示例：

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      @mouseover="hoverRating(star)"
      @mouseleave="resetRating"
    >
      <i :class="['fa', star <= currentRating ? 'fa-star' : 'fa-star-o']"></i>
    </span>
    <p v-if="showScore">{{ currentRating }} / {{ maxStars }}</p>
  </div>
</template>

组件逻辑与数据绑定

组件需要定义评分相关数据和方法，通过props接收外部传入的配置参数：

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

样式优化与交互效果

添加CSS样式增强视觉效果，可以使用过渡动画和颜色变化提升用户体验：

<style scoped>
.star-rating {
  font-size: 24px;
  color: #ffc107;
}
.star-rating span {
  cursor: pointer;
  transition: all 0.2s;
}
.star-rating span:hover {
  transform: scale(1.2);
}
.star-rating p {
  font-size: 16px;
  color: #666;
  margin-top: 5px;
}
</style>

使用自定义SVG图标

如果需要使用自定义SVG代替字体图标，可以修改模板部分：

<template>
  <div class="star-rating">
    <svg 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      width="24" 
      height="24"
      viewBox="0 0 24 24"
    >
      <path 
        :fill="star <= currentRating ? '#ffc107' : '#e0e0e0'" 
        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>

支持半星评分

实现半星评分功能需要修改评分逻辑和图标显示方式：

methods: {
  setRating(star, event) {
    const rect = event.target.getBoundingClientRect();
    const isHalf = event.clientX - rect.left < rect.width / 2;
    this.currentRating = star - (isHalf ? 0.5 : 0);
    this.$emit('rating-changed', this.currentRating);
  }
}

模板部分对应调整为显示半星图标：

<span v-for="star in maxStars" :key="star" @click="setRating(star, $event)">
  <i v-if="star <= currentRating" class="fa fa-star"></i>
  <i v-else-if="star - 0.5 <= currentRating" class="fa fa-star-half-o"></i>
  <i v-else class="fa fa-star-o"></i>
</span>

组件使用示例

在父组件中使用评分组件并处理评分变化事件：

<template>
  <div>
    <star-rating 
      :max-stars="5" 
      :initial-rating="3" 
      @rating-changed="handleRatingChange"
    />
    <p>当前评分: {{ userRating }}</p>
  </div>
</template>

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

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