vue实现简单星星评分
Vue 实现星星评分组件
以下是一个基于 Vue 的简单星星评分组件实现方案，支持点击评分和鼠标悬停效果。
组件模板部分
<template>
<div class="star-rating">
<span
v-for="star in maxStars"
:key="star"
@click="setRating(star)"
@mouseover="hoverRating = star"
@mouseleave="hoverRating = 0"
:class="{ 'active': star <= (hoverRating || currentRating) }"
>
★
</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: {
setRating(star) {
this.currentRating = star;
this.$emit('rating-selected', star);
}
}
}
</script>样式部分
<style scoped>
.star-rating {
font-size: 24px;
color: #ccc;
}
.star-rating span {
cursor: pointer;
padding: 0 2px;
}
.star-rating .active {
color: #ffcc00;
}
</style>使用组件
<star-rating
:max-stars="5"
:initial-rating="3"
@rating-selected="handleRating"
/>功能说明
maxStars属性控制最大星星数量initialRating设置初始评分值rating-selected事件在用户选择评分时触发- 鼠标悬停时显示临时评分效果
- 点击后固定评分值
进阶改进建议
- 添加半星评分功能
- 支持禁用状态（只读模式）
- 自定义星星图标和颜色
- 添加评分文字提示
- 实现动画过渡效果
该组件实现简单但功能完整，可根据具体需求进一步扩展和完善。
