uni-app省市区查询组件的封装

一.最终实现效果

 

 

二. 组件结构

 

三.使用 

<pickerAddress @change="changeAddress">
	<view class="address-cl">{{ addressText }}</view>
</pickerAddress>

 @change里面会有点击确定的回调，回调里面包含了参数

addreeText是显示在那一行的地址信息

四.pickerAddress.vue

<template>
	<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value" mode="multiSelector"><slot></slot></picker>
</template>

<script>
import AllAddress from './data';
import provinceCode from './province.js';
import cityCode from './city.js';
import areaCode from './area.js';
let selectVal = ['', '', ''];

export default {
	data() {
		return {
			value: [0, 0, 0],
			array: [],
			index: 0
		};
	},
	created() {
		this.initSelect();
	},
	methods: {
		// 初始化地址选项
		initSelect() {
			this.updateSourceDate() // 更新源数据
				.updateAddressDate(); // 更新结果数据
			// this.$forceUpdate(); // 触发双向绑定
		},
		// 地址控件改变控件
		columnchange(d) {
			this.updateSelectIndex(d.detail.column, d.detail.value) // 更新选择索引
				.updateSourceDate() // 更新源数据
				.updateAddressDate(); // 更新结果数据
			// this.$forceUpdate(); // 触发双向绑定
		},

		/**
		 * 更新源数据
		 * */
		updateSourceDate() {
			this.array = [];
			this.array[0] = AllAddress.map(obj => {
				return {
					name: obj.name
				};
			});
			this.array[1] = AllAddress[this.value[0]].city.map(obj => {
				return {
					name: obj.name
				};
			});
			this.array[2] = AllAddress[this.value[0]].city[this.value[1]].area.map(obj => {
				return {
					name: obj
				};
			});
			return this;
		},

		/**
		 * 更新索引
		 * */
		updateSelectIndex(column, value) {
			let arr = JSON.parse(JSON.stringify(this.value));
			arr[column] = value;
			if (column === 0) {
				arr[1] = 0;
				arr[2] = 0;
			}
			if (column === 1) {
				arr[2] = 0;
			}
			this.value = arr;
			return this;
		},

		/**
		 * 更新结果数据
		 * */
		updateAddressDate() {
			selectVal[0] = this.array[0][this.value[0]].name;
			selectVal[1] = this.array[1][this.value[1]].name;
			selectVal[2] = this.array[2][this.value[2]].name;
			return this;
		},

		/**
		 * 点击确定
		 * */
		bindPickerChange(e) {
			//将value转码返回出去
			let code = this.getAddressCode() || [];

			this.$emit('change', {
				index: this.value,
				data: selectVal,
				code: code
			});
			return this;
		},

		getAddressCode() {
			let reArr = [];

			//省
			let p_key;
			for (p_key in provinceCode) {
				if (provinceCode[p_key] == selectVal[0]) {
					reArr.push(p_key);
					break;
				}
			}
			if (reArr.length != 1) {
				return [];
			}
			let province_pre = reArr[0].substr(0, 2);

			//市
			let mainKey, c_key;
			for (mainKey in cityCode) {
				for (c_key in cityCode[mainKey]) {
					if (cityCode[mainKey][c_key] == selectVal[1]) {
						if (c_key.substr(0, 2) == province_pre) {
							reArr.push(c_key);
							break;
						}
					}
				}
			}
			if (reArr.length != 2) {
				return [];
			}
			let city_pre = reArr[1].substr(0, 4);

			//区
			let a_key;
			for (mainKey in areaCode) {
				for (a_key in areaCode[mainKey]) {
					if (areaCode[mainKey][a_key] == selectVal[2]) {
						if (a_key.substr(0, 4) == city_pre) {
							reArr.push(a_key);
							break;
						}
					}
				}
			}

			return reArr;
		}
	}
};
</script>

<style></style>

 另外几个文件放在旁边的博客文章里面，太长了.....