当前位置：首页 > VUE

vue评分实现

2026-02-10 01:05:30VUE

实现 Vue 评分功能

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

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

安装库：

npm install vue-star-rating

在组件中使用：

<template>
  <star-rating 
    v-model="rating" 
    :increment="0.5" 
    :show-rating="false"
  />
</template>

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

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

自定义评分组件

通过动态渲染星星图标实现：

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
    >
      {{ star <= currentRating ? '★' : '☆' }}
    </span>
    <p>{{ currentRating }} of {{ maxStars }}</p>
  </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-selected', star);
    }
  }
};
</script>

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

实现半星评分

扩展自定义组件以支持半星：

<template>
  <div class="star-rating">
    <span 
      v-for="star in starsArray" 
      :key="star.index"
      @click="setRating(star.index)"
      @mousemove="setPreview(star.index)"
      @mouseleave="resetPreview"
    >
      {{ star.isFull ? '★' : '☆' }}
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: { type: Number, default: 5 },
    value: { type: Number, default: 0 }
  },
  data() {
    return {
      previewRating: 0
    };
  },
  computed: {
    starsArray() {
      return Array.from({ length: this.maxStars }, (_, i) => ({
        index: i + 1,
        isFull: this.previewRating >= i + 1 || 
               (!this.previewRating && this.value >= i + 1)
      }));
    }
  },
  methods: {
    setRating(rating) {
      this.$emit('input', rating);
    },
    setPreview(rating) {
      this.previewRating = rating;
    },
    resetPreview() {
      this.previewRating = 0;
    }
  }
};
</script>

动态颜色和大小

通过 props 控制样式：

vue评分实现

<template>
  <span 
    :style="{
      color: starColor,
      fontSize: starSize + 'px'
    }"
  >
    {{ star <= currentRating ? '★' : '☆' }}
  </span>
</template>

<script>
export default {
  props: {
    starColor: { type: String, default: 'gold' },
    starSize: { type: Number, default: 24 }
  }
};
</script>

这些方法提供了从简单到高级的评分组件实现方案，可根据项目需求选择合适的方式。第三方库适合快速集成，自定义组件则提供更大的灵活性和控制权。