PickerGroup 选择器组

介绍

用于结合多个 Picker 选择器组件，在一次交互中完成多个值的选择。

PickerGroup 中可以放置以下组件：

Picker
PickerDate
PickerTime
其他基于 Picker 封装的自定义组件

基础用法

通过 active 激活标签栏。

html

<vd-picker-group
  title="选择日期时间"
  @confirm="handleConfirm"
  @cancel="handleCancel"
>
  <vd-picker-date v-model="picker.date" title="选择日期" />
  <vd-picker-time v-model="picker.time" title="选择时间" />
</vd-picker-group>

import { PickerGroupSelectData } from 'vital-design';

const picker = reactive({
  date: [],
  time: [],
});

// 确认操作
function handleConfirm(data: PickerGroupSelectData) {
  ...
}

// 取消操作
function handleCancel(data: PickerGroupSelectData) {
  ...
}

下一步按钮

为了保证用户能够依次选择所有的 Picker，你可以通过 next-step-text 定义下一步按钮操作，如果用户未切换到最后一个标签页，那么右上角的按钮会变成 「下一步」，当用户切换到最后一个标签页时，右上角的按钮会变为 「确认」。

html

<vd-picker-group
  title="选择日期时间"
  next-step-text="下一步"
  @confirm="handleConfirm"
  @cancel="handleCancel"
>
  <vd-picker-date v-model="picker.date" title="选择日期" />
  <vd-picker-time v-model="picker.time" title="选择时间" />
</vd-picker-group>

import { PickerGroupSelectData } from 'vital-design';

const picker = reactive({
  date: [],
  time: [],
});

// 确认操作
function handleConfirm(data: PickerGroupSelectData) {
  ...
}

// 取消操作
function handleCancel(data: PickerGroupSelectData) {
  ...
}

API

Props

参数	说明	类型	默认值
active	激活标签	`number`	-
title	标题	`string`	-
titles	标题列表，用于标签页展示，默认根据子选择器标题自动生成	`string`	-
title	标题	`string`	-
next-step-text	下一步按钮文字	`string`	-
confirm-button-text	确认按钮文字	`string`	-
cancel-button-text	取消按钮文字	`string`	-

代替原始 Props

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

Events

事件名	说明	回调参数
click	点击时触发	`MouseEvent`
confirm	确认时触发	`PickerGroupSelectData[]`
cancel	取消时触发	`PickerGroupSelectData[]`

Slots

名称	说明
default	选择器内容
toolbar	工具栏

PickerGroup 选择器组 ​

介绍 ​

基础用法 ​

下一步按钮 ​

API ​

Props ​

代替原始 Props ​

Events ​

Slots ​