vue点击实现星星评价

实现星星评价的基本思路

在Vue中实现星星评价功能，可以通过动态绑定class或样式来控制星星的显示状态。通常需要处理鼠标悬停、点击事件以及根据评分值显示对应的星星状态。

创建星星组件

创建一个可复用的星星评价组件，包含以下核心功能：

• 支持自定义星星数量
• 支持半星显示
• 支持点击交互

<template>
  <div class="star-rating">
    <span 
      v-for="(star, index) in stars" 
      :key="index"
      @click="rate(index + 1)"
      @mouseover="hover(index + 1)"
      @mouseleave="resetRating"
      :class="['star', { 'active': index < currentRating }]"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  props: {
    rating: {
      type: Number,
      default: 0
    },
    maxStars: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      stars: Array(this.maxStars).fill(0),
      currentRating: this.rating,
      tempRating: 0
    };
  },
  methods: {
    rate(rating) {
      this.currentRating = rating;
      this.$emit('rated', rating);
    },
    hover(rating) {
      this.tempRating = this.currentRating;
      this.currentRating = rating;
    },
    resetRating() {
      this.currentRating = this.tempRating;
    }
  }
};
</script>

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

使用星星组件

在父组件中使用星星评价组件，并处理评分结果：

<template>
  <div>
    <star-rating 
      :rating="selectedRating" 
      @rated="handleRating"
    />
    <p>当前评分: {{ selectedRating }}</p>
  </div>
</template>

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

export default {
  components: {
    StarRating
  },
  data() {
    return {
      selectedRating: 0
    };
  },
  methods: {
    handleRating(rating) {
      this.selectedRating = rating;
    }
  }
};
</script>

实现半星评价

如果需要支持半星评价，可以修改星星组件：

<template>
  <div class="star-rating">
    <span 
      v-for="(star, index) in stars" 
      :key="index"
      @click="rate(index + 1)"
      @mouseover="hover(index + 1)"
      @mouseleave="resetRating"
    >
      <span 
        v-if="index + 0.5 <= currentRating"
        class="star full"
      >★</span>
      <span 
        v-else-if="index < currentRating"
        class="star half"
      >★</span>
      <span 
        v-else
        class="star"
      >★</span>
    </span>
  </div>
</template>

<style>
.star-rating {
  font-size: 24px;
  position: relative;
}
.star {
  color: #ccc;
  cursor: pointer;
  position: relative;
}
.star.full {
  color: gold;
}
.star.half {
  color: gold;
  position: absolute;
  width: 50%;
  overflow: hidden;
  left: 0;
}
</style>

使用SVG实现更灵活的星星

对于更专业的视觉效果，可以使用SVG代替字符：

<template>
  <div class="star-rating">
    <svg 
      v-for="(star, index) in stars" 
      :key="index"
      @click="rate(index + 1)"
      @mouseover="hover(index + 1)"
      @mouseleave="resetRating"
      class="star"
      :class="{ 'active': index < currentRating }"
      viewBox="0 0 24 24"
    >
      <path 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>

<style>
.star-rating {
  display: inline-flex;
}
.star {
  width: 24px;
  height: 24px;
  fill: #ccc;
  cursor: pointer;
}
.star.active {
  fill: gold;
}
</style>

实现只读星星评价

如果只需要显示评分而不需要交互，可以简化组件：

<template>
  <div class="star-rating">
    <span 
      v-for="(star, index) in stars" 
      :key="index"
      :class="['star', { 'active': index < rating }]"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  props: {
    rating: {
      type: Number,
      required: true
    },
    maxStars: {
      type: Number,
      default: 5
    }
  },
  computed: {
    stars() {
      return Array(this.maxStars).fill(0);
    }
  }
};
</script>

这些实现方式可以根据具体需求进行调整和组合，创建出符合项目要求的星星评价组件。