隨著技術(shù)的發(fā)展，開發(fā)的復(fù)雜度也越來越高，傳統(tǒng)開發(fā)方式將一個系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發(fā)而動全身。
通過組件化開發(fā)，可以有效實現(xiàn)單獨開發(fā)，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發(fā)效率低，降低維護成本。?組件化對于任何一個業(yè)務(wù)場景復(fù)雜的前端應(yīng)用以及經(jīng)過多次迭代之后的產(chǎn)品來說都是必經(jīng)之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來支撐組件化的進行，例如結(jié)合業(yè)務(wù)特性的模塊拆分策略、模塊間的交互方式和構(gòu)建系統(tǒng)等等
今天給大家介紹的一款組件是：自定義商品評價頁面單選多選標簽tags組件單選多選按鈕選擇器picker組件，附帶完整代碼下載地址：https://ext.dcloud.net.cn/plugin?id=13487
效果圖如下：
文章來源：http://www.zghlxwxcb.cn/news/detail-594354.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-594354.html
cc-multipleBtn
使用方法
<!-- colors:設(shè)置顏色? remarkList：標簽數(shù)組 @click：標簽點擊 -->
<cc-multipleBtn :colors="colors" :remarkList="remarkList" @click="tagsClick"></cc-multipleBtn>
HTML代碼實現(xiàn)部分
<template>
<view class="cencal_order">
<view class="remark">
<textarea maxlength="-1" placeholder="請在此處輸入評價" placeholder-class="textarea_p"></textarea>
</view>
<!-- colors:設(shè)置顏色? remarkList：標簽數(shù)組 @click：標簽點擊 -->
<cc-multipleBtn :colors="colors" :remarkList="remarkList" @click="tagsClick"></cc-multipleBtn>
<view class="btns" :style="{background: '#fbbd08'}">
確認提交
</view>
</view>
</template>
<script>
var app = getApp();
export default {
data() {
return {
colors: '#f37b1d',
remarkList: [{
name: '商品品質(zhì)好'
}, {
name: '性價比高'
}, {
name: '態(tài)度好'
}, {
name: '價格合理'
}, {
name: '做工不錯'
}, {
name: '物流時間長'
}, {
name: '價格優(yōu)惠低'
}, {
name: '其他原因'
}],
data: ""
};
},
components: {},
props: {},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function() {},
methods: {
tagsClick(tagArr) {
console.log("arr = ", JSON.stringify(tagArr));
uni.showModal({
title: '選中的標簽',
content: '選中的標簽 = ' + JSON.stringify(tagArr)
})
}
}
};
</script>
<style lang="scss" scoped>
page {
background-color: #F5F5FA;
}
.cencal_order {
padding: 20upx 4%;
background-color: #fff;
}
.remark {
background-color: #F5F5F5;
border-radius: 10upx;
height: 28vw;
padding: 20upx;
margin-top: 20upx;
textarea {
font-size: 26upx;
color: #797979;
}
}
.textarea_p {
font-size: 24upx;
color: #797979;
}
.btns {
width: 100%;
height: 80upx;
line-height: 80upx;
font-size: 30upx;
color: #333;
text-align: center;
margin-top: 100upx;
border-radius: 8upx;
margin-bottom: 100px;
}
</style>
到了這里，關(guān)于前端Vue自定義商品評價頁面單選多選標簽tags組件單選多選按鈕選擇器picker組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
