微信小程序-基于Vant Weapp UI 组件库的Area 省市区选择

embedded/2024/12/23 12:23:37/

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})},
})