Picker 选择器

介绍

提供多列滚动选择功能，支持单列、多列及级联选择，适用于地址、时间、分类等场景。

引入

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

代码演示

基础用法

通过 data 属性传入选项数据，监听 onConfirm 获取选中结果。每列数据为 TnPickerColumnItem[] 数组。

点我查看代码

import { TnPicker, TnPickerColumnItem, TnPickerValueType } from "@tuniao/tn-ui";

@Entry
@ComponentV2
struct PickerBasic {
  @Local open: boolean = false;
  @Local value: TnPickerValueType = "";
  @Local data: TnPickerColumnItem[][] = [
    [
      { label: "选项一", value: "1" },
      { label: "选项二", value: "2" },
      { label: "选项三", value: "3" }
    ],
  ];

  build() {
    Column() {
      Button("打开选择器")
        .onClick(() => {
          this.open = true;
        })
      TnPicker({
        modelValue: this.value,
        open: this.open,
        data: this.data,
        onConfirm: (value: TnPickerValueType, index: number[]) => {
          this.value = value;
          this.open = false;
        },
        onClose: () => {
          this.open = false;
        },
      })
    }
  }
}

多列选择

data 属性传入多个数组即可实现多列选择。

点我查看代码

@Local multiData: TnPickerColumnItem[][] = [
  [
    { label: "星期一", value: "mon" },
    { label: "星期二", value: "tue" },
    { label: "星期三", value: "wed" },
    { label: "星期四", value: "thu" },
    { label: "星期五", value: "fri" },
    { label: "星期六", value: "sat" },
    { label: "星期日", value: "sun" }
  ],
  [
    { label: "上午", value: "am" },
    { label: "下午", value: "pm" },
    { label: "晚上", value: "evening" }
  ]
];

TnPicker({
  modelValue: this.value,
  open: this.open,
  data: this.multiData,
  onConfirm: (value: TnPickerValueType, index: number[]) => {
    this.value = value;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

级联选择

通过 cascadeData 属性传入带 children 的树形数据，实现级联联动选择。

点我查看代码

@Local cascadeData: TnPickerColumnItem[] = [
  {
    label: "中餐", value: "chinese", children: [
    {
      label: "川菜", value: "sichuan", children: [
      { label: "麻婆豆腐", value: "mapo_tofu" },
      { label: "回锅肉", value: "twice_cooked_pork" },
      { label: "水煮鱼", value: "boiled_fish" }
    ]
    },
    {
      label: "粤菜", value: "cantonese", children: [
      { label: "白切鸡", value: "white_cut_chicken" },
      { label: "烧鹅", value: "roast_goose" },
      { label: "叉烧", value: "char_siu" }
    ]
    }
  ]
  },
  {
    label: "西餐", value: "western", children: [
    {
      label: "意餐", value: "italian", children: [
      { label: "披萨", value: "pizza" },
      { label: "意面", value: "pasta" },
      { label: "烩饭", value: "risotto" }
    ]
    },
    {
      label: "法餐", value: "french", children: [
      { label: "牛排", value: "steak" },
      { label: "鹅肝", value: "foie_gras" },
      { label: "蜗牛", value: "escargot" }
    ]
    }
  ]
  },
  {
    label: "日料", value: "japanese", children: [
    {
      label: "寿司", value: "sushi", children: [
      { label: "三文鱼寿司", value: "salmon_sushi" },
      { label: "金枪鱼寿司", value: "tuna_sushi" }
    ]
    },
    {
      label: "拉面", value: "ramen", children: [
      { label: "豚骨拉面", value: "tonkotsu" },
      { label: "味噌拉面", value: "miso" }
    ]
    }
  ]
  }
];

TnPicker({
  modelValue: this.value,
  open: this.open,
  cascadeData: this.cascadeData,
  onConfirm: (value: TnPickerValueType, index: number[]) => {
    this.value = value;
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

自定义按钮文字

通过 cancelText 和 confirmText 属性自定义取消和确认按钮的文字，通过 title 属性设置标题。

点我查看代码

TnPicker({
  modelValue: this.value,
  open: this.open,
  data: this.data,
  title: "请选择水果",
  cancelText: "返回",
  confirmText: "完成",
  onConfirm: (value: TnPickerValueType, index: number[]) => {
    this.value = value;
    this.open = false;
  },
  onCancel: () => {
    this.open = false;
  },
  onClose: () => {
    this.open = false;
  },
})

API

TnPickerColumnItem 数据结构

字段	说明	类型	必填
label	选项显示文本	string	是
value	选项值	string | number	是
children	子选项（级联模式）	TnPickerColumnItem[]	否

Props

参数	说明	类型	默认值
modelValue	当前选中值	TnPickerValueType	-
open	是否打开选择器	boolean	false
data	列数据（非级联模式）	TnPickerColumnItem[][]	-
cascadeData	级联数据	TnPickerColumnItem[]	-
showCancel	是否显示取消按钮	boolean	true
cancelText	取消按钮文字	string	"取消"
showConfirm	是否显示确认按钮	boolean	true
confirmText	确认按钮文字	string	"确定"
title	标题	string	-

类型定义

type TnPickerValueType = string | number | Array<string | number>;

Events

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