vue实现星星评价
Vue 实现星星评价组件
在 Vue 中实现星星评价功能可以通过自定义组件完成，主要涉及动态渲染星星图标、交互评分以及样式控制。以下是具体实现方法：
创建星星评价组件
模板部分
使用 v-for 循环渲染星星图标，并通过 v-on 监听点击和鼠标悬停事件：
<template>
<div class="star-rating">
<span
v-for="(star, index) in stars"
:key="index"
@click="rate(index + 1)"
@mouseover="hover(index + 1)"
@mouseleave="resetRating"
:class="{ 'active': star }"
>
★
</span>
<p v-if="showScore">当前评分: {{ currentRating }}/{{ maxStars }}</p>
</div>
</template>脚本部分
定义组件的逻辑，包括初始化评分、处理交互事件：
<script>
export default {
props: {
maxStars: {
type: Number,
default: 5
},
initialRating: {
type: Number,
default: 0
},
showScore: {
type: Boolean,
default: true
}
},
data() {
return {
stars: Array(this.maxStars).fill(false),
currentRating: this.initialRating,
tempRating: 0
};
},
methods: {
rate(score) {
this.currentRating = score;
this.$emit('rated', score);
this.updateStars();
},
hover(score) {
this.tempRating = score;
this.updateStars();
},
resetRating() {
this.tempRating = 0;
this.updateStars();
},
updateStars() {
const rating = this.tempRating || this.currentRating;
this.stars = this.stars.map((_, i) => i < rating);
}
},
mounted() {
this.updateStars();
}
};
</script>样式部分
通过 CSS 控制星星的默认和激活状态：
<style scoped>
.star-rating {
font-size: 24px;
}
.star-rating span {
color: #ccc;
cursor: pointer;
}
.star-rating span.active {
color: #ffcc00;
}
</style>使用组件示例
在父组件中引入并绑定事件：
<template>
<div>
<StarRating
:initial-rating="3"
@rated="handleRating"
/>
</div>
</template>
<script>
import StarRating from './StarRating.vue';
export default {
components: { StarRating },
methods: {
handleRating(score) {
console.log('用户评分:', score);
}
}
};
</script>功能扩展建议
-
半星评分
修改updateStars方法，支持半星显示（如 3.5 分），可通过 Unicode 符号☆和★组合实现。 -
禁用状态
添加disabled属性，禁止用户交互：props: { disabled: { type: Boolean, default: false } }在模板中根据
disabled禁用事件：<span v-if="!disabled" @click="rate(index + 1)" @mouseover="hover(index + 1)" ></span> -
自定义图标
使用slot或props传入自定义图标组件，替代默认的 Unicode 星星。
通过以上方法，可以快速实现一个灵活、可复用的星星评价组件，适用于商品评分、用户反馈等场景。
