隨著技術(shù)的發(fā)展，開發(fā)的復雜度也越來越高，傳統(tǒng)開發(fā)方式將一個系統(tǒng)做成了整塊應用，經(jīng)常出現(xiàn)的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發(fā)而動全身。
通過組件化開發(fā)，可以有效實現(xiàn)單獨開發(fā)，單獨維護，而且他們之間可以隨意的進行組合。大大提升開發(fā)效率低，降低維護成本。?組件化對于任何一個業(yè)務場景復雜的前端應用以及經(jīng)過多次迭代之后的產(chǎn)品來說都是必經(jīng)之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來支撐組件化的進行，例如結(jié)合業(yè)務特性的模塊拆分策略、模塊間的交互方式和構(gòu)建系統(tǒng)等等
今天給大家介紹的一款組件仿美團地址管理組件列表組件 可用于電商平臺收獲地址管理；
閱讀全文下載完整代碼請關(guān)注微信公眾號： 前端組件開發(fā)
效果圖如下:
文章來源：http://www.zghlxwxcb.cn/news/detail-594363.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-594363.html
cc-addressSet
使用方法
<!-- color：主題色 addressList:地址管理數(shù)據(jù) @chooseClick：選擇事件 @editClick：編輯事件? -->
<cc-addressSet :colors="colors" :addressList="addressList" @chooseClick="chooseClick"
@editClick="editClick"></cc-addressSet>
<!-- 設置數(shù)據(jù) -->
colors: '#fbbd08',
addressList: [{
name: '小明',
phone: '12345678915',
address: '佛山市南海區(qū)',
moreAddres: '桂城街道',
isdefult: 1,
id: 1
}, {
name: '小紅',
phone: '12345678915',
address: '廣州市海珠區(qū)',
moreAddres: '昌崗路15號',
isdefult: 0,
id: 2
}],
HTML代碼實現(xiàn)部分
<template>
<view>
<!-- color：主題色 addressList:地址管理數(shù)據(jù) @chooseClick：選擇事件 @editClick：編輯事件? -->
<cc-addressSet :colors="colors" :addressList="addressList" @chooseClick="chooseClick"
@editClick="editClick"></cc-addressSet>
<view class="save">
<view class="btn" :style="'background:' + colors" @tap="addAddress">添加收貨地址</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
colors: '#fbbd08',
addressList: [{
name: '小明',
phone: '12345678915',
address: '佛山市南海區(qū)',
moreAddres: '桂城街道',
isdefult: 1,
id: 1
}, {
name: '小紅',
phone: '12345678915',
address: '廣州市海珠區(qū)',
moreAddres: '昌崗路15號',
isdefult: 0,
id: 2
}],
};
},
props: {},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
},
methods: {
// 編輯地址
editClick(item) {
uni.showModal({
title: '點擊編輯條目',
content: '點擊編輯條目' + JSON.stringify(item)
})
},
chooseClick(item){
uni.showModal({
title: '點擊選擇條目',
content: '點擊選擇條目' + JSON.stringify(item)
})
},
// 增加地址
addAddress() {
},
}
};
</script>
<style lang="scss" scoped>
.save {
position: fixed;
bottom: 0;
width: 100%;
height: 120upx;
display: flex;
justify-content: center;
align-items: center;
}
.save view {
display: flex;
}
.save .btn {
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);
width: 70%;
height: 80upx;
border-radius: 80upx;
background-color: #f23a3a;
color: #fff;
justify-content: center;
align-items: center;
font-size: 30upx;
margin-bottom: 60px;
}
</style>
到了這里，關(guān)于前端Vue仿美團地址管理組件列表組件 可用于電商平臺收獲地址管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
