vue实现星星评分原理
实现星星评分的基本原理
星星评分通常通过显示一组星星图标，允许用户点击或悬停来选择评分值。Vue 的响应式特性使得实现这一功能变得简单，核心逻辑包括数据绑定、事件处理和动态样式控制。
数据绑定与渲染
定义评分数据模型，通常使用一个数组或数字表示当前评分和最大评分。通过 v-for 循环渲染星星图标，根据评分值动态决定星星的显示状态（如空心、半星、实心）。
<template>
<div class="star-rating">
<span
v-for="(star, index) in stars"
:key="index"
@click="rate(index + 1)"
@mouseover="hover(index + 1)"
@mouseleave="resetRating"
>
{{ star }}
</span>
</div>
</template>事件处理
通过 @click 事件绑定用户点击评分，@mouseover 和 @mouseleave 实现悬停效果。Vue 的方法可以更新评分数据，触发视图重新渲染。
<script>
export default {
data() {
return {
rating: 0,
tempRating: 0,
maxStars: 5
};
},
computed: {
stars() {
return Array(this.maxStars).fill().map((_, i) => {
return i < this.tempRating ? '★' : '☆';
});
}
},
methods: {
rate(score) {
this.rating = score;
},
hover(score) {
this.tempRating = score;
},
resetRating() {
this.tempRating = this.rating;
}
}
};
</script>动态样式控制
通过 CSS 或内联样式控制星星的颜色和大小。可以使用 :class 或 :style 绑定动态类名或样式，根据评分值切换星星的显示状态。
.star-rating span {
font-size: 24px;
cursor: pointer;
color: #ccc;
}
.star-rating span.active {
color: gold;
}支持半星评分
如果需要半星评分，可以通过更复杂的数据处理和样式控制实现。例如，将评分值乘以 2 处理为整数，再根据奇偶性显示半星。
stars() {
return Array(this.maxStars).fill().map((_, i) => {
const score = i + 1;
if (this.tempRating >= score) return '★';
if (this.tempRating + 0.5 === score) return '½';
return '☆';
});
}使用第三方库
对于更复杂的需求，可以直接使用现成的 Vue 星星评分组件库，如 vue-star-rating。这些库提供了丰富的配置选项，如自定义星星数量、颜色、大小和半星支持。
npm install vue-star-ratingimport StarRating from 'vue-star-rating';
export default {
components: {
StarRating
}
};<star-rating
:rating="rating"
@rating-selected="setRating"
:star-size="20"
:rounded-corners="true"
:border-width="1"
></star-rating>
