vue实现等级打分

Vue 实现等级打分功能

使用 v-model 绑定评分值

在 Vue 中可以通过 v-model 双向绑定一个数据属性来存储评分值。例如使用数字 1-5 表示五个等级：

<template>
  <div>
    <span 
      v-for="star in 5" 
      :key="star"
      @click="rating = star"
    >
      {{ star <= rating ? '★' : '☆' }}
    </span>
  </div>
</template>

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

使用组件库实现

Element UI 和 Ant Design Vue 等流行组件库都提供了现成的评分组件：

<!-- Element UI -->
<el-rate v-model="rating"></el-rate>

<!-- Ant Design Vue -->
<a-rate v-model="rating" />

自定义评分组件

创建可复用的评分组件，支持自定义图标、颜色和大小：

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

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

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

支持半星评分

实现更精确的半星评分功能：

<template>
  <div>
    <span 
      v-for="star in 5"
      :key="star"
      @mousemove="setTempRating(star)"
      @mouseleave="tempRating = 0"
      @click="setFinalRating(star)"
    >
      {{ getStarType(star) }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      tempRating: 0
    }
  },
  methods: {
    setTempRating(star) {
      this.tempRating = star
    },
    setFinalRating(star) {
      this.rating = star
    },
    getStarType(star) {
      if (this.tempRating >= star || (!this.tempRating && this.rating >= star)) {
        return '★'
      }
      return '☆'
    }
  }
}
</script>

添加动画效果

使用 CSS 过渡或动画增强用户体验：

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

这些方法提供了从简单到复杂的 Vue 评分实现方案，可根据项目需求选择适合的方式。组件化的实现提高了代码复用性，而自定义功能则可以满足特定的设计需求。