Vue仿美团地址管理组件列表组件，可用于电商平台收获地址管理

前端文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

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

今天给大家介绍的一款组件仿美团地址管理组件列表组件 可用于电商平台收获地址管理；附源码下载地址：https://ext.dcloud.net.cn/plugin?id=13499文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

效果图如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

# cc-addressSet文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

#### 使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

```使用方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<!-- color：主题色 addressList:地址管理数据 @chooseClick：选择事件 @editClick：编辑事件 -->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<cc-addressSet :colors="colors" :addressList="addressList" @chooseClick="chooseClick"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

@editClick="editClick"></cc-addressSet>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<!-- 设置数据 -->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

colors: '#fbbd08',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

addressList: [{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

name: '小明',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

phone: '12345678915',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

address: '佛山市南海区',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

moreAddres: '桂城街道',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

isdefult: 1,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

id: 1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}, {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

name: '小红',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

phone: '12345678915',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

address: '广州市海珠区',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

moreAddres: '昌岗路15号',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

isdefult: 0,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

id: 2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}],文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

```文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

#### HTML代码实现部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

```html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<template>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<view>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<!-- color：主题色 addressList:地址管理数据 @chooseClick：选择事件 @editClick：编辑事件 -->文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<cc-addressSet :colors="colors" :addressList="addressList" @chooseClick="chooseClick"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

@editClick="editClick"></cc-addressSet>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<view class="save">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<view class="btn" :style="'background:' + colors" @tap="addAddress">添加收货地址</view>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

</view>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

</view>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

</template>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

export default {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

data() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

return {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

colors: '#fbbd08',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

addressList: [{文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

name: '小明',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

phone: '12345678915',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

address: '佛山市南海区',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

moreAddres: '桂城街道',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

isdefult: 1,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

id: 1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}, {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

name: '小红',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

phone: '12345678915',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

address: '广州市海珠区',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

moreAddres: '昌岗路15号',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

isdefult: 0,文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

id: 2文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}],文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

};文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

props: {},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

/**文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

* 生命周期函数--监听页面加载文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

*/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

onLoad: function(options) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

methods: {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

// 编辑地址文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

editClick(item) {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

title: '点击编辑条目',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

content: '点击编辑条目' + JSON.stringify(item)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

chooseClick(item){文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

uni.showModal({文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

title: '点击选择条目',文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

content: '点击选择条目' + JSON.stringify(item)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

})文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

// 增加地址文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

addAddress() {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

},文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

};文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

</script>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

<style lang="scss" scoped>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

.save {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

position: fixed;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

bottom: 0;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

width: 100%;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

height: 120upx;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

display: flex;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

justify-content: center;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

align-items: center;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

.save view {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

display: flex;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

.save .btn {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.4);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

width: 70%;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

height: 80upx;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

border-radius: 80upx;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

background-color: #f23a3a;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

color: #fff;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

justify-content: center;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

align-items: center;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

font-size: 30upx;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

margin-bottom: 60px;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html

</style>文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51550.html