Vant4 PickerGroup 選擇器組

介紹

用于結(jié)合多個(gè) Picker 選擇器組件，在一次交互中完成多個(gè)值的選擇。

PickerGroup 中可以放置以下組件：

• Picker
• Area
• DatePicker
• TimePicker
• 其他基于 Picker 封裝的自定義組件

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

代碼演示

選擇日期時(shí)間

在 ?PickerGroup? 的默認(rèn)插槽中放置一個(gè) ?DatePicker? 組件和一個(gè) ?TimePicker? 組件，可以實(shí)現(xiàn)同時(shí)選擇日期和時(shí)間的交互效果。

?PickerGroup? 會(huì)代替子組件來(lái)渲染統(tǒng)一的標(biāo)題欄，這意味著子組件不會(huì)渲染單獨(dú)的標(biāo)題欄，與標(biāo)題欄有關(guān)的 props 和 events 需要設(shè)置到 ?PickerGroup? 上，比如 ?title? 屬性、?confirm? 事件、?cancel? 事件等，而子組件中與標(biāo)題欄無(wú)關(guān)的屬性和事件可以正常使用。

<van-picker-group
  title="預(yù)約日期"
  :tabs="['選擇日期', '選擇時(shí)間']"
  @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,
    };
  },
};

選擇日期范圍

在 ?PickerGroup? 的默認(rèn)插槽中放置兩個(gè) ?DatePicker? 組件，可以實(shí)現(xiàn)選擇日期范圍的交互效果。

<van-picker-group
  title="預(yù)約日期"
  :tabs="['開(kāi)始日期', '結(jié)束日期']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <van-date-picker v-model="startEnd" :min-date="minDate" :max-date="maxDate" />
  <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />
</van-picker-group>

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

export default {
  setup() {
    const startDate = ref(['2022', '06', '01']);
    const endDate = ref(['2023', '06', '01']);

    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),
      endDate,
      startDate,
    };
  },
};

選擇時(shí)間范圍

在 ?PickerGroup? 的默認(rèn)插槽中放置兩個(gè) ?TimePicker? 組件，可以實(shí)現(xiàn)選擇時(shí)間范圍的交互效果。

<van-picker-group
  title="預(yù)約時(shí)間"
  :tabs="['開(kāi)始時(shí)間', '結(jié)束時(shí)間']"
  @confirm="onConfirm"
  @cancel="onCancel"
>
  <van-time-picker v-model="startEnd" />
  <van-time-picker v-model="endDate" />
</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,
    };
  },
};

API

Props

Slots

類(lèi)型定義

組件導(dǎo)出以下類(lèi)型定義：

import type { PickerGroupProps } from 'vant';