概述

官网建议省市区选择组件和弹出层组件配合使用，但是官网没有详细的例子，对于新手不是很友好，网上的博客也没有详细的教程，所以我把实现过程记录下来，方便以后使用

代码实现

设计思路

点击输入框会打开弹出层，在弹出层选择省市区并确认后，会把地址显示到输入框中

引入省市区数据

通过npm命令安装官方默认的省市区数据

1
npm i @vant/area-data

在页面js文件中引用，在代码的最上面加入下面代码

1
import {areaList} from '@vant/area-data';

引入组件

需要引入的三个组件分别是：输入框、弹出层、省市区选择

1
2
3
"van-field": "@vant/weapp/field/index",
"van-popup": "@vant/weapp/popup/index",
"van-area": "@vant/weapp/area/index"

页面wxml代码

1
2
3
4
5
6
<van-cell-group bindtap="showPopup">
    <van-field value="{{ area }}" placeholder="请选择省市区" label="省市区" title-width="4em" is-link="true" readonly/>
</van-cell-group>江西省景德镇市珠山区新村街道
<van-popup show="{{ show }}" bind:close="onClose" position="bottom">
    <van-area area-list="{{ areaList }}" columns-num="{{ 3 }}" title="选择省市区" value="{{value}}" bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange"/>
</van-popup>

页面js代码

页面初始数据如下，value的默认值是为了让省市区选择组件一开始就选择一个地址，110101是官方默认的省市区数据中北京市东城区的代码（省市区选择组件可以通过区地址确定省和市）

1
2
3
4
5
6
7
8
9
/**
 * 页面的初始数据
 */
data: {
	address: '',
	areaList,
	value: 110101,
	show: false
}

页面的一些事件如下，每个事件的作用看注释

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
/**
 * 打开弹出层
 */
showPopup() {
	this.setData({
		show: true
	});
},

/**
 * 关闭弹出层
 */
onClose() {
	this.setData({
		show: false
	});
},

/**
 * 确认选择省市区触发的事件: 关闭弹出层后设置value和address的值
 * @param {*} e 
 */
onConfirm(e) {
	this.onClose();
	let address = e.detail.values[0].name + e.detail.values[1].name + e.detail.values[2].name;
	let code = e.detail.values[2].code;
	this.setData({
		value: code,
		address: address
	});
},

/**
 * 点击取消后触发的事件: 关闭弹出层
 */
onCancel() {
	this.onClose();
}

效果动图