Area 省市區選擇，省市區選擇組件通常與 彈出層 組件配合使用。
areaList 格式
areaList 為對象結構，包含 province_list、city_list、county_list 三個 key。

每項以地區碼作為 key，省市區名字作為 value。地區碼為 6 位數字，前兩位代表省份，中間兩位代表城市，后兩位代表區縣，以 0 補足 6 位。比如北京的地區碼為 11，以 0 補足 6 位，為 110000。

Vant 官方提供了一份默認的省市區數據，可以通過 @vant/area-data 引入。

1. 省市區數據引入

npm i @vant/area-data

安裝后，使用@vant下面的路徑無法引用成功

我們新建一個用來引入文件的文件夾node_Files，放在pages下面，把@vant中的 area-data 整個進行拷貝，把dist里面的index.cjs.js文件名改為data.js，index.d.ts文件名改為data.d.ts。

引入鏈接

//省市區數據引入使用
import {areaList
} from "../../pages/node_Files/area-data/dist/data";

2. 封裝組件

address-option.wxml

<!--components/address-option.wxml-->
<van-field value="{{ fieldValue }}" readonly clearable input-align="{{inputAlign}}" label="{{label}}" placeholder="請選擇地區" bind:tap="onClick" required is-link />
<van-action-sheet show="{{ show }}"><van-area area-list="{{ areaList }}" title="地區選擇" bind:confirm="onConfirm" bind:cancel="onClose" />
</van-action-sheet>

addressOption.js

// components/addressOption/addressOption.js
//省市區數據引入使用
import {areaList
} from "../../pages/node_Files/area-data/dist/data";Component({/*** 組件的屬性列表*/properties: {label: {type: String,value: "地區"},inputAlign: {type: String,value: "left"},optionValue: {type: String,value: ""},mustFillIn: {type: String,value: false}},/*** 組件的初始數據*/data: {areaList,show:false},/*** 組件的方法列表*/methods: {onClick() {this.setData({show: true,});},onConfirm(e){console.log("確定省市區：",e)var address=""e.detail.values.forEach(element => {address=address+element.name});this.setData({address: address,show: false,})this.handleTap()console.log("省市區為：",address)},handleTap() {let value = this.data.addressconsole.log("fieldValue 地址：", value)this.triggerEvent("addressTab", value)},onClose() {this.setData({show: false,});},},observers: {optionValue: function (e) {this.setData({fieldValue: e})}},
})

address-option.json

{"component": true,"usingComponents": {"van-field": "@vant/weapp/field/index","van-action-sheet": "@vant/weapp/action-sheet/index","van-area": "@vant/weapp/area/index"}
}

3. 頁面使用省市區

3.1. 引入組件

address.json

"usingComponents": {"address-option": "/components/address-option/address-option"}

3.2. 調用組件

address.wxml

<address-option bind:addressTab="onAddress"></address-option>

3.3. 接收子組件傳過來的值

address.js

Page({/*** 頁面的初始數據*/data: {radio: '1',fieldValue: ""},onAddress(e){this.setData({fieldValue: e.detail})},
})