vue 实现评分

实现评分组件的方法

在Vue中实现评分功能，可以通过自定义组件或使用第三方库来完成。以下是几种常见的实现方式：

使用自定义组件

创建一个可交互的评分组件，允许用户点击星星进行评分。

<template>
  <div class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star" 
      @click="setRating(star)"
      :class="{ 'active': star <= currentRating }"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star
      this.$emit('rating-selected', star)
    }
  }
}
</script>

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

使用第三方库

可以使用现成的评分组件库，如vue-star-rating，安装后直接使用。

安装：

npm install vue-star-rating

使用示例：

<template>
  <star-rating 
    v-model="rating"
    :increment="0.5"
    :star-size="20"
  />
</template>

<script>
import StarRating from 'vue-star-rating'

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 0
    }
  }
}
</script>

实现半星评分

如果需要支持半星评分，可以修改自定义组件逻辑。

<template>
  <div class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star" 
      @click="setRating(star)"
      @mousemove="setTempRating(star)"
      @mouseleave="resetTempRating"
      :class="getStarClass(star)"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      tempRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star
    },
    setTempRating(star) {
      this.tempRating = star
    },
    resetTempRating() {
      this.tempRating = 0
    },
    getStarClass(star) {
      return {
        'active': star <= this.currentRating,
        'hover': star <= this.tempRating && this.tempRating > 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 class="star-rating">
    <span 
      v-for="star in 5" 
      :key="star" 
      :class="{ 'active': star <= rating }"
    >
      {{ star <= rating ? '★' : '☆' }}
    </span>
  </div>
</template>

<script>
export default {
  props: {
    rating: {
      type: Number,
      required: true
    }
  }
}
</script>

<style>
.star-rating span {
  font-size: 20px;
}
.star-rating span.active {
  color: gold;
}
</style>

以上方法可以根据具体需求选择使用，自定义组件提供了最大的灵活性，而第三方库则可以快速实现复杂功能。