PickerGroup 选择器组

介绍

用于结合多个 Picker 选择器组件，在一次交互中完成多个值的选择。PickerGroup 可以搭配 DatePicker、TimePicker 等组件使用。

引入

import { createApp } from 'vue';
import { PickerGroup } from '@szhn/dh-design-mobile';

const app = createApp();
app.use(PickerGroup);

代码演示

选择日期时间

将 DatePicker 和 TimePicker 作为 PickerGroup 的子组件，就可以实现同时选择日期和时间。

<van-picker-group title="预约日期" :tabs="['选择日期', '选择时间']">
  <van-date-picker
    v-model="currentDate"
    :min-date="new Date(2020, 0, 1)"
    :max-date="new Date(2025, 11, 31)"
  />
  <van-time-picker v-model="currentTime" />
</van-picker-group>

下一步按钮

部分场景下，为了保证用户能够依次选择所有 Picker，你可以设置 PickerGroup 的 next-step-text 属性。设置该属性后，每个 Picker 切换时会展示一个「下一步」按钮。

<van-picker-group
  title="预约日期"
  :tabs="['选择日期', '选择时间']"
  next-step-text="下一步"
>
  <van-date-picker
    v-model="currentDate"
    :min-date="new Date(2020, 0, 1)"
    :max-date="new Date(2025, 11, 31)"
  />
  <van-time-picker v-model="currentTime" />
</van-picker-group>

选择日期范围

在 PickerGroup 的默认插槽中放置两个 DatePicker 组件，可以实现选择日期范围的交互效果。

<van-picker-group title="选择日期范围" :tabs="['开始日期', '结束日期']">
  <van-date-picker v-model="startDate" />
  <van-date-picker v-model="endDate" />
</van-picker-group>

选择时间范围

在 PickerGroup 的默认插槽中放置两个 TimePicker 组件，可以实现选择时间范围的交互效果。

<van-picker-group title="选择时间范围" :tabs="['开始时间', '结束时间']">
  <van-time-picker v-model="startTime" />
  <van-time-picker v-model="endTime" />
</van-picker-group>

受控模式

PickerGroup 中 tab 的切换支持非受控模式和受控模式：

• 当未绑定 v-model:active-tab 时，PickerGroup 组件 tab 的切换完全由组件自身控制。
• 当绑定 v-model:active-tab 时，PickerGroup 支持受控模式，此时组件 tab 的切换同时支持 v-model:active-tab 的值和组件本身控制。

<van-picker-group
  v-model:active-tab="activeTab"
  title="预约日期"
  :tabs="['选择日期', '选择时间']"
>
  <van-date-picker v-model="currentDate" />
  <van-time-picker v-model="currentTime" />
</van-picker-group>

API

Props

参数	说明	类型	默认值
v-model:active-tab	设置当前选中的标签	number | string	0
tabs	设置标签页的标题	string[]	[]
title	顶部栏标题	string	''
show-toolbar	是否显示顶部栏	boolean	true
next-step-text	下一步按钮的文字	string	''
confirm-button-text	确认按钮的文字	string	确认
cancel-button-text	取消按钮的文字	string	取消

Slots

名称	说明	参数
toolbar	自定义整个顶部栏的内容	-
title	自定义标题内容	-
confirm	自定义确认按钮内容	-
cancel	自定义取消按钮内容	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-picker-group-background	--van-background-2	-