/*! For license information please see 2357.a1ebe2f1.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["2357"],{96188:function(s,a,n){"use strict";n.r(a);var l=n("80681");let t=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,l.wg)(),(0,l.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

PickerGroup \u9009\u62E9\u5668\u7EC4

\n

\u4ECB\u7ECD

\n

\u7528\u4E8E\u7ED3\u5408\u591A\u4E2A Picker \u9009\u62E9\u5668\u7EC4\u4EF6\uFF0C\u5728\u4E00\u6B21\u4EA4\u4E92\u4E2D\u5B8C\u6210\u591A\u4E2A\u503C\u7684\u9009\u62E9\u3002

\n

PickerGroup \u4E2D\u53EF\u4EE5\u653E\u7F6E\u4EE5\u4E0B\u7EC4\u4EF6\uFF1A

\n\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport { PickerGroup } from 'vant';\n\nconst app = createApp();\napp.use(PickerGroup);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u9009\u62E9\u65E5\u671F\u65F6\u95F4

\n

\u5728 PickerGroup \u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E00\u4E2A DatePicker \u7EC4\u4EF6\u548C\u4E00\u4E2A TimePicker \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u540C\u65F6\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4\u7684\u4EA4\u4E92\u6548\u679C\u3002

\n

PickerGroup \u4F1A\u4EE3\u66FF\u5B50\u7EC4\u4EF6\u6765\u6E32\u67D3\u7EDF\u4E00\u7684\u6807\u9898\u680F\uFF0C\u8FD9\u610F\u5473\u7740\u5B50\u7EC4\u4EF6\u4E0D\u4F1A\u6E32\u67D3\u5355\u72EC\u7684\u6807\u9898\u680F\uFF0C\u4E0E\u6807\u9898\u680F\u6709\u5173\u7684 props \u548C events \u9700\u8981\u8BBE\u7F6E\u5230 PickerGroup \u4E0A\uFF0C\u6BD4\u5982 title \u5C5E\u6027\u3001confirm \u4E8B\u4EF6\u3001cancel \u4E8B\u4EF6\u7B49\uFF0C\u800C\u5B50\u7EC4\u4EF6\u4E2D\u4E0E\u6807\u9898\u680F\u65E0\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u53EF\u4EE5\u6B63\u5E38\u4F7F\u7528\u3002

\n
<van-picker-group\n  title="\u9884\u7EA6\u65E5\u671F"\n  :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n  @confirm="onConfirm"\n  @cancel="onCancel"\n>\n  <van-date-picker\n    v-model="currentDate"\n    :min-date="minDate"\n    :max-date="maxDate"\n  />\n  <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const currentDate = ref(['2022', '06', '01']);\n    const currentTime = ref(['12', '00']);\n\n    const onConfirm = () => {\n      showToast(\n        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n      );\n    };\n\n    const onCancel = () => {\n      showToast('cancel');\n    };\n\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 5, 1),\n      currentDate,\n      currentTime,\n      onConfirm,\n      onCancel,\n    };\n  },\n};\n
\n

\u4E0B\u4E00\u6B65\u6309\u94AE

\n

\u90E8\u5206\u573A\u666F\u4E0B\uFF0C\u4E3A\u4E86\u4FDD\u8BC1\u7528\u6237\u80FD\u591F\u4F9D\u6B21\u9009\u62E9\u6240\u6709\u7684 Picker\uFF0C\u4F60\u53EF\u4EE5\u8BBE\u7F6E PickerGroup \u7684 next-step-text \u5C5E\u6027\u3002\u5728\u8BBE\u7F6E next-step-text \u5C5E\u6027\u540E\uFF0C\u5982\u679C\u7528\u6237\u672A\u5207\u6362\u5230\u6700\u540E\u4E00\u4E2A\u6807\u7B7E\u9875\uFF0C\u90A3\u4E48\u53F3\u4E0A\u89D2\u7684\u6309\u94AE\u4F1A\u53D8\u6210\u300C\u4E0B\u4E00\u6B65\u300D\uFF0C\u70B9\u51FB\u540E\u81EA\u52A8\u5207\u6362\u5230\u4E0B\u4E00\u4E2A Picker\u3002\u5F53\u7528\u6237\u5207\u6362\u5230\u6700\u540E\u4E00\u4E2A\u6807\u7B7E\u9875\u65F6\uFF0C\u53F3\u4E0A\u89D2\u7684\u6309\u94AE\u4F1A\u53D8\u4E3A\u300C\u786E\u8BA4\u300D\u3002

\n
<van-picker-group\n  title="\u9884\u7EA6\u65E5\u671F"\n  :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n  next-step-text="\u4E0B\u4E00\u6B65"\n  @confirm="onConfirm"\n  @cancel="onCancel"\n>\n  <van-date-picker\n    v-model="currentDate"\n    :min-date="minDate"\n    :max-date="maxDate"\n  />\n  <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const currentDate = ref(['2022', '06', '01']);\n    const currentTime = ref(['12', '00']);\n\n    const onConfirm = () => {\n      showToast(\n        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n      );\n    };\n\n    const onCancel = () => {\n      showToast('cancel');\n    };\n\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 5, 1),\n      currentDate,\n      currentTime,\n      onConfirm,\n      onCancel,\n    };\n  },\n};\n
\n

\u9009\u62E9\u65E5\u671F\u8303\u56F4

\n

\u5728 PickerGroup \u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E24\u4E2A DatePicker \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u9009\u62E9\u65E5\u671F\u8303\u56F4\u7684\u4EA4\u4E92\u6548\u679C\u3002

\n
<van-picker-group\n  title="\u9884\u7EA6\u65E5\u671F"\n  :tabs="['\u5F00\u59CB\u65E5\u671F', '\u7ED3\u675F\u65E5\u671F']"\n  @confirm="onConfirm"\n  @cancel="onCancel"\n>\n  <van-date-picker\n    v-model="startDate"\n    :min-date="minDate"\n    :max-date="maxDate"\n  />\n  <van-date-picker v-model="endDate" :min-date="minDate" :max-date="maxDate" />\n</van-picker-group>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const startDate = ref(['2022', '06', '01']);\n    const endDate = ref(['2023', '06', '01']);\n\n    const onConfirm = () => {\n      showToast(`${startDate.value.join('/')} ${endDate.value.join('/')}`);\n    };\n\n    const onCancel = () => {\n      showToast('cancel');\n    };\n\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 5, 1),\n      endDate,\n      startDate,\n      onConfirm,\n      onCancel,\n    };\n  },\n};\n
\n

\u9009\u62E9\u65F6\u95F4\u8303\u56F4

\n

\u5728 PickerGroup \u7684\u9ED8\u8BA4\u63D2\u69FD\u4E2D\u653E\u7F6E\u4E24\u4E2A TimePicker \u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u5B9E\u73B0\u9009\u62E9\u65F6\u95F4\u8303\u56F4\u7684\u4EA4\u4E92\u6548\u679C\u3002

\n
<van-picker-group\n  title="\u9884\u7EA6\u65F6\u95F4"\n  :tabs="['\u5F00\u59CB\u65F6\u95F4', '\u7ED3\u675F\u65F6\u95F4']"\n  @confirm="onConfirm"\n  @cancel="onCancel"\n>\n  <van-time-picker v-model="startTime" />\n  <van-time-picker v-model="endTime" />\n</van-picker-group>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const startTime = ref(['12', '00']);\n    const endTime = ref(['12', '00']);\n\n    const onConfirm = () => {\n      showToast(`${startTime.value.join(':')} ${endTime.value.join(':')}`);\n    };\n\n    const onCancel = () => {\n      showToast('cancel');\n    };\n\n    return {\n      endTime,\n      startTime,\n      onConfirm,\n      onCancel,\n    };\n  },\n};\n
\n

\u53D7\u63A7\u6A21\u5F0F

\n

PickerGroup \u4E2D tab \u7684\u5207\u6362\u652F\u6301\u975E\u53D7\u63A7\u6A21\u5F0F\u548C\u53D7\u63A7\u6A21\u5F0F\uFF1A

\n\n
<van-button type="primary" @click="setActiveTab">\n  \u70B9\u51FB\u5207\u6362 tab\uFF0C\u5F53\u524D\u4E3A {{ activeTab }}\n</van-button>\n<van-picker-group\n  v-model:active-tab="activeTab"\n  title="\u9884\u7EA6\u65E5\u671F"\n  :tabs="['\u9009\u62E9\u65E5\u671F', '\u9009\u62E9\u65F6\u95F4']"\n  @confirm="onConfirm"\n  @cancel="onCancel"\n>\n  <van-date-picker\n    v-model="currentDate"\n    :min-date="minDate"\n    :max-date="maxDate"\n  />\n  <van-time-picker v-model="currentTime" />\n</van-picker-group>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const activeTab = ref(0);\n    const currentDate = ref(['2022', '06', '01']);\n    const currentTime = ref(['12', '00']);\n\n    const setActiveTab = () => {\n      activeTab.value = activeTab.value ? 0 : 1;\n    };\n\n    const onConfirm = () => {\n      showToast(\n        `${currentDate.value.join('/')} ${currentTime.value.join(':')}`,\n      );\n    };\n\n    const onCancel = () => {\n      showToast('cancel');\n    };\n\n    return {\n      minDate: new Date(2020, 0, 1),\n      maxDate: new Date(2025, 5, 1),\n      activeTab,\n      currentDate,\n      currentTime,\n      setActiveTab,\n      onConfirm,\n      onCancel,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model:active-tab v4.3.2\u8BBE\u7F6E\u5F53\u524D\u9009\u4E2D\u7684\u6807\u7B7Enumber | string0
tabs\u8BBE\u7F6E\u6807\u7B7E\u9875\u7684\u6807\u9898string[][]
title\u9876\u90E8\u680F\u6807\u9898string\'\'
next-step-text v4.0.8\u4E0B\u4E00\u6B65\u6309\u94AE\u7684\u6587\u5B57string\'\'
confirm-button-text\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57string\u786E\u8BA4
cancel-button-text\u53D6\u6D88\u6309\u94AE\u7684\u6587\u5B57string\u53D6\u6D88
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E\u53C2\u6570
toolbar\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9-
title\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9-
confirm\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9-
cancel\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9-
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

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

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-picker-group-background--van-background-2-
\n
'},null,8,t))}}}]);