前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版

原创

已于 2024-03-17 07:39:42 修改 · 置顶 · 7.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #前端框架 #ecmascript #html5 #uni-app

于 2023-06-29 09:12:43 首次发布

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文给大家介绍的一款组件是：前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版，

效果图如下:

format,png

代码实现如下：

# cc-selectDity

#### 使用方法

```使用方法

<cc-selectDity :show="show" @sureSelectArea="onsetCity" @hideShow="onhideShow"></cc-selectDity>

main.js文件设置全局函数

Vue.mixin({

methods: {

setData: function(obj, callback) {

let that = this;

const handleData = (tepData, tepKey, afterKey) => {

tepKey = tepKey.split('.');

tepKey.forEach(item => {

if (tepData[item] === null || tepData[item] === undefined) {

let reg = /^[0-9]+$/;

tepData[item] = reg.test(afterKey) ? [] : {};

tepData = tepData[item];

} else {

tepData = tepData[item];

}

});

return tepData;

};

const isFn = function(value) {

return typeof value == 'function' || false;

};

Object.keys(obj).forEach(function(key) {

let val = obj[key];

key = key.replace(/\]/g, '').replace(/\[/g, '.');

let front, after;

let index_after = key.lastIndexOf('.');

if (index_after != -1) {