uni——app、H5省市区选择

案例演示

步骤

封装的组件，之后引用组件。

父：

<pickerAddress @change="change">
	<input type="text" placeholder="请选择所在地区" :value="value" />
	<image :src="$common.image('/static/personal/addressNext.png')" mode="aspectFill" class="next">image>
 pickerAddress>
1
2
3
4

import pickerAddress from "@/components/citySelect/citySelect.vue"
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				// 城市选择
				value: ""
			};
		},
		methods:{
			// 城市选择
			change(data) {
				this.value = data.data.join('')
				console.log(this.value);
			}
		}	
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

组件：

citySelect文件：

<template>
	<picker @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value"
		mode="multiSelector" style="display:flex;justify-content: space-between;">
		<slot>slot>
	picker>
template>

<script>
	import AllAddress from '@/components/citySelect/data.js'
	let selectVal = ['', '', '']

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

			/**
			 * 更新源数据
			 * */
			updateSourceDate() {
				this.array = []
				this.array[0] = AllAddress.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[1] = AllAddress[this.value[0]].cityList.map(obj => {
					return {
						name: obj.name
					}
				})
				this.array[2] = AllAddress[this.value[0]].cityList[this.value[1]].areaList.map(obj => {
					return {
						name: obj.name
					}
				})
				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) {
				this.$emit('change', {
					index: this.value,
					data: selectVal,
					array: this.array
				})
				return this
			}

		}
	}
script>

<style>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

data.js

放不下了 放资源里吧