RegionPicker 地区选择器

介绍

基于省市区三级联动的地区选择器，内置部分行政区划数据，支持传入自定义数据源。

引入

import { TnRegionPicker } from "@tuniao/tn-ui";

代码演示

基础用法

直接使用即可，组件内置全国省市区数据。选择完成后通过 onConfirm 获取地区名称和编码。

点我查看代码

import { TnRegionPicker } from "@tuniao/tn-ui";

@Entry
@ComponentV2
struct RegionPickerBasic {
  @Local open: boolean = false;
  @Local value: string[] = [];
  @Local displayText: string = "请选择地区";

  build() {
    Column() {
      Button(this.displayText)
        .onClick(() => {
          this.open = true;
        })
      TnRegionPicker({
        modelValue: this.value,
        open: this.open,
        onConfirm: (names: string[], codes: string[]) => {
          this.value = codes;
          this.displayText = names.join(" ");
          this.open = false;
        },
        onClose: () => {
          this.open = false;
        },
      })
    }
  }
}

自定义标题

通过 title 属性设置选择器顶部标题。

点我查看代码

TnRegionPicker({
  modelValue: this.value,
  open: this.open,
  title: "请选择配送地区",
  onConfirm: (names: string[], codes: string[]) => {
    this.value = codes;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

自定义数据

通过 customData 属性传入自定义的地区数据，替代内置数据源。

点我查看代码

import { TnRegionPicker, RegionItem } from "@tuniao/tn-ui";

@Local customData: RegionItem[] = [
  {
    name: "亚洲", code: "AS", children: [
    {
      name: "日本", code: "JP", children: [
      { name: "东京", code: "JP-TK" },
      { name: "大阪", code: "JP-OS" },
      { name: "京都", code: "JP-KT" }
    ]
    },
    {
      name: "韩国", code: "KR", children: [
      { name: "首尔", code: "KR-SE" },
      { name: "釜山", code: "KR-BS" }
    ]
    },
    {
      name: "泰国", code: "TH", children: [
      { name: "曼谷", code: "TH-BK" },
      { name: "清迈", code: "TH-CM" },
      { name: "普吉", code: "TH-PK" }
    ]
    }
  ]
  },
  {
    name: "欧洲", code: "EU", children: [
    {
      name: "法国", code: "FR", children: [
      { name: "巴黎", code: "FR-PA" },
      { name: "里昂", code: "FR-LY" },
      { name: "马赛", code: "FR-MA" }
    ]
    },
    {
      name: "德国", code: "DE", children: [
      { name: "柏林", code: "DE-BE" },
      { name: "慕尼黑", code: "DE-MU" },
      { name: "法兰克福", code: "DE-FF" }
    ]
    },
    {
      name: "英国", code: "GB", children: [
      { name: "伦敦", code: "GB-LN" },
      { name: "曼彻斯特", code: "GB-MC" }
    ]
    }
  ]
  },
  {
    name: "北美洲", code: "NA", children: [
    {
      name: "美国", code: "US", children: [
      { name: "纽约", code: "US-NY" },
      { name: "洛杉矶", code: "US-LA" },
      { name: "旧金山", code: "US-SF" }
    ]
    },
    {
      name: "加拿大", code: "CA", children: [
      { name: "多伦多", code: "CA-TO" },
      { name: "温哥华", code: "CA-VA" }
    ]
    }
  ]
  }
];

TnRegionPicker({
  modelValue: this.value,
  open: this.open,
  title: "选择海外地区",
  customData: this.customData,
  onConfirm: (names: string[], codes: string[]) => {
    this.value = codes;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

API

Props

参数	说明	类型	默认值
modelValue	当前选中的地区名称数组	string[]	[]
open	是否打开选择器	boolean	false
title	标题	string	"选择地区"
customData	自定义地区数据	RegionItem[]	[]

RegionItem 数据结构

字段	说明	类型	必填
name	地区名称	string	是
code	地区编码	string	否
children	下级地区	RegionItem[]	否

Events

事件名	说明	回调参数
onConfirm	点击确认按钮时触发	(names: string[], codes: string[]) => void
onCancel	点击取消按钮时触发	() => void
onClose	选择器关闭时触发	() => void
onChange	选项变化时触发	(names: string[], codes: string[]) => void