第一步 引入相关依赖

这个可以直接引用官网文档里面操作，由于需要用到popup组件，所以这里增加了对popup的引用

"usingComponents": {
  "van-area": "@vant/weapp/area/index"，
  "van-popup": "@vant/weapp/popup/index"
}

在需要的地方，插入组件

 <!-- 出发区域 -->
<van-field label="出发区域" value="{{pickupAreaName}}" 
	placeholder="请选择区域" bindtap="showPickupAreaSelector">
  <van-icon slot="right-icon" name="arrow"></van-icon>
</van-field>
<van-popup show="{{pickupAreaSelector.visible}}" 
bind:close="hidePickupAreaSelector" position="bottom">
  <van-area title="选择出发区域" area-list="{{pickupAreaSelector.list}}" 
    value="pickupAreaSelector.pickupAreaCode" 
    bind:cancel="hidePickupAreaSelector" 
    bind:change="changePickupAreaSelector" 
    bind:confirm="confirmPickupAreaSelector" />
</van-popup>

定义依赖的变量，需要的变量，在下图中已经圈出来了。

这里解释下几个变量的作用：

pickupAreaName:与van-field是绑定的，用于显示所选的省市区；
pickupAreaCode:保存所选区的code，再次打开选择组件的时候，可以根据这个code，对选项
进行自动选取；
pickupAreaSelector.pickupAreaName
pickupAreaSelector.pickupAreaCode
这两个变量起到暂存的作用，打开组件之后，直到组件关闭之前，组件中选项的变动会实时更新到
这两个变量。
pickupAreaSelector.list 组件的数据源，具体解释见官网说明
list包含 province_list、city_list、county_list 三个 key。
每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位
代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，
为 110000。

第二步 实现底部弹层的显示与关闭

实现底部弹层的显示与关闭，主要是处理好如下几个事件

van-field相关：

bindtap --> 显示组件

van-popup相关：

bind:close --> 鼠标点击弹层以外的区域，关闭弹层

van-area相关：

bind:cancel --> 点弹层上的“取消”文字，关闭弹层

bind:change --> 选择省市区过程中，实时将选中的值，保存于变量中

bind:confirm --> 点弹层上的“确认”文字，关闭弹层，并将暂存变量中的值，赋值给外部变量

详细实现代码如下

// 选择区域
  showPickupAreaSelector() {
    this.setData({
      'pickupAreaSelector.visible': true
    })
  },
  hidePickupAreaSelector() {
    this.setData({
      'pickupAreaSelector.visible': false
    })
  },
  changePickupAreaSelector(obj) {
    let name = obj.detail.values[0].name + '-' + obj.detail.values[1].name + '-' + obj.detail.values[2].name
    let pickupAreaName = name
    let pickupAreaCode = obj.detail.values[2].code

    this.setData({
      'pickupAreaSelector.pickupAreaName': pickupAreaName,
      'pickupAreaSelector.pickupAreaCode': pickupAreaCode
    })
  },
  confirmPickupAreaSelector() {
    let pickupAreaName = this.data.pickupAreaSelector.pickupAreaName
    let pickupAreaCode = this.data.pickupAreaSelector.pickupAreaCode

    this.hidePickupAreaSelector()
    this.setData({
      pickupAreaName: pickupAreaName,
      pickupAreaCode: pickupAreaCode
    })
  },

第三步 实现数据的数据双向绑定

这里双向绑定，主要是指：

1）打开组件选择省市区之后，选中的项，要显示在van-field里面；

2）van-field里面有之前选中的内容，再次打开后，之前选中的项，要在组件里面显示出俩，并使之处于被选中状态。

要达到这个效果，需要两个变量pickupAreaName和pickupAreaCode，pickupAreaName用于显示，比如“上海市-上海市-嘉定区”；pickupAreaCode用于保存code，比如“100101”，主要是为了方便后面的回显之前选中的值。

其实，这个组件的使用不算难，主要是注意一些细节，考虑一些操作细节，需要花费一些心思。

喜欢我的分享的话，就关注我吧。我目前是一个自由职业者，我会持续分享IT技术相关，创业相关的心路历程，希望对大家有价值，与大家一起成长。