PickerGroup 選択器グループ - Vant 4

🎛️ PickerGroup 選択器グループ

🎯 紹介

PickerGroup コンポーネントは複数の Picker 選択器コンポーネントを組み合わせるために使用され、1回の操作で複数の値の選択を完了します。複雑な選択を簡単かつ効率的にします！

PickerGroup には以下のコンポーネントを配置できます：

Picker
Area
DatePicker
TimePicker
その他 Picker をベースにカプセル化されたカスタムコンポーネント

📦 導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。

import { createApp } from'vue'; import { PickerGroup } from'vant'; const app = createApp(); app.use(PickerGroup);

🎯 コード例

📅 日時を選択

日付と時間を同時に選択したいですか？PickerGroup は親切な管理人のように、複数の選択器を完璧に組み合わせてくれます！🎭 デフォルトのスロットに DatePicker と TimePicker コンポーネントを配置するだけで、ワンストップの日時選択体験を実現できます。

PickerGroup はタイトルバーを統一的に管理し、インターフェースをより簡潔で美しくします。タイトルバー関連のすべての属性とイベントは PickerGroup に処理を任せ、子コンポーネントは自身の選択ロジックに集中するだけで済みます。

html

<template>
  <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>
</template>

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('選択をキャンセル');
    };
    
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      currentTime,
      onConfirm,
      onCancel,
    };
  },
};

🚀 次へボタン

ユーザーに順序立ててすべての選択を完了してもらいたい場合があります。フォームを記入するように段階的に進めるようにします。next-step-text 属性を設定すると、PickerGroup は「次へ」と「確認」の間をスマートに切り替え、ユーザーがすべての選択ステップを完了できるようガイドします。

html

<template>
  <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>
</template>

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('予約をキャンセル');
    };
    
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      currentDate,
      currentTime,
      onConfirm,
      onCancel,
    };
  },
};

📆 日付範囲を選択

時間帯を選択する必要がありますか？例えばホテルのチェックインとチェックアウトの日付など、PickerGroup は範囲選択を簡単にします！🏨 2つの DatePicker コンポーネントを配置することで、ユーザーは直感的に開始日と終了日を選択できます。

html

<template>
  <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>
</template>

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('予約をキャンセル');
    };
    
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      endMinDate,
      endDate,
      startDate,
      onConfirm,
      onCancel,
    };
  },
};

⏰ 時間範囲を選択

勤務時間、営業時間、イベントの時間帯...時間範囲選択は日常生活でいたるところにあります！2つの TimePicker コンポーネントを組み合わせることで、ユーザーは簡単に時間範囲を設定できます。

html

<template>
  <van-picker-group
    title="営業時間を設定"
    :tabs="['開始時間', '終了時間']"
    @confirm="onConfirm"
    @cancel="onCancel"
  >
    <van-time-picker v-model="startTime" />
    <van-time-picker v-model="endTime" />
  </van-picker-group>
</template>

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

export default {
  setup() {
    const startTime = ref(['09', '00']);
    const endTime = ref(['18', '00']);
    
    const onConfirm = () => {
      showToast(`営業時間：${startTime.value.join(':')} - ${endTime.value.join(':')}`);
    };
    
    const onCancel = () => {
      showToast('設定をキャンセル');
    };
    
    return {
      endTime,
      startTime,
      onConfirm,
      onCancel,
    };
  },
};

🎮 コントロールモード

タブの切り替えを完全に制御したいですか？PickerGroup は柔軟な制御モードを提供します：

フリーモード：v-model:active-tab をバインドしない場合、コンポーネントは自主的に切り替えロジックを管理
コントロールモード：v-model:active-tab をバインドすると、コードで現在表示されているタブを正確に制御できます

html

<template>
  <div>
    <van-button @click="setActiveTab" style="margin-bottom: 20px;">
      {{ activeTab === 0 ? '時間' : '日付' }}選択に切り替え
    </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>
  </div>
</template>

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('選択をキャンセル');
    };
    
    return {
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 5, 1),
      activeTab,
      currentDate,
      currentTime,
      setActiveTab,
      onConfirm,
      onCancel,
    };
  },
};

API

プロパティ

パラメータ	説明	型	デフォルト値
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	`取消`

イベント

イベント名	説明	コールバック引数
confirm	確認ボタンをクリックしたときにトリガー、選択操作を完了 ✨	-
cancel	キャンセルボタンをクリックしたときにトリガー、選択操作をキャンセル 🚫	-
change	タブを切り替えたときにトリガー、タブの変化を監視 🔄	activeTab: number \| string

スロット

名前	説明	パラメータ
toolbar	上部バー全体の内容をカスタマイズ、タイトルバーのスタイルを完全に制御 🎨	-
title	タイトルの内容をカスタマイズ、個性化されたタイトル表示 📄	-
confirm	確認ボタンの内容をカスタマイズ、独自の確認ボタンを作成 🎯	-
cancel	キャンセルボタンの内容をカスタマイズ、個性化されたキャンセルボタン 🔙	-

型定義

コンポーネントは以下の型定義をエクスポートします：

importtype { PickerGroupProps, PickerGroupThemeVars } from'vant';

テーマカスタマイズ

スタイル変数

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネントを参照してください。

名前	デフォルト値	説明
--van-picker-group-background	--van-background-2	選択器グループの背景色、快適な選択環境を作り出す 🎨

📚 関連文書

Picker 選択器 - 基本的な選択器コンポーネント、万能の選択ツール 🎛️
DatePicker 日付選択 - 日付選択コンポーネント、時間旅行の便利ツール 📅
TimePicker 時間選択 - 時間選択コンポーネント、分単位までの正確な時間制御 ⏰
Area 地域選択 - 省市区選択コンポーネント、地理位置のスマート選択 🗺️
Popup ポップアップ - ポップアップコンポーネント、選択器を収容する舞台 📱
ActionSheet アクションシート - アクションシートコンポーネント、迅速な選択の助け 📋

🎛️ PickerGroup 選択器グループ ​

🎯 紹介 ​

📦 導入 ​

🎯 コード例 ​

📅 日時を選択 ​

🚀 次へボタン ​

📆 日付範囲を選択 ​

⏰ 時間範囲を選択 ​

🎮 コントロールモード ​

API ​

プロパティ ​

イベント ​

スロット ​

型定義 ​

テーマカスタマイズ ​

スタイル変数 ​

📚 関連文書 ​

🎛️ PickerGroup 選択器グループ

🎯 紹介

📦 導入

🎯 コード例

📅 日時を選択

🚀 次へボタン

📆 日付範囲を選択

⏰ 時間範囲を選択

🎮 コントロールモード

API

プロパティ

イベント

スロット

型定義

テーマカスタマイズ

スタイル変数

📚 関連文書