vue 实现星级评价

实现星级评价的步骤

使用组件实现星级评价

在Vue中，可以通过创建一个星级评价组件来实现。该组件允许用户点击星星进行评分，并显示当前评分。

<template>
  <div class="star-rating">
    <span
      v-for="star in maxStars"
      :key="star"
      @click="rate(star)"
      @mouseover="hover(star)"
      @mouseleave="resetHover"
      :class="{ 'star': true, 'active': star <= currentRating || star <= hoverRating }"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentRating: this.initialRating,
      hoverRating: 0
    };
  },
  methods: {
    rate(star) {
      this.currentRating = star;
      this.$emit('rated', star);
    },
    hover(star) {
      this.hoverRating = star;
    },
    resetHover() {
      this.hoverRating = 0;
    }
  }
};
</script>

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

使用第三方库实现星级评价

如果需要更复杂的功能，可以使用第三方库如vue-star-rating。安装后直接使用即可。

npm install vue-star-rating

在Vue组件中使用：

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

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

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

自定义样式和交互

可以通过CSS和事件处理来自定义星级评价的外观和交互行为。例如，改变星星的颜色、大小或添加动画效果。

.star-rating {
  display: inline-block;
}
.star {
  transition: all 0.2s;
}
.star:hover {
  transform: scale(1.2);
}

处理评分数据

将评分数据通过事件传递给父组件，或在组件内部处理。例如，保存评分到数据库或显示在页面上。

<template>
  <star-rating @rated="handleRating" />
</template>

<script>
export default {
  methods: {
    handleRating(rating) {
      console.log('User rated:', rating);
      // 保存评分或进行其他操作
    }
  }
};
</script>

通过以上方法，可以灵活地在Vue中实现星级评价功能，满足不同场景的需求。