vue实现等级打分
Vue 实现等级打分功能
使用 v-model 绑定评分值
在 Vue 中可以通过 v-model 双向绑定一个数据属性来存储评分值。例如使用数字 1-5 表示五个等级：
<template>
<div>
<span
v-for="star in 5"
:key="star"
@click="rating = star"
>
{{ star <= rating ? '★' : '☆' }}
</span>
</div>
</template>
<script>
export default {
data() {
return {
rating: 0
}
}
}
</script>使用组件库实现
Element UI 和 Ant Design Vue 等流行组件库都提供了现成的评分组件：
<!-- Element UI -->
<el-rate v-model="rating"></el-rate>
<!-- Ant Design Vue -->
<a-rate v-model="rating" />自定义评分组件
创建可复用的评分组件，支持自定义图标、颜色和大小：
<template>
<div class="star-rating">
<span
v-for="star in maxStars"
:key="star"
@click="setRating(star)"
:class="{ 'active': star <= currentRating }"
>
★
</span>
</div>
</template>
<script>
export default {
props: {
maxStars: {
type: Number,
default: 5
},
initialRating: {
type: Number,
default: 0
}
},
data() {
return {
currentRating: this.initialRating
}
},
methods: {
setRating(star) {
this.currentRating = star
this.$emit('rating-changed', star)
}
}
}
</script>
<style>
.star-rating span {
font-size: 24px;
color: #ccc;
cursor: pointer;
}
.star-rating span.active {
color: gold;
}
</style>支持半星评分
实现更精确的半星评分功能：
<template>
<div>
<span
v-for="star in 5"
:key="star"
@mousemove="setTempRating(star)"
@mouseleave="tempRating = 0"
@click="setFinalRating(star)"
>
{{ getStarType(star) }}
</span>
</div>
</template>
<script>
export default {
data() {
return {
rating: 0,
tempRating: 0
}
},
methods: {
setTempRating(star) {
this.tempRating = star
},
setFinalRating(star) {
this.rating = star
},
getStarType(star) {
if (this.tempRating >= star || (!this.tempRating && this.rating >= star)) {
return '★'
}
return '☆'
}
}
}
</script>添加动画效果
使用 CSS 过渡或动画增强用户体验：
.star-rating span {
transition: all 0.2s ease;
}
.star-rating span:hover {
transform: scale(1.2);
}这些方法提供了从简单到复杂的 Vue 评分实现方案，可根据项目需求选择适合的方式。组件化的实现提高了代码复用性，而自定义功能则可以满足特定的设计需求。
