mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
24 KiB
JavaScript
2 lines
24 KiB
JavaScript
/*! For license information please see 1897.7913a2f2.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["1897"],{19719:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>PickerGroup</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>Used to combine multiple Picker components, allow users to select multiple value.</p>\n<p>The following components can be placed inside PickerGroup:</p>\n<ul>\n<li><a href="#/en-US/picker" target="_blank">Picker</a></li>\n<li><a href="#/en-US/area" target="_blank">Area</a></li>\n<li><a href="#/en-US/date-picker" target="_blank">DatePicker</a></li>\n<li><a href="#/en-US/time-picker" target="_blank">TimePicker</a></li>\n<li>Other custom components based on Picker component</li>\n</ul>\n</div><div class="van-doc-card"><h3 id="install" tabindex="-1">Install</h3>\n<p>Register component globally via <code>app.use</code>, refer to <a href="#/en-US/advanced-usage#zu-jian-zhu-ce" target="_blank">Component Registration</a> for more registration ways.</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">PickerGroup</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">PickerGroup</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="select-date-time" tabindex="-1">Select Date Time</h3>\n<p>Place a <code>DatePicker</code> component and a <code>TimePicker</code> component in the default slot of the <code>PickerGroup</code> to select both a date and a time.</p>\n<p><code>PickerGroup</code> will render a unified toolbar, so the child components will not render is\'s toolbar, and the toolbar props and events need to be set to the <code>PickerGroup</code>, such as the <code>title</code> prop, <code>confirm</code> event, <code>cancel</code> event, etc. Other props and events in child components can be used as before.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker-group</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:tabs</span>=<span class="hljs-string">"['Date', 'Time']"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"onCancel"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentDate"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-time-picker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentTime"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-picker-group</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> currentDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2022'</span>, <span class="hljs-string">'06'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">const</span> currentTime = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'12'</span>, <span class="hljs-string">'00'</span>]);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(\n <span class="hljs-string">`<span class="hljs-subst">${currentDate.value.join(<span class="hljs-string">'/'</span>)}</span> <span class="hljs-subst">${currentTime.value.join(<span class="hljs-string">':'</span>)}</span>`</span>,\n );\n };\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onCancel</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'cancel'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="next-step-button" tabindex="-1">Next Step Button</h3>\n<p>In some scenarios, in order to ensure that users can select all Pickers in turn, you can set the <code>next-step-text</code> prop of PickerGroup. After setting the <code>next-step-text</code> prop, if the user has not switched to the last tab, the button in the upper right corner will become "Next Step", and automatically switch to the next Picker after clicking. When the user switches to the last tab, the button in the upper right corner changes to "Confirm".</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker-group</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:tabs</span>=<span class="hljs-string">"['Date', 'Time']"</span>\n <span class="hljs-attr">next-step-text</span>=<span class="hljs-string">"Next Step"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"onCancel"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentDate"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-time-picker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentTime"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-picker-group</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> currentDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2022'</span>, <span class="hljs-string">'06'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">const</span> currentTime = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'12'</span>, <span class="hljs-string">'00'</span>]);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(\n <span class="hljs-string">`<span class="hljs-subst">${currentDate.value.join(<span class="hljs-string">'/'</span>)}</span> <span class="hljs-subst">${currentTime.value.join(<span class="hljs-string">':'</span>)}</span>`</span>,\n );\n };\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onCancel</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'cancel'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n currentDate,\n currentTime,\n onConfirm,\n onCancel,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="select-date-range" tabindex="-1">Select Date Range</h3>\n<p>Place two <code>DatePicker</code> components in the default slot of <code>PickerGroup</code> to select the time range.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker-group</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:tabs</span>=<span class="hljs-string">"['Start Date', 'End Date']"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"onCancel"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"startDate"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-date-picker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"endDate"</span> <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span> <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-picker-group</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> startDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2022'</span>, <span class="hljs-string">'06'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">const</span> endDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2023'</span>, <span class="hljs-string">'06'</span>, <span class="hljs-string">'01'</span>]);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">`<span class="hljs-subst">${startDate.value.join(<span class="hljs-string">'/'</span>)}</span> <span class="hljs-subst">${endDate.value.join(<span class="hljs-string">'/'</span>)}</span>`</span>);\n };\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onCancel</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'cancel'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n endDate,\n startDate,\n onConfirm,\n onCancel,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="select-time-range" tabindex="-1">Select Time Range</h3>\n<p>Place two <code>TimePicker</code> components in the default slot of <code>PickerGroup</code> to select the time range.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker-group</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:tabs</span>=<span class="hljs-string">"['Start Time', 'End Time']"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"onCancel"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-time-picker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"startTime"</span> /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-time-picker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"endTime"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-picker-group</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> startTime = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'12'</span>, <span class="hljs-string">'00'</span>]);\n <span class="hljs-keyword">const</span> endTime = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'12'</span>, <span class="hljs-string">'00'</span>]);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">`<span class="hljs-subst">${startTime.value.join(<span class="hljs-string">':'</span>)}</span> <span class="hljs-subst">${endTime.value.join(<span class="hljs-string">':'</span>)}</span>`</span>);\n };\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onCancel</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'cancel'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n endTime,\n startTime,\n onConfirm,\n onCancel,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="controlled-mode" tabindex="-1">Controlled Mode</h3>\n<p>Supports both uncontrolled and controlled modes:</p>\n<ul>\n<li>When <code>v-model:active-tab</code> is not bound, the PickerGroup component completely controls the <code>tab</code> switching.</li>\n<li>When <code>v-model:active-tab</code> is bound, PickerGroup supports controlled mode, and the <code>tab</code> switching is controlled by both the <code>v-model:active-tab</code> value and the component itself.</li>\n</ul>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"setActiveTab"</span>></span>\n toggle tab, current {{ activeTab }}\n<span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-picker-group</span>\n <span class="hljs-attr">v-model:active-tab</span>=<span class="hljs-string">"activeTab"</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:tabs</span>=<span class="hljs-string">"['Date', 'Time']"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"onCancel"</span>\n></span>\n <span class="hljs-tag"><<span class="hljs-name">van-date-picker</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentDate"</span>\n <span class="hljs-attr">:min-date</span>=<span class="hljs-string">"minDate"</span>\n <span class="hljs-attr">:max-date</span>=<span class="hljs-string">"maxDate"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-time-picker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"currentTime"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-picker-group</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { showToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> activeTab = <span class="hljs-title function_">ref</span>(<span class="hljs-number">0</span>);\n <span class="hljs-keyword">const</span> currentDate = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'2022'</span>, <span class="hljs-string">'06'</span>, <span class="hljs-string">'01'</span>]);\n <span class="hljs-keyword">const</span> currentTime = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'12'</span>, <span class="hljs-string">'00'</span>]);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">setActiveTab</span> = (<span class="hljs-params"></span>) => {\n activeTab.<span class="hljs-property">value</span> = activeTab.<span class="hljs-property">value</span> ? <span class="hljs-number">0</span> : <span class="hljs-number">1</span>;\n };\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(\n <span class="hljs-string">`<span class="hljs-subst">${currentDate.value.join(<span class="hljs-string">'/'</span>)}</span> <span class="hljs-subst">${currentTime.value.join(<span class="hljs-string">':'</span>)}</span>`</span>,\n );\n };\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onCancel</span> = (<span class="hljs-params"></span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'cancel'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2025</span>, <span class="hljs-number">5</span>, <span class="hljs-number">1</span>),\n activeTab,\n currentDate,\n currentTime,\n setActiveTab,\n onConfirm,\n onCancel,\n };\n },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>Attribute</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>v-model:active-tab <code>v4.3.2</code></td>\n<td>Set index of active tab</td>\n<td><em>number | string</em></td>\n<td><code>0</code></td>\n</tr>\n<tr>\n<td>tabs</td>\n<td>Titles of tabs</td>\n<td><em>string[]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>title</td>\n<td>Toolbar title</td>\n<td><em>string</em></td>\n<td><code>\'\'</code></td>\n</tr>\n<tr>\n<td>next-step-text <code>v4.0.8</code></td>\n<td>Text of next step button</td>\n<td><em>string</em></td>\n<td><code>\'\'</code></td>\n</tr>\n<tr>\n<td>confirm-button-text</td>\n<td>Text of confirm button</td>\n<td><em>string</em></td>\n<td><code>Confirm</code></td>\n</tr>\n<tr>\n<td>cancel-button-text</td>\n<td>Text of cancel button</td>\n<td><em>string</em></td>\n<td><code>Cancel</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>SlotProps</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>toolbar</td>\n<td>Custom toolbar content</td>\n<td>-</td>\n</tr>\n<tr>\n<td>title</td>\n<td>Custom title</td>\n<td>-</td>\n</tr>\n<tr>\n<td>confirm</td>\n<td>Custom confirm button text</td>\n<td>-</td>\n</tr>\n<tr>\n<td>cancel</td>\n<td>Custom cancel button text</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="types" tabindex="-1">Types</h3>\n<p>The component exports the following type definitions:</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">PickerGroupProps</span>, <span class="hljs-title class_">PickerGroupThemeVars</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n</div><h2 id="theming" tabindex="-1">Theming</h2>\n<div class="van-doc-card"><h3 id="css-variables" tabindex="-1">CSS Variables</h3>\n<p>The component provides the following CSS variables, which can be used to customize styles. Please refer to <a href="#/en-US/config-provider" target="_blank">ConfigProvider component</a>.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Default Value</th>\n<th>Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>--van-picker-group-background</td>\n<td><em>--van-background-2</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,l))}}}]); |