vue 实现评分

实现评分功能的几种方法

使用第三方库（如vue-star-rating）

安装vue-star-rating库：

npm install vue-star-rating

在组件中使用：

<template>
  <star-rating 
    v-model="rating"
    :increment="0.5"
    :star-size="30"
  />
</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 maxStars" 
      :key="star"
      @click="setRating(star)"
      @mouseover="hoverRating = star"
      @mouseleave="hoverRating = 0"
    >
      {{ star <= (hoverRating || rating) ? '★' : '☆' }}
    </span>
  </div>
</template>

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

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

使用Element UI的Rate组件

安装Element UI：

npm install element-ui

在main.js中引入：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在组件中使用：

<template>
  <el-rate
    v-model="rating"
    :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
    :max="10"
    show-text
  />
</template>

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

实现半星评分功能

修改自定义组件支持半星：

<template>
  <div class="star-rating">
    <span 
      v-for="star in stars" 
      :key="star.index"
      @click="setRating(star.value)"
      @mouseover="hoverRating = star.value"
      @mouseleave="hoverRating = 0"
    >
      <span v-if="star.isHalf">½</span>
      <span v-else>{{ star.isFilled ? '★' : '☆' }}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    increment: {
      type: Number,
      default: 0.5
    }
  },
  computed: {
    stars() {
      const stars = []
      for (let i = 1; i <= this.maxStars; i += this.increment) {
        stars.push({
          index: i,
          value: i,
          isHalf: i % 1 !== 0,
          isFilled: i <= this.currentRating
        })
      }
      return stars
    },
    currentRating() {
      return this.hoverRating || this.rating
    }
  },
  data() {
    return {
      rating: 0,
      hoverRating: 0
    }
  },
  methods: {
    setRating(rating) {
      this.rating = rating
      this.$emit('input', rating)
    }
  }
}
</script>

带文字描述的评分

在评分旁添加文字描述：

<template>
  <div>
    <star-rating v-model="rating" />
    <div class="rating-text">
      {{ ratingText }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      texts: ['很差', '差', '一般', '好', '很好']
    }
  },
  computed: {
    ratingText() {
      return this.texts[Math.ceil(this.rating) - 1] || ''
    }
  }
}
</script>

以上方法提供了从简单到复杂的多种实现方案，可根据项目需求选择合适的实现方式。第三方库方案适合快速开发，自定义组件方案则提供更大的灵活性。