mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
32 KiB
JavaScript
2 lines
32 KiB
JavaScript
/*! For license information please see 6517.ccd9b797.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["6517"],{51562: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>Picker</h1>\n<div class="van-doc-card"><h3 id="intro" tabindex="-1">Intro</h3>\n<p>The picker component is usually used with <a href="#/en-US/popup" target="_blank">Popup</a> Component.</p>\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_">Picker</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_">Picker</span>);\n</code></pre>\n</div><h2 id="usage" tabindex="-1">Usage</h2>\n<div class="van-doc-card"><h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</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 class="hljs-attr">change</span>=<span class="hljs-string">"onChange"</span>\n/></span>\n</code></pre>\n<pre><code class="language-js"><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> columns = [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Delaware'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Delaware'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Florida'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Florida'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Wenzhou'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Wenzhou'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Indiana'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Indiana'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Maine'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Maine'</span> },\n ];\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params">{ selectedValues }</span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">`Value: <span class="hljs-subst">${selectedValues.join(<span class="hljs-string">','</span>)}</span>`</span>);\n };\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onChange</span> = (<span class="hljs-params">{ selectedValues }</span>) => {\n <span class="hljs-title function_">showToast</span>(<span class="hljs-string">`Value: <span class="hljs-subst">${selectedValues.join(<span class="hljs-string">','</span>)}</span>`</span>);\n };\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onCancel</span> = (<span class="hljs-params"></span>) => <span class="hljs-title function_">showToast</span>(<span class="hljs-string">'Cancel'</span>);\n\n <span class="hljs-keyword">return</span> {\n columns,\n onChange,\n onCancel,\n onConfirm,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="with-popup" tabindex="-1">With Popup</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"fieldValue"</span>\n <span class="hljs-attr">is-link</span>\n <span class="hljs-attr">readonly</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"City"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Choose City"</span>\n @<span class="hljs-attr">click</span>=<span class="hljs-string">"showPicker = true"</span>\n/></span>\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"showPicker"</span> <span class="hljs-attr">round</span> <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"showPicker = false"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-popup</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\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> columns = [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Delaware'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Delaware'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Florida'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Florida'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Wenzhou'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Wenzhou'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Indiana'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Indiana'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Maine'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Maine'</span> },\n ];\n <span class="hljs-keyword">const</span> fieldValue = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> showPicker = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params">{ selectedOptions }</span>) => {\n showPicker.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n fieldValue.<span class="hljs-property">value</span> = selectedOptions[<span class="hljs-number">0</span>].<span class="hljs-property">text</span>;\n };\n\n <span class="hljs-keyword">return</span> {\n columns,\n onConfirm,\n fieldValue,\n showPicker,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="v-model" tabindex="-1">v-model</h3>\n<p>Using <code>v-model</code> to bind selected values.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selectedValues"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><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> columns = [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Delaware'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Delaware'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Florida'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Florida'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Wenzhou'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Wenzhou'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Indiana'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Indiana'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Maine'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Maine'</span> },\n ];\n <span class="hljs-keyword">const</span> selectedValues = <span class="hljs-title function_">ref</span>([<span class="hljs-string">'Wenzhou'</span>]);\n\n <span class="hljs-keyword">return</span> {\n columns,\n selectedValues,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="multiple-columns" tabindex="-1">Multiple Columns</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><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> columns = [\n [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Monday'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Monday'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Tuesday'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Tuesday'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Wednesday'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Wednesday'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Thursday'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Thursday'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Friday'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Friday'</span> },\n ],\n [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Morning'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Morning'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Afternoon'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Afternoon'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Evening'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Evening'</span> },\n ],\n ];\n\n <span class="hljs-keyword">return</span> { columns };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="cascade" tabindex="-1">Cascade</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><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> columns = [\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'Zhejiang'</span>,\n <span class="hljs-attr">value</span>: <span class="hljs-string">'Zhejiang'</span>,\n <span class="hljs-attr">children</span>: [\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'Hangzhou'</span>,\n <span class="hljs-attr">value</span>: <span class="hljs-string">'Hangzhou'</span>,\n <span class="hljs-attr">children</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Xihu'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Xihu'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Yuhang'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Yuhang'</span> },\n ],\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'Wenzhou'</span>,\n <span class="hljs-attr">value</span>: <span class="hljs-string">'Wenzhou'</span>,\n <span class="hljs-attr">children</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Lucheng'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Lucheng'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Ouhai'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Ouhai'</span> },\n ],\n },\n ],\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'Fujian'</span>,\n <span class="hljs-attr">value</span>: <span class="hljs-string">'Fujian'</span>,\n <span class="hljs-attr">children</span>: [\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'Fuzhou'</span>,\n <span class="hljs-attr">value</span>: <span class="hljs-string">'Fuzhou'</span>,\n <span class="hljs-attr">children</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Gulou'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Gulou'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Taijiang'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Taijiang'</span> },\n ],\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'Xiamen'</span>,\n <span class="hljs-attr">value</span>: <span class="hljs-string">'Xiamen'</span>,\n <span class="hljs-attr">children</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Siming'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Siming'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Haicang'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Haicang'</span> },\n ],\n },\n ],\n },\n ];\n\n <span class="hljs-keyword">return</span> { columns };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="disable-option" tabindex="-1">Disable option</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><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> columns = [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Delaware'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Delaware'</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Florida'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Florida'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'Wenzhou'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Wenzhou'</span> },\n ];\n <span class="hljs-keyword">return</span> { columns };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="loading" tabindex="-1">Loading</h3>\n<p>When Picker columns data is acquired asynchronously, use <code>loading</code> prop to show loading prompt.</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"Title"</span> <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span> <span class="hljs-attr">:loading</span>=<span class="hljs-string">"loading"</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\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> columns = <span class="hljs-title function_">ref</span>([]);\n <span class="hljs-keyword">const</span> loading = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">true</span>);\n\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n columns.<span class="hljs-property">value</span> = [{ <span class="hljs-attr">text</span>: <span class="hljs-string">'Option'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'option'</span> }];\n loading.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n }, <span class="hljs-number">1000</span>);\n\n <span class="hljs-keyword">return</span> { columns, loading };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="custom-columns-field" tabindex="-1">Custom Columns Field</h3>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">:title</span>=<span class="hljs-string">"Title"</span>\n <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span>\n <span class="hljs-attr">:columns-field-names</span>=<span class="hljs-string">"customFieldName"</span>\n/></span>\n</code></pre>\n<pre><code class="language-js"><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> columns = [\n {\n <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Zhejiang'</span>,\n <span class="hljs-attr">cities</span>: [\n {\n <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Hangzhou'</span>,\n <span class="hljs-attr">cities</span>: [{ <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Xihu'</span> }, { <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Yuhang'</span> }],\n },\n {\n <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Wenzhou'</span>,\n <span class="hljs-attr">cities</span>: [{ <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Lucheng'</span> }, { <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Ouhai'</span> }],\n },\n ],\n },\n {\n <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Fujian'</span>,\n <span class="hljs-attr">cities</span>: [\n {\n <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Fuzhou'</span>,\n <span class="hljs-attr">cities</span>: [{ <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Gulou'</span> }, { <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Taijiang'</span> }],\n },\n {\n <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Xiamen'</span>,\n <span class="hljs-attr">cities</span>: [{ <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Siming'</span> }, { <span class="hljs-attr">cityName</span>: <span class="hljs-string">'Haicang'</span> }],\n },\n ],\n },\n ];\n\n <span class="hljs-keyword">const</span> customFieldName = {\n <span class="hljs-attr">text</span>: <span class="hljs-string">'cityName'</span>,\n <span class="hljs-attr">value</span>: <span class="hljs-string">'cityName'</span>,\n <span class="hljs-attr">children</span>: <span class="hljs-string">'cities'</span>,\n };\n\n <span class="hljs-keyword">return</span> {\n columns,\n customFieldName,\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</td>\n<td>values of chosen option</td>\n<td><em>number[] | string[]</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>columns</td>\n<td>Columns data</td>\n<td><em>PickerOption[] | PickerOption[][]</em></td>\n<td><code>[]</code></td>\n</tr>\n<tr>\n<td>columns-field-names</td>\n<td>custom columns field</td>\n<td><em>object</em></td>\n<td><code>{ text: \'text\', value: \'value\', children: \'children\' }</code></td>\n</tr>\n<tr>\n<td>title</td>\n<td>Toolbar title</td>\n<td><em>string</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>confirm-button-text</td>\n<td>Text of confirm button, setting it as an empty string can hide the 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, setting it as an empty string can hide the button</td>\n<td><em>string</em></td>\n<td><code>Cancel</code></td>\n</tr>\n<tr>\n<td>toolbar-position</td>\n<td>Toolbar position, cat be set to <code>bottom</code></td>\n<td><em>string</em></td>\n<td><code>top</code></td>\n</tr>\n<tr>\n<td>loading</td>\n<td>Whether to show loading prompt</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>readonly</td>\n<td>Whether to be readonly</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>show-toolbar</td>\n<td>Whether to show toolbar</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>allow-html</td>\n<td>Whether to allow HTML in option text</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>option-height</td>\n<td>Option height, supports <code>px</code> <code>vw</code> <code>vh</code> <code>rem</code> unit, default <code>px</code></td>\n<td><em>number | string</em></td>\n<td><code>44</code></td>\n</tr>\n<tr>\n<td>visible-option-num</td>\n<td>Count of visible columns</td>\n<td><em>number | string</em></td>\n<td><code>6</code></td>\n</tr>\n<tr>\n<td>swipe-duration</td>\n<td>Duration of the momentum animation, unit <code>ms</code></td>\n<td><em>number | string</em></td>\n<td><code>1000</code></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>Event</th>\n<th>Description</th>\n<th>Arguments</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>confirm</td>\n<td>Emitted when the confirm button is clicked</td>\n<td><em>{ selectedValues, selectedOptions, selectedIndexes }</em></td>\n</tr>\n<tr>\n<td>cancel</td>\n<td>Emitted when the cancel button is clicked</td>\n<td><em>{ selectedValues, selectedOptions, selectedIndexes }</em></td>\n</tr>\n<tr>\n<td>change</td>\n<td>Emitted when current selected option is changed</td>\n<td><em>{ selectedValues, selectedOptions,selectedIndexes, columnIndex }</em></td>\n</tr>\n<tr>\n<td>click-option</td>\n<td>Emitted when an option is clicked</td>\n<td><em>{ currentOption, selectedValues, selectedOptions, selectedIndexes, columnIndex }</em></td>\n</tr>\n<tr>\n<td>scroll-into <code>v4.2.1</code></td>\n<td>Emitted when an option is scrolled into the middle selection area by clicking or dragging</td>\n<td><em>{ currentOption, columnIndex }</em></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<tr>\n<td>option</td>\n<td>Custom option content</td>\n<td><em>option: PickerOption, index: number</em></td>\n</tr>\n<tr>\n<td>columns-top</td>\n<td>Custom content above columns</td>\n<td>-</td>\n</tr>\n<tr>\n<td>columns-bottom</td>\n<td>Custom content below columns</td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="data-structure-of-pickeroption" tabindex="-1">Data Structure of PickerOption</h3>\n<table>\n<thead>\n<tr>\n<th>Key</th>\n<th>Description</th>\n<th>Type</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>text</td>\n<td>Text</td>\n<td><em>string | number</em></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Value of option</td>\n<td><em>string | number</em></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable option</td>\n<td><em>boolean</em></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Cascade children options</td>\n<td><em>PickerOption[]</em></td>\n</tr>\n<tr>\n<td>className</td>\n<td>ClassName for this option</td>\n<td><em>string | Array | object</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="methods" tabindex="-1">Methods</h3>\n<p>Use <a href="https://vuejs.org/guide/essentials/template-refs.html" target="_blank">ref</a> to get Picker instance and call instance methods.</p>\n<table>\n<thead>\n<tr>\n<th>Name</th>\n<th>Description</th>\n<th>Attribute</th>\n<th>Return value</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>confirm</td>\n<td>Stop scrolling and emit confirm event</td>\n<td>-</td>\n<td>-</td>\n</tr>\n<tr>\n<td>getSelectedOptions</td>\n<td>Get current selected options</td>\n<td>-</td>\n<td><em>(PickerOption | undefined)[]</em></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> {\n <span class="hljs-title class_">PickerProps</span>,\n <span class="hljs-title class_">PickerColumn</span>,\n <span class="hljs-title class_">PickerOption</span>,\n <span class="hljs-title class_">PickerInstance</span>,\n <span class="hljs-title class_">PickerFieldNames</span>,\n <span class="hljs-title class_">PickerToolbarPosition</span>,\n <span class="hljs-title class_">PickerCancelEventParams</span>,\n <span class="hljs-title class_">PickerChangeEventParams</span>,\n <span class="hljs-title class_">PickerConfirmEventParams</span>,\n} <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n<p><code>PickerInstance</code> is the type of component instance:</p>\n<pre><code class="language-ts"><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> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">PickerInstance</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> pickerRef = ref<<span class="hljs-title class_">PickerInstance</span>>();\n\npickerRef.<span class="hljs-property">value</span>?.<span class="hljs-title function_">confirm</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-background</td>\n<td><em>var(--van-background-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-toolbar-height</td>\n<td><em>44px</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-title-font-size</td>\n<td><em>var(--van-font-size-lg)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-title-line-height</td>\n<td><em>var(--van-line-height-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-action-padding</td>\n<td><em>0 var(--van-padding-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-action-font-size</td>\n<td><em>var(--van-font-size-md)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-confirm-action-color</td>\n<td><em>var(--van-primary-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-cancel-action-color</td>\n<td><em>var(--van-text-color-2)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-option-padding</td>\n<td><em>0 var(--van-padding-base)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-option-font-size</td>\n<td><em>var(--van-font-size-lg)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-option-text-color</td>\n<td><em>var(--van-text-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-option-disabled-opacity</td>\n<td><em>0.3</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-mask-color</td>\n<td><em>linear-gradient</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-loading-icon-color</td>\n<td><em>var(--van-primary-color)</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>--van-picker-loading-mask-color</td>\n<td><em>rgba(255, 255, 255, 0.9)</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div>'},null,8,l))}}}]); |