前端Vue自定义商品订单星级评分 爱心评分组件

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等

今天给大家介绍的一款组件自定义商品订单星级评分组件 星级评分 爱心评分；附源码下载地址：https://ext.dcloud.net.cn/plugin?id=13497

更多前端组件信息请关注微信公众号： 前端组件开发

效果图如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ljJ8y6c9-1689191473861)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d8e49f706194c788019f4a77ff52492~tplv-k3u1fbpfcp-zoom-1.image)]

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>