Taroify

AreaPicker 省市区选择

介绍

省市区三级联动选择，通常与弹出层组件配合使用。

引入

import { AreaPicker } from "@taroify/core"

代码演示

基础用法

初始化省市区组件时，需要通过 areaList 属性传入省市区数据。

<AreaPicker areaList={areaList} />

areaList 格式

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/area-data

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} />

手动控制DOM

初始化省市区组件时，需要通过 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>
  )
}

API

Props

参数	说明	类型	默认值
defaultValue	默认选中的值	string[]	-
value	选中的值	string[]	-
areaList	省市区数据	object	-
depth	显示列数，3-省市区，2-省市，1-省	string	`3`
title	顶部栏标题	ReactNode	-
confirmText	确认按钮文字	ReactNode	`确认`
cancelText	取消按钮文字	ReactNode	`取消`
loading	是否显示加载状态	boolean	`false`
readonly	是否为只读状态，只读状态下无法切换选项	boolean	`false`
siblingCount	可见的选项相邻个数	number	`3`
optionHeight	选项高度，支持 `px` `vw` `vh` `rem` `rpx` 单位，默认 `px`	number\|string	`44`

Events

事件	说明	回调参数
onConfirm	点击完成按钮时触发	values: string[], options: PickerOptionObject[]
onCancel	点击取消按钮时触发	values: string[], options: PickerOptionObject[]
onChange	选项改变时触发	values: string[], option: PickerOptionObject, column: PickerOptionObject