8.2 KiB

Raw Blame History

PickerGroup 选择器组

介绍

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

PickerGroup 中可以放置以下组件：

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

引入

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

import { createApp } from 'vue';
import { PickerGroup } from 'vant';

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

代码演示

选择日期时间

在 PickerGroup 的默认插槽中放置一个 DatePicker 组件和一个 TimePicker 组件，可以实现同时选择日期和时间的交互效果。

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

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

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const currentDate = ref(['2022', '06', '01']);
    const currentTime = ref(['12', '00']);

    const onConfirm = () => {
      showToast(
        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,
      );
    };

    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      currentTime,
      onConfirm,
      onCancel,
    };
  },
};

下一步按钮

部分场景下，为了保证用户能够依次选择所有的 Picker，你可以设置 PickerGroup 的 next-step-text 属性。在设置 next-step-text 属性后，如果用户未切换到最后一个标签页，那么右上角的按钮会变成「下一步」，点击后自动切换到下一个 Picker。当用户切换到最后一个标签页时，右上角的按钮会变为「确认」。

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

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const currentDate = ref(['2022', '06', '01']);
    const currentTime = ref(['12', '00']);

    const onConfirm = () => {
      showToast(
        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,
      );
    };

    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      currentTime,
      onConfirm,
      onCancel,
    };
  },
};

选择日期范围

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

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

import { computed, ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const startDate = ref(['2022', '06', '01']);
    const endDate = ref(['2023', '06', '01']);
    const endMinDate = computed(
      () =>
        new Date(
          Number(startDate.value[0]),
          Number(startDate.value[1]) - 1,
          Number(startDate.value[2]),
        ),
    );

    const onConfirm = () => {
      showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);
    };

    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      endMinDate,
      endDate,
      startDate,
      onConfirm,
      onCancel,
    };
  },
};

选择时间范围

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

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

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const startTime = ref(['12', '00']);
    const endTime = ref(['12', '00']);

    const onConfirm = () => {
      showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);
    };

    const onCancel = () => {
      showToast('cancel');
    };

    return {
      endTime,
      startTime,
      onConfirm,
      onCancel,
    };
  },
};

受控模式

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

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

<van-button type="primary" @click="setActiveTab">
  点击切换 tab，当前为 {{ activeTab }}
</van-button>
<van-picker-group
  v-model:active-tab="activeTab"
  title="预约日期"
  :tabs="['选择日期', '选择时间']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <van-date-picker
    v-model="currentDate"
    :min-date="minDate"
    :max-date="maxDate"
  />
  <van-time-picker v-model="currentTime" />
</van-picker-group>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const activeTab = ref(0);
    const currentDate = ref(['2022', '06', '01']);
    const currentTime = ref(['12', '00']);

    const setActiveTab = () => {
      activeTab.value = activeTab.value ? 0 : 1;
    };

    const onConfirm = () => {
      showToast(
        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,
      );
    };

    const onCancel = () => {
      showToast('cancel');
    };

    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      activeTab,
      currentDate,
      currentTime,
      setActiveTab,
      onConfirm,
      onCancel,
    };
  },
};

API

Props

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

Slots

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

类型定义

组件导出以下类型定义：

import type { PickerGroupProps, PickerGroupThemeVars } from 'vant';

主题定制

样式变量

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

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

8.2 KiB Raw Blame History Unescape Escape