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="resetHover"
:class="{ 'active': (hoveredRating || currentRating) >= index + 1 }"
>
★
</span>
</div>
</template>
<script>
export default {
data() {
return {
currentRating: 0,
hoveredRating: 0,
stars: Array(5).fill(null) // 生成5颗星星
};
},
methods: {
rate(rating) {
this.currentRating = rating;
},
hover(rating) {
this.hoveredRating = rating;
},
resetHover() {
this.hoveredRating = 0;
}
}
};
</script>
<style>
.star-rating span {
font-size: 24px;
color: #ccc;
cursor: pointer;
}
.star-rating .active {
color: gold;
}
</style>功能扩展
-
支持半星评分
通过判断评分的小数部分（如3.5），动态渲染半星图标（如使用☆和★组合）。 -
禁用状态
添加disabled属性，禁用交互事件：<span v-if="!disabled" @click="rate(index + 1)" >★</span> -
自定义大小和颜色
通过props传递样式参数：props: { starSize: { type: Number, default: 24 }, activeColor: { type: String, default: 'gold' } }
使用第三方图标库
若需使用更精美的图标（如Font Awesome或Iconify），替换默认的★符号：
<span>
<icon icon="mdi:star" v-if="(hoveredRating || currentRating) >= index + 1" />
<icon icon="mdi:star-outline" v-else />
</span>双向绑定支持
通过v-model实现父组件与评分组件的双向数据绑定：
props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
rate(rating) {
this.$emit('update:modelValue', rating);
}
}父组件调用：
<star-rating v-model="userRating" />注意事项
- 交互逻辑需根据实际需求调整（如是否允许清零评分）。
- 移动端需考虑触摸事件（如
@touchstart）。 - 可结合
watch监听评分变化，触发异步操作（如提交到后端）。
