vue实现评分
实现评分功能的步骤
在Vue中实现评分功能可以通过多种方式完成，以下是一种常见的实现方法：
创建评分组件
使用v-for循环生成评分星星，并通过v-model绑定评分值：
<template>
<div class="rating">
<span
v-for="star in 5"
:key="star"
@click="setRating(star)"
:class="{ 'active': star <= currentRating }"
>
★
</span>
</div>
</template>
<script>
export default {
data() {
return {
currentRating: 0
}
},
methods: {
setRating(star) {
this.currentRating = star
}
}
}
</script>
<style>
.rating span {
font-size: 24px;
color: #ccc;
cursor: pointer;
}
.rating span.active {
color: gold;
}
</style>使用第三方库
对于更复杂的评分需求，可以考虑使用专门的评分组件库：
npm install vue-star-rating<template>
<star-rating v-model="rating"></star-rating>
</template>
<script>
import StarRating from 'vue-star-rating'
export default {
components: {
StarRating
},
data() {
return {
rating: 0
}
}
}
</script>半星评分实现
如果需要支持半星评分，可以修改基本实现：
<template>
<div class="rating">
<span
v-for="star in 5"
:key="star"
@click="setRating(star)"
@mouseover="hoverRating = star"
@mouseleave="hoverRating = 0"
>
<span v-if="star <= currentRating">★</span>
<span v-else-if="star - 0.5 <= currentRating && currentRating < star">½</span>
<span v-else>☆</span>
</span>
</div>
</template>
<script>
export default {
data() {
return {
currentRating: 0,
hoverRating: 0
}
},
methods: {
setRating(star) {
this.currentRating = star
}
}
}
</script>双向绑定
将评分组件封装为可复用的子组件，支持v-model：
<!-- Rating.vue -->
<template>
<div class="rating">
<span
v-for="star in 5"
:key="star"
@click="$emit('input', star)"
:class="{ 'active': star <= value }"
>
★
</span>
</div>
</template>
<script>
export default {
props: ['value']
}
</script>
<!-- 父组件中使用 -->
<template>
<Rating v-model="userRating" />
</template>动画效果
为评分添加过渡动画增强用户体验：
.rating span {
transition: all 0.2s ease;
}
.rating span:hover {
transform: scale(1.2);
}这些方法提供了从简单到复杂的评分实现方案，可以根据项目需求选择合适的实现方式。
