TaroifyReact UI

    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-省string3
    title顶部栏标题ReactNode-
    confirmText确认按钮文字ReactNode确认
    cancelText取消按钮文字ReactNode取消
    loading是否显示加载状态booleanfalse
    readonly是否为只读状态，只读状态下无法切换选项booleanfalse
    siblingCount可见的选项相邻个数number3
    optionHeight选项高度，支持 px vw vh rem rpx 单位，默认 pxnumber|string44

    Events

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