介绍：
在前端开发中，经常需要使用到星级评分组件来实现用户对商品、服务或其他事物的评价功能。本篇博客将向大家介绍如何使用基于Vue框架的星级评分组件来实现爱心评分效果。 效果图如下:
cc-starEvaluate
使用方法
<!-- stars:星级数据 @click：点击事件 -->
<cc-starEvaluate :stars="stars" @click="setStar"></cc-starEvaluate>
<!-- 设置数据 默认五星 -->
stars: [{
id: 1,
types: true,
},
{
id: 2,
types: true,
},
{
id: 3,
types: true,
},
{
id: 4,
types: true,
},
{
id: 5,
types: true,
},
],
HTML代码实现部分
<template>
<view>
<view class="evaluate">
<view class="Rate">
<p>整体评价</p>
<!-- stars:星级数据 @click：点击事件 -->
<cc-starEvaluate :stars="stars" @click="setStar"></cc-starEvaluate>
</view>
<view class="Rate">
<p>物流评价</p>
<!-- stars:星级数据 @click：点击事件 -->
<cc-starEvaluate :stars="starsTwo" @click="setStarTwo"></cc-starEvaluate>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 默认五星
stars: [{
id: 1,
types: true,
},
{
id: 2,
types: true,
},
{
id: 3,
types: true,
},
{
id: 4,
types: true,
},
{
id: 5,
types: true,
},
],
// 默认0星
starsTwo: [{
id: 1,
types: false,
},
{
id: 2,
types: false,
},
{
id: 3,
types: false,
},
{
id: 4,
types: false,
},
{
id: 5,
types: false,
},
],
};
},
onLoad(options) {
},
methods: {
// 总体评价
setStar(value) {
console.log("stars = " + value);
uni.showModal({
title:'点击评价',
content:'点击评价 = ' + value + '星'
})
},
// 物流评价
setStarTwo(value) {
console.log("stars = " + value);
uni.showModal({
title:'点击评价',
content:'点击评价 = ' + value + ' 星'
})
},
}
};
</script>
<style lang="scss" scoped>
page {
background-color: #F8F8F8;
}
.evaluate {
margin: 0 4%;
background-color: #FFFFFF;
box-shadow: 0upx 0upx 10upx #DDDDDD;
border-radius: 8upx;
position: relative;
top: 20upx;
.Rate {
padding: 0upx 30upx 30upx;
background-color: #FFFFFF;
border-bottom: 1upx solid #eee;
p {
height: 60upx;
line-height: 60upx;
font-size: 30upx;
color: #333;
}
}
}
</style>
代码分析：
首先，我们来看一下代码中的主要部分：
- 模板部分：
在 <template> 标签中，我们定义了一个包含两个评分组件的视图容器。每个评分组件使用了自定义的 <cc-starEvaluate> 组件，并通过 :stars 属性绑定了星级数据。同时，为评分组件绑定了 @click 事件，当用户点击评分时会触发相应的方法。
- JavaScript 部分：
在 <script> 标签中，我们导出了一个 Vue 组件对象。在 data 属性中，我们定义了两个数组 stars 和 starsTwo，分别表示整体评价和物流评价的星级数据。默认情况下，stars 数组的每个星级对象都被设置为 true，而 starsTwo 数组的每个星级对象都被设置为 false。
在 methods 中，我们定义了两个方法 setStar 和 setStarTwo，分别用于处理整体评价和物流评价的点击事件。这些方法会在用户点击评分时被调用，打印出所选的星级，并使用 uni.showModal 方法弹出一个模态框来显示用户的评分结果。
- 样式部分：
在 <style> 标签中，我们定义了页面的背景颜色和评分容器的样式。容器使用了边框、圆角和阴影效果，同时根据设计需要进行了适当的调整。
使用指南：
- 引入组件：在你的Vue项目中，确保已经引入了所需的组件文件，并在需要使用评分组件的页面或组件中导入该组件。
- 数据绑定：根据你的需求，可以修改
stars和starsTwo数据属性中的星级对象，调整评分的初始状态。每个星级对象有一个types属性，用于表示该星级是否被选中。 - 自定义样式：根据你的设计要求，可以在样式部分对评分容器和其他相关元素进行样式调整。
- 处理评分事件：根据你的业务逻辑，可以在
setStar和setStarTwo方法中编写评分事件的处理逻辑。当前示例中使用了uni.showModal方法来显示用户的评分结果，你可以根据需要修改或替换这部分代码。
通过以上步骤，你就可以在你的Vue项目中使用这个星级评分组件了。根据你的实际需求，你可以在不同的页面或组件中多次使用该组件，并进行相应的数据绑定和事件处理。
总结：
本篇博客介绍了如何使用基于Vue框架的星级评分组件来实现爱心评分效果。通过对代码的分析和使用指南的说明，希望能帮助你在前端开发中快速应用星级评分功能，并满足用户的评价需求。如果你有任何问题或疑惑，欢迎留言交流！
阅读全文下载完整组件代码请关注微信公众号： 前端组件开发
