vue 实现星级评价
实现星级评价的步骤
使用组件实现星级评价
在Vue中，可以通过创建一个星级评价组件来实现。该组件允许用户点击星星进行评分，并显示当前评分。
<template>
<div class="star-rating">
<span
v-for="star in maxStars"
:key="star"
@click="rate(star)"
@mouseover="hover(star)"
@mouseleave="resetHover"
:class="{ 'star': true, 'active': star <= currentRating || star <= hoverRating }"
>
★
</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: {
rate(star) {
this.currentRating = star;
this.$emit('rated', star);
},
hover(star) {
this.hoverRating = star;
},
resetHover() {
this.hoverRating = 0;
}
}
};
</script>
<style>
.star-rating {
font-size: 24px;
cursor: pointer;
}
.star {
color: #ccc;
}
.star.active {
color: gold;
}
</style>使用第三方库实现星级评价
如果需要更复杂的功能，可以使用第三方库如vue-star-rating。安装后直接使用即可。
npm install vue-star-rating在Vue组件中使用：
<template>
<star-rating
v-model="rating"
:increment="0.5"
:star-size="30"
:show-rating="false"
/>
</template>
<script>
import StarRating from 'vue-star-rating';
export default {
components: {
StarRating
},
data() {
return {
rating: 0
};
}
};
</script>自定义样式和交互
可以通过CSS和事件处理来自定义星级评价的外观和交互行为。例如，改变星星的颜色、大小或添加动画效果。
.star-rating {
display: inline-block;
}
.star {
transition: all 0.2s;
}
.star:hover {
transform: scale(1.2);
}处理评分数据
将评分数据通过事件传递给父组件，或在组件内部处理。例如，保存评分到数据库或显示在页面上。
<template>
<star-rating @rated="handleRating" />
</template>
<script>
export default {
methods: {
handleRating(rating) {
console.log('User rated:', rating);
// 保存评分或进行其他操作
}
}
};
</script>通过以上方法，可以灵活地在Vue中实现星级评价功能，满足不同场景的需求。
