省市区三级联动选择,通常与弹出层组件配合使用。
areaList 为对象结构,包含 province_list
、city_list
、county_list
三个 key。
每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。比如北京的地区码为 11
,以 0 补足 6 位,为 110000
。
示例数据如下:
const areaList = {
province_list: {
110000: "北京市",
120000: "天津市",
},
city_list: {
110100: "北京市",
120100: "天津市",
},
county_list: {
110101: "东城区",
110102: "西城区",
// ....
},
}
Vant 官方提供了一份默认的省市区数据,可以通过 @vant/area-data 引入:
# 通过 npm
npm i @vant/area-data
# 通过 yarn
yarn add @vant/area-data
# 通过 pnpm
pnpm add @vant/area-data
import { areaList } from "@vant/area-data"
通过 defaultValue
设置默认值
通过 value
onChange
控制选中
<AreaPicker areaList={areaList} defaultValue={["330000", "330300", "330305"]} />
可以通过 depth
属性配置省市区显示的列数,默认情况下会显示省市区,当你设置为 2
,则只会显 示省市选择。
<AreaPicker depth={2} areaList={areaList} />
初始化省市区组件时,需要通过 AreaPicker.Columns
子组件传入省市区数据。
import { AreaPicker } from "@taroify/core"
import { areaList } from "@vant/area-data"
function BasicAreaPicker() {
return (
<AreaPicker>
<AreaPicker.Toolbar>
<AreaPicker.Button>取消</AreaPicker.Button>
<AreaPicker.Title>标题</AreaPicker.Title>
<AreaPicker.Button>确认</AreaPicker.Button>
</AreaPicker.Toolbar>
<AreaPicker.Columns children={areaList} />
</AreaPicker>
)
}