PickerGroup 选择器组

PickerGroup 中可以放置以下组件：

• Area
• TimePicker
• 其他基于 Picker 封装的自定义组件

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

PickerGroup 会代替子组件来渲染统一的标题栏，这意味着子组件不会渲染单独的标题栏，与标题栏有关的 props 和 events 需要设置到 PickerGroup 上，比如 title 属性、confirm 事件、cancel 事件等，而子组件中与标题栏无关的属性和事件可以正常使用。

  title="预约日期"
  :tabs="['选择日期', '选择时间']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <van-date-picker
    :min-date="minDate"
    :max-date="maxDate"
  />
  <van-time-picker v-model="currentTime" />
</van-picker-group>

选择日期范围

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

<van-picker-group
  title="预约日期"
  :tabs="['开始日期', '结束日期']"
  @cancel="onCancel"
>
  <van-date-picker v-model="startEnd" :min-date="minDate" :max-date="maxDate" />
</van-picker-group>

<van-picker-group
  title="预约时间"
  :tabs="['开始时间', '结束时间']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <van-time-picker v-model="startEnd" />
  <van-time-picker v-model="endDate" />
</van-picker-group>

API

Props

类型定义

组件导出以下类型定义：

import type { PickerGroupProps } from 'vant';