概述

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

代码实现

设计思路

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

引入省市区数据

通过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();
}

效果动图