Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择、多列选择和级联选择。

基础用法

通过 v-model 绑定选中的值，通过 columns 属性配置选项数据。

<vd-picker v-model="picker.value" :columns="picker.columns" title="基础用法" />

const picker = reactive({
  value: '1',
  columns: [
    { label: '测试1', value: '1' },
    { label: '测试2', value: '2' },
    { label: '测试3', value: '3' },
  ],
});

多列选项

当 columns 为二维数组结构时，将渲染多列选项数据。

<vd-picker v-model="picker.value" :columns="picker.columns" title="多列选项" />

const picker = reactive({
  show: false,
  value: '1',
  columns: [
    [
      { label: '测试1', value: '1' },
      { label: '测试2', value: '2' },
      { label: '测试3', value: '3' },
    ],
    [
      { label: '测试1', value: '1' },
      { label: '测试2', value: '2' },
      { label: '测试3', value: '3' },
    ],
    [
      { label: '测试1', value: '1' },
      { label: '测试2', value: '2' },
      { label: '测试3', value: '3' },
    ]
  ],
});

级联选项

当 columns 为子父级数组结构时，将渲染级联选项数据。

<vd-picker v-model="picker.value" :columns="picker.columns" title="级联选项" />

const picker = reactive({
  show: false,
  value: '1',
  columns: [
    {
      label: '测试1',
      value: '1',
      children: [
        { label: '测试1-1', value: '1-1' },
        { label: '测试1-2', value: '1-2' },
        { label: '测试1-3', value: '1-3' },
      ],
    },
    {
      label: '测试2',
      value: '2',
      children: [
        { label: '测试2-1', value: '2-1' },
        { label: '测试2-2', value: '2-2' },
        { label: '测试2-3', value: '2-3' },
      ],
    },
    {
      label: '测试3',
      value: '3',
      children: [
        { label: '测试3-1', value: '3-1' },
        { label: '测试3-2', value: '3-2' },
        { label: '测试3-3', value: '3-3' },
      ],
    }
  ],
});

自定义选项字段

通过 fields 属性配置选项字段，支持 label、value、children 字段。

<vd-picker
  v-model="picker.value"
  title="自定义选项字段"
  :columns="picker.columns"
  :fields="fields"
/>

import { PickerFields } from 'vital-design';

const fields: PickerFields = {
  label: 'text',
  value: 'name',
  children: 'children',
};

const picker = reactive({
  value: '1',
  columns: [
    { text: '测试1', name: '1' },
    { text: '测试2', name: '2' },
    { text: '测试3', name: '3' },
  ],
});

搭配弹出层使用

可搭配 Popover 组件使用，实现弹出层选择组。

<vd-cell title="单列选项" is-link @click="picker.show = true" />

<vd-popup v-model="picker.show" position="bottom" round>
  <vd-picker v-model="picker.value" :columns="picker.columns" title="单列选项" />
</vd-popup>

const picker = reactive({
  show: false,
  value: '1',
  columns: [
    { label: '测试1', value: '1' },
    { label: '测试2', value: '2' },
    { label: '测试3', value: '3' },
  ],
});

API

Props

参数	说明	类型	默认值
v-model	选中值	string | number | (string | number)[]	-
columns	列数据	(PickerColumn | PickerOption)[]	-
title	标题	string	-
fields	选项字段	PickerFields	-
loading	是否加载中	boolean	false
loading-type	是否加载中	LoadingType	spinner
confirm-button-text	确认按钮文字	string	-
cancel-button-text	取消按钮文字	string	-
immediate-change	是否在手指松开时立即触发 change 事件	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	改变时触发	PickerSelectedChangeData
updated	更新时触发	PickerSelectedData
confirm	确认时触发	PickerSelectedData
cancel	取消时触发	PickerSelectedData

Slots

名称	说明
toolbar	工具栏
option	选择项
loading	加载中