admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity
wot-design-uni/component/picker.html

138 lines
159 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picker 选择器 | Wot UI</title>
<meta name="description" content="一个参照wot-design打造的uni-app组件库">
<meta name="generator" content="VitePress v1.6.3">
<link rel="preload stylesheet" href="/assets/style.DE99STDd.css" as="style">
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
<script type="module" src="/assets/app.Dbjtrbcu.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/theme.BptUtxMC.js">
<link rel="modulepreload" href="/assets/chunks/framework.C7RrxATG.js">
<link rel="modulepreload" href="/assets/component_picker.md.DS6cN2sU.lean.js">
<link rel="icon" href="/favicon.ico">
<script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c77588a5308ea5813c1d46bdd849338b";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-0265fbf3><!--[--><!----><!--]--><!--[--><span tabindex="-1" data-v-820c3f27></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-820c3f27>Skip to content</a><!--]--><!----><header class="VPNav" data-v-0265fbf3 data-v-17d76767><div class="VPNavBar has-sidebar top" data-v-17d76767 data-v-0850eeb5><div class="wrapper" data-v-0850eeb5><div class="container" data-v-0850eeb5><div class="title" data-v-0850eeb5><div class="VPNavBarTitle has-sidebar" data-v-0850eeb5 data-v-5efaa3d5><a class="title" href="/" data-v-5efaa3d5><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-28aabeee><!--]--><span data-v-5efaa3d5>Wot UI</span><!--[--><!--[--><!--[--><!--[--><span class="el-tag el-tag--primary el-tag--small el-tag--plain" style="vertical-align:middle;margin-left:8px;" text><span class="el-tag__content"><!--[-->1.13.0<!--]--></span><!--v-if--></span><!--]--><!--]--><!--]--><!--]--></a></div></div><div class="content" data-v-0850eeb5><div class="content-body" data-v-0850eeb5><!--[--><!--]--><div class="VPNavBarSearch search" data-v-0850eeb5><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-0850eeb5 data-v-226f0211><span id="main-nav-aria-label" class="visually-hidden" data-v-226f0211> Main Navigation </span><!--[--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>指南</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/introduction.html" data-v-796a4fac><!--[--><span data-v-796a4fac>介绍</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/quick-use.html" data-v-796a4fac><!--[--><span data-v-796a4fac>快速上手</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/cli-templates.html" data-v-796a4fac><!--[--><span data-v-796a4fac>脚手架与模板</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/consultation.html" data-v-796a4fac><!--[--><span data-v-796a4fac>咨询服务</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/custom-theme.html" data-v-796a4fac><!--[--><span data-v-796a4fac>定制主题</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/common-problems.html" data-v-796a4fac><!--[--><span data-v-796a4fac>常见问题</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/locale.html" data-v-796a4fac><!--[--><span data-v-796a4fac>国际化</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/changelog.html" data-v-796a4fac><!--[--><span data-v-796a4fac>更新日志</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/cases.html" data-v-796a4fac><!--[--><span data-v-796a4fac>⭐ 案例</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/join-group.html" data-v-796a4fac><!--[--><span data-v-796a4fac>加群沟通</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>组件</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/button.html" data-v-796a4fac><!--[--><span data-v-796a4fac>基础组件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/pagination.html" data-v-796a4fac><!--[--><span data-v-796a4fac>导航组件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/calendar.html" data-v-796a4fac><!--[--><span data-v-796a4fac>数据输入</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/action-sheet.html" data-v-796a4fac><!--[--><span data-v-796a4fac>反馈组件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/badge.html" data-v-796a4fac><!--[--><span data-v-796a4fac>数据展示</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reward/reward.html" tabindex="0" data-v-226f0211 data-v-18672fa5><!--[--><span data-v-18672fa5>🥤一杯咖啡</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://blog.wot-ui.cn/" target="_blank" rel="noreferrer" tabindex="0" data-v-226f0211 data-v-18672fa5><!--[--><span data-v-18672fa5>博客</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>模板</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://starter.wot-ui.cn/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>快速上手模板 wot-starter</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://vitesse-docs.netlify.app/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>vitesse-uni-app</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://github.com/wot-ui/wot-starter-retail" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>wot-starter-retail</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://unibest.tech/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>unibest</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>资源</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://starter.wot-ui.cn/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>快速上手模板</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>VS Code 代码提示插件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://moonofweisheng.github.io/uni-mini-router/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>Vue3 uni-app路由库</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://github.com/Moonofweisheng/uni-mini-ci" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>多平台小程序CI工具</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://uni-helper.js.org/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>Uni Helper</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://github.com/uni-ku" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>uni-ku</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-0850eeb5 data-v-c7b0e7c4 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-276a3a8f><span class="text" data-v-276a3a8f><span class="vpi-languages option-icon" data-v-276a3a8f></span><!----><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><!----><!--[--><!--[--><div class="items" data-v-c7b0e7c4><p class="title" data-v-c7b0e7c4>简体中文</p><!--[--><div class="VPMenuLink" data-v-c7b0e7c4 data-v-796a4fac><a class="VPLink link" href="/en-US/component/picker.html" data-v-796a4fac><!--[--><span data-v-796a4fac>English</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-0850eeb5 data-v-7042c56b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-7042c56b data-v-c7ba4725 data-v-5c03db5c><span class="check" data-v-5c03db5c><span class="icon" data-v-5c03db5c><!--[--><span class="vpi-sun sun" data-v-c7ba4725></span><span class="vpi-moon moon" data-v-c7ba4725></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-0850eeb5 data-v-39bcb251 data-v-c6225e3a><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Moonofweisheng/wot-design-uni" aria-label="github" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/wot-design-uni/wot-design-uni" aria-label="Gitee" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg></a><a class="VPSocialLink no-icon" href="/guide/join-group" aria-label="QQ" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1694688365239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="200" height="200"><path d="M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z" p-id="4049" fill="#6D6D72"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/26044011388510/posts" aria-label target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1758594913114" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5329" width="200" height="200"><path d="M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z" fill="#1E80FF" p-id="5330"></path></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-0850eeb5 data-v-f234b936 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-276a3a8f><span class="vpi-more-horizontal icon" data-v-276a3a8f></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><!----><!--[--><!--[--><div class="group translations" data-v-f234b936><p class="trans-title" data-v-f234b936>简体中文</p><!--[--><div class="VPMenuLink" data-v-f234b936 data-v-796a4fac><a class="VPLink link" href="/en-US/component/picker.html" data-v-796a4fac><!--[--><span data-v-796a4fac>English</span><!--]--></a></div><!--]--></div><div class="group" data-v-f234b936><div class="item appearance" data-v-f234b936><p class="label" data-v-f234b936>Appearance</p><div class="appearance-action" data-v-f234b936><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-f234b936 data-v-c7ba4725 data-v-5c03db5c><span class="check" data-v-5c03db5c><span class="icon" data-v-5c03db5c><!--[--><span class="vpi-sun sun" data-v-c7ba4725></span><span class="vpi-moon moon" data-v-c7ba4725></span><!--]--></span></span></button></div></div></div><div class="group" data-v-f234b936><div class="item social-links" data-v-f234b936><div class="VPSocialLinks social-links-list" data-v-f234b936 data-v-c6225e3a><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Moonofweisheng/wot-design-uni" aria-label="github" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/wot-design-uni/wot-design-uni" aria-label="Gitee" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg></a><a class="VPSocialLink no-icon" href="/guide/join-group" aria-label="QQ" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1694688365239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="200" height="200"><path d="M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z" p-id="4049" fill="#6D6D72"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/26044011388510/posts" aria-label target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1758594913114" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5329" width="200" height="200"><path d="M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z" fill="#1E80FF" p-id="5330"></path></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-0850eeb5 data-v-1f90b587><span class="container" data-v-1f90b587><span class="top" data-v-1f90b587></span><span class="middle" data-v-1f90b587></span><span class="bottom" data-v-1f90b587></span></span></button></div></div></div></div><div class="divider" data-v-0850eeb5><div class="divider-line" data-v-0850eeb5></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-0265fbf3 data-v-18b98bac><div class="container" data-v-18b98bac><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-18b98bac><span class="vpi-align-left menu-icon" data-v-18b98bac></span><span class="menu-text" data-v-18b98bac>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-18b98bac data-v-4d5c8a58><button data-v-4d5c8a58>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-0265fbf3 data-v-87cf4cbd><div class="curtain" data-v-87cf4cbd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-87cf4cbd><span class="visually-hidden" id="sidebar-aria-label" data-v-87cf4cbd> Sidebar Navigation </span><!--[--><!--]--><!--[--><!----><!--]--><!--[--><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>基础 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/button.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Button 按钮 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/icon.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Icon 图标 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/layout.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Layout 布局 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/config-provider.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ConfigProvider 全局配置 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/popup.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Popup 弹出层 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/resize.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Resize 监听元素尺寸变化 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/transition.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Transition 动画 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/fab.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Fab 悬浮按钮 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/text.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Text 文本 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/root-portal.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>RootPortal 根节点 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.11.0<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>导航 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/pagination.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Pagination 分页 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/popover.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Popover 气泡 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tabs.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tabs 标签页 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/segmented.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Segmented 分段器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tabbar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tabbar 标签栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/navbar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Navbar 导航栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/sidebar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Sidebar 侧边栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/backtop.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Backtop 回到顶部 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/index-bar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>IndexBar 索引栏 <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible has-active" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>数据输入 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/calendar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Calendar 日历选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/calendar-view.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>CalendarView 日历面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/checkbox.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Checkbox 复选框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/col-picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ColPicker 多列选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/datetime-picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>DatetimePicker 时间选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/datetime-picker-view.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>DatetimePickerView 时间选择器视图 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/form.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Form 表单 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/input.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Input 输入框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/textarea.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Textarea 文本域 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/input-number.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>InputNumber 计数器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Picker 选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/picker-view.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>PickerView 选择器视图 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/radio.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Radio 单选框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/rate.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Rate 评分 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/search.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Search 搜索框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/select-picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>SelectPicker 单复选选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/slider.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Slider 滑块 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/switch.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Switch 开关 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/upload.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Upload 上传 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/password-input.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>PasswordInput 密码输入框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/signature.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Signature 签名 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.6.0<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>反馈 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/action-sheet.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ActionSheet 动作面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/drop-menu.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>DropMenu 下拉菜单 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/floating-panel.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>FloatingPanel 浮动面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/loading.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Loading 加载 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/message-box.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>MessageBox 弹框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/notice-bar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>NoticeBar 通知栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/overlay.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Overlay 遮罩层 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/progress.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Progress 进度条 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/circle.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Circle 环形进度条 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/sort-button.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>SortButton 排序按钮 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/status-tip.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>StatusTip 缺省提示 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/swipe-action.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>SwipeAction 滑动操作 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/toast.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Toast 轻提示 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/notify.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Notify 消息通知 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tooltip.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tooltip 文字提示 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/count-down.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>CountDown 倒计时 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/count-to.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>CountTo 数字滚动 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.3.8<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/keyboard.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Keyboard 虚拟键盘 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.3.10<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/number-keyboard.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>NumberKeyboard 数字键盘 <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>数据展示 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/badge.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Badge 徽标 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/card.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Card 卡片 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/cell.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Cell 单元格 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/collapse.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Collapse 折叠面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/curtain.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Curtain 幕帘 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/divider.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Divider 分割线 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/gap.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Gap 间隔槽 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/img.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Img 图片 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/img-cropper.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ImgCropper 图片裁剪 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/grid.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Grid 宫格 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/loadmore.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Loadmore 加载更多 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/skeleton.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Skeleton 骨架屏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/steps.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Steps 步骤条 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/sticky.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Sticky 粘性布局 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tag.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tag 标签 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/watermark.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Watermark 水印 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/swiper.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Swiper 轮播图 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/table.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Table 表格 <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>组合式API <!----></h2><!----></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-upload.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useUpload <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-count-down.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useCountDown <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-toast.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useToast <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-message.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useMessage <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-0265fbf3 data-v-735a7857><div class="VPDoc has-sidebar has-aside is-component is-expanded" data-v-735a7857 data-v-fb66d0fe><!--[--><!--]--><div class="container" data-v-fb66d0fe><div class="aside" data-v-fb66d0fe><div class="aside-curtain" data-v-fb66d0fe></div><div class="aside-container" data-v-fb66d0fe><div class="aside-content" data-v-fb66d0fe><div class="VPDocAside" data-v-fb66d0fe data-v-bd7328b1><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-bd7328b1 data-v-8b66606c><div class="content" data-v-8b66606c><div class="outline-marker" data-v-8b66606c></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8b66606c>On this page</div><ul class="VPDocOutlineItem root" data-v-8b66606c data-v-36869fd1><!--[--><!--]--></ul></div></nav><!--[--><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><a class="sponsors-aside-text" href="/reward/sponsor">赞助位</a><div class="VPSponsors vp-sponsor aside"><!----><!----><section class="vp-sponsor-section"><div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="1"><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><span class="vp-sponsor-grid-text">成为赞助商</span></article></a></div></div></section></div></div><div class="wwads-container"><div class="wwads-cn wwads-vertical" data-id="372"></div></div><!----><!--]--><!--]--><!--]--><!--]--><!--]--><div class="spacer" data-v-bd7328b1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-fb66d0fe><div class="content-container" data-v-fb66d0fe><!--[--><!--]--><main class="main" data-v-fb66d0fe><div style="position:relative;" class="vp-doc _component_picker" data-v-fb66d0fe><div><h1 id="picker-选择器" tabindex="-1">Picker 选择器 <a class="header-anchor" href="#picker-选择器" aria-label="Permalink to &quot;Picker 选择器&quot;">​</a></h1><p>Picker 组件为 popup 和 pickerView 的组合。</p><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to &quot;基本用法&quot;">​</a></h2><p><code>columns</code> 设置选项数据源，选项可以为字符串，也可以为对象，如果为对象则默认取 <code>label</code> 属性为选项内容进行渲染。<code>label</code> 设置左侧文本内容，<code>v-model</code> 设置选中项的值。label 可以不传。可以通过 <code>label-width</code> 设置标题宽度，默认为 &#39;33%&#39;，监听 <code>confirm</code> 事件，获取选中值，传出一个 event 对象，event <code>event = { value, selectedItems }</code>，value 为绑定值，selectedItems 为选中选项的对象。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;单列选项&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleConfirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> columns</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项5&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项7&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>当 <code>columns</code> 选项为对象时，其数据结构为：</p><table tabindex="0"><thead><tr><th>参数</th><th>类型</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>value</td><td>string / number / boolean</td><td>选项值，如果 value 属性不存在，则使用 label 作为选项的值</td><td>-</td></tr><tr><td>label</td><td>string</td><td>选项文本内容</td><td>-</td></tr><tr><td>disabled</td><td>boolean</td><td>选项是否禁用</td><td>-</td></tr></tbody></table><h2 id="禁用" tabindex="-1">禁用 <a class="header-anchor" href="#禁用" aria-label="Permalink to &quot;禁用&quot;">​</a></h2><p>设置 <code>disabled</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;禁用&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> disabled</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> columns</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项5&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项7&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="只读" tabindex="-1">只读 <a class="header-anchor" href="#只读" aria-label="Permalink to &quot;只读&quot;">​</a></h2><p>设置 <code>readonly</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;只读&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h2 id="清空按钮" tabindex="-1">清空按钮 <a class="header-anchor" href="#清空按钮" aria-label="Permalink to &quot;清空按钮&quot;">​</a></h2><p>设置 <code>clearable</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;清空&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> clearable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h2 id="文案标题" tabindex="-1">文案标题 <a class="header-anchor" href="#文案标题" aria-label="Permalink to &quot;文案标题&quot;">​</a></h2><p>设置 <code>title</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;标题&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;文案标题&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="加载中" tabindex="-1">加载中 <a class="header-anchor" href="#加载中" aria-label="Permalink to &quot;加载中&quot;">​</a></h2><p>设置 <code>loading</code> 属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker-view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> loading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h2 id="多列" tabindex="-1">多列 <a class="header-anchor" href="#多列" aria-label="Permalink to &quot;多列&quot;">​</a></h2><p><code>columns</code> 属性设置为二维数组，<code>value</code> 为数组。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;多列&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;中南大学&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;软件工程&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> columns</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;中山大学&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;中南大学&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;华南理工大学&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;计算机科学与技术&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;软件工程&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;通信工程&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;法学&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;经济学&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="多级联动" tabindex="-1">多级联动 <a class="header-anchor" href="#多级联动" aria-label="Permalink to &quot;多级联动&quot;">​</a></h2><p>传入 <code>column-change</code> 属性，其类型为 <code>function</code>，接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 <code>setColumnData</code> 方法修改其他列的数据源，当修改完成后需要执行 <code>resolve()</code> 告知组件修改完成以继续执行，如果 <code>column-change</code> 包含异步操作，也可以使组件按照异步顺序进行执行。</p><blockquote><p>每次修改完后都需要调用 resolve() 通知组件。</p></blockquote><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;多列联动&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :column-change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChangeDistrict&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :display-format</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;displayFormat&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> district</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;北京&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110000&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;广东省&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440000&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;110000&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;北京&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110100&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;440000&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;广州市&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440100&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;韶关市&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440200&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;深圳市&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440300&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;珠海市&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440400&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;汕头市&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440500&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;110100&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;东城区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110101&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;西城区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110102&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;朝阳区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110105&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;丰台区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110106&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;石景山区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110107&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;440100&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;荔湾区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440103&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;越秀区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440104&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;海珠区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440105&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;440200&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;武江区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440203&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;440300&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;罗湖区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440303&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;福田区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440304&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;440400&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;香洲区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440402&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;斗门区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440403&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;金湾区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440404&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;440500&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;龙湖区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440507&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, { label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;金平区&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;440511&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }]</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110000&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110100&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;110102&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> columns</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([district[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">], district[district[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">][</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].value], district[district[district[</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">][</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].value][</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].value]])</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChangeDistrict</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">pickerView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">columnIndex</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> item</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value[columnIndex]</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (columnIndex </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pickerView.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setColumnData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, district[item.value])</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pickerView.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setColumnData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, district[district[item.value][</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].value])</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (columnIndex </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> pickerView.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setColumnData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, district[item.value])</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> displayFormat</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">map</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> item.label</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> })</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">join</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;-&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="选择器大小" tabindex="-1">选择器大小 <a class="header-anchor" href="#选择器大小" aria-label="Permalink to &quot;选择器大小&quot;">​</a></h2><p>通过设置 <code>size</code> 修改选择器大小，将 <code>size</code> 设置为 &#39;large&#39; 时字号为 16px。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;单列选项&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;large&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h2 id="必填属性" tabindex="-1">必填属性 <a class="header-anchor" href="#必填属性" aria-label="Permalink to &quot;必填属性&quot;">​</a></h2><p>设置 <code>required</code> 属性，展示必填样式。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;必填属性&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> error</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> required</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="错误状态" tabindex="-1">错误状态 <a class="header-anchor" href="#错误状态" aria-label="Permalink to &quot;错误状态&quot;">​</a></h2><p>设置 <code>error</code> 属性，选择器的值显示为红色。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;单列选项&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> error</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="值靠右展示" tabindex="-1">值靠右展示 <a class="header-anchor" href="#值靠右展示" aria-label="Permalink to &quot;值靠右展示&quot;">​</a></h2><p>设置 <code>align-right</code> 属性，选择器的值靠右展示。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;单列选项&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> align-right</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h2 id="确定前校验" tabindex="-1">确定前校验 <a class="header-anchor" href="#确定前校验" aria-label="Permalink to &quot;确定前校验&quot;">​</a></h2><p>设置 <code>before-confirm</code> 函数，在用户点击<code>确定</code>按钮时，会执行 <code>before-confirm</code> 函数，并传入 <code>value</code> 、 <code>resolve</code> 和 <code>picker</code> 参数，可以对 <code>value</code> 进行校验，并通过 <code>resolve</code> 函数告知组件是否确定通过，<code>resolve</code> 接受1个 boolean 值，<code>resolve(true)</code> 表示选项通过，<code>resolve(false)</code> 表示选项不通过，不通过时不会关闭 <code>picker</code>弹窗。可以通过 <code>picker</code> 参数直接设置 <code>loading</code>、<code>columns</code> 等属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-toast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;before-confirm&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :before-confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;beforeConfirm&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @confirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleConfirm&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { useToast } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@/uni_modules/wot-design-uni&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> toast</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useToast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> beforeConfirm</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> picker.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setLoading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> picker.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setLoading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项校验不通过，请重新选择&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> columns</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项1&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项5&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项7&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> value</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> beforeConfirm</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> picker.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setLoading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setTimeout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> picker.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setLoading</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ([</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项2&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项3&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">].</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">indexOf</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> -</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> toast.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项校验不通过，请重新选择&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">else</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> resolve</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleConfirm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="唤起项插槽" tabindex="-1">唤起项插槽 <a class="header-anchor" href="#唤起项插槽" aria-label="Permalink to &quot;唤起项插槽&quot;">​</a></h2><p>开启 <code>use-default-slot</code> ，设置默认插槽修改唤起picker组件的形式。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :columns</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;columns&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;value&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> use-default-slot</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;插槽唤起&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-picker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to &quot;Attributes&quot;">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>v-model</td><td>选中项，如果为多列选择器，则其类型应为数组</td><td>string/number/boolean/array</td><td>-</td><td>-</td><td>-</td></tr><tr><td>columns</td><td>选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器</td><td>array</td><td>-</td><td>-</td><td>-</td></tr><tr><td>loading</td><td>加载中</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>loading-color</td><td>加载的颜色，只能使用十六进制的色值写法，且不能使用缩写</td><td>string</td><td>-</td><td>#4D80F0</td><td>-</td></tr><tr><td>columns-height</td><td>picker内部滚筒高</td><td>number</td><td>-</td><td>231</td><td>-</td></tr><tr><td>value-key</td><td>选项对象中，value对应的 key</td><td>string</td><td>-</td><td>value</td><td>-</td></tr><tr><td>label-key</td><td>选项对象中，展示的文本对应的 key</td><td>string</td><td>-</td><td>label</td><td>-</td></tr><tr><td>title</td><td>弹出层标题</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>cancel-button-text</td><td>取消按钮文案</td><td>string</td><td>-</td><td>取消</td><td>-</td></tr><tr><td>confirm-button-text</td><td>确认按钮文案</td><td>string</td><td>-</td><td>完成</td><td>-</td></tr><tr><td>label</td><td>选择器左侧文案</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>placeholder</td><td>选择器占位符</td><td>string</td><td>-</td><td>请选择</td><td>-</td></tr><tr><td>disabled</td><td>禁用</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>readonly</td><td>只读</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>display-format</td><td>自定义展示文案的格式化函数，返回一个字符串</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>column-change</td><td>接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 <code>setColumnData</code> 方法修改其他列的数据源</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>size</td><td>设置选择器大小</td><td>string</td><td>large</td><td>-</td><td>-</td></tr><tr><td>label-width</td><td>设置左侧标题宽度</td><td>string</td><td>-</td><td>33%</td><td>-</td></tr><tr><td>error</td><td>是否为错误状态，错误状态时右侧内容为红色</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>required</td><td>表单属性，必填</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>marker-side</td><td>必填标记位置</td><td>string</td><td>before / after</td><td>before</td><td>1.12.0</td></tr><tr><td>align-right</td><td>选择器的值靠右展示</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>use-label-slot</td><td>label 使用插槽</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>use-default-slot</td><td>使用默认插槽</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>before-confirm</td><td>确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数</td><td>function</td><td>-</td><td>-</td><td>-</td></tr><tr><td>close-on-click-modal</td><td>点击遮罩是否关闭</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>z-index</td><td>弹窗层级</td><td>number</td><td>-</td><td>15</td><td>-</td></tr><tr><td>safe-area-inset-bottom</td><td>弹出面板是否设置底部安全距离（iphone X 类型的机型）</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>ellipsis</td><td>是否超出隐藏</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>prop</td><td>表单域 <code>model</code> 字段名，在使用表单校验功能的情况下，该属性是必填的</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>rules</td><td>表单验证规则，结合<code>wd-form</code>组件使用</td><td><code>FormItemRule []</code></td><td>-</td><td><code>[]</code></td><td>-</td></tr><tr><td>immediate-change</td><td>是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持</td><td>boolean</td><td>-</td><td>false</td><td>1.2.25</td></tr><tr><td>clearable</td><td>显示清空按钮</td><td>boolean</td><td>-</td><td>false</td><td>1.11.0</td></tr><tr><td>root-portal</td><td>是否从页面中脱离出来，用于解决各种 fixed 失效问题</td><td>boolean</td><td>-</td><td>false</td><td>1.11.0</td></tr></tbody></table><h3 id="formitemrule-数据结构" tabindex="-1">FormItemRule 数据结构 <a class="header-anchor" href="#formitemrule-数据结构" aria-label="Permalink to &quot;FormItemRule 数据结构&quot;">​</a></h3><table tabindex="0"><thead><tr><th>键名</th><th>说明</th><th>类型</th></tr></thead><tbody><tr><td>required</td><td>是否为必选字段</td><td><code>boolean</code></td></tr><tr><td>message</td><td>错误提示文案</td><td><code>string</code></td></tr><tr><td>validator</td><td>通过函数进行校验，可以返回一个 <code>Promise</code> 来进行异步校验</td><td><code>(value, rule) =&gt; boolean | Promise</code></td></tr><tr><td>pattern</td><td>通过正则表达式进行校验，正则无法匹配表示校验不通过</td><td><code>RegExp</code></td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><table tabindex="0"><thead><tr><th>事件名称</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>confirm</td><td>点击右侧按钮触发</td><td>{ value, selectedItems }， value 为选中值(多列则为数组)，selectedItems为选中项(多列则为数组)</td><td>-</td></tr><tr><td>cancel</td><td>点击左侧按钮触发</td><td>-</td><td>-</td></tr><tr><td>open</td><td>打开选择器弹出层时触发</td><td>-</td><td>-</td></tr><tr><td>clear</td><td>点击清空按钮时触发</td><td>-</td><td>1.11.0</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to &quot;Methods&quot;">​</a></h2><table tabindex="0"><thead><tr><th>方法名称</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>open</td><td>打开picker弹框</td><td>-</td><td>-</td></tr><tr><td>close</td><td>关闭picker弹框</td><td>-</td><td>-</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h2><table tabindex="0"><thead><tr><th>name</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>default</td><td>使用默认插槽</td><td>-</td></tr><tr><td>label</td><td>左侧标题插槽</td><td>-</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to &quot;外部样式类&quot;">​</a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式</td><td>-</td></tr><tr><td>custom-view-class</td><td>pickerView 外部自定义样式</td><td>-</td></tr><tr><td>custom-label-class</td><td>label 外部自定义样式</td><td>-</td></tr><tr><td>custom-value-class</td><td>value 外部自定义样式</td><td>-</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to &quot;源代码&quot;">​</a></h2><a class="el-link el-link--default" href="https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/picker" target="_blank" style="text-decoration:none;font-size:1.2em;"><!--v-if--><span class="el-link__inner"><!--[--><!--[-->文档<!--]--><div style="margin-left:0.25em;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
</g>
</svg>
</div><!--]--></span><!--v-if--></a> • <a class="el-link el-link--default" href="https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-picker" target="_blank" style="text-decoration:none;font-size:1.2em;"><!--v-if--><span class="el-link__inner"><!--[--><!--[-->组件<!--]--><div style="margin-left:0.25em;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
</g>
</svg>
</div><!--]--></span><!--v-if--></a></div></div><!--[--><div class="transition-end demo-model" data-v-aa6da386><div class="demo-header" data-v-aa6da386><a class="el-link el-link--default demo-link" href="subPages/picker/Index" target="_blank" style="text-decoration:none;font-size:1.2em;" data-v-aa6da386><!--v-if--><span class="el-link__inner"><!--[--><!--[--><!--]--><div style="margin-left:0.25em;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
</g>
</svg>
</div><!--]--></span><!--v-if--></a><div class="demo-qrcode" data-v-aa6da386 data-v-60a63325><!--[--><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" data-v-60a63325><path fill="currentColor" d="M2 2h9v9H2zm2 2v5h5V4zm9-2h9v9h-9zm2 2v5h5V4zM5.5 5.5h2.004v2.004H5.5zm11 0h2.004v2.004H16.5zm-3.504 7.496H15V15h-2.004zm7 0H22V15h-2.004zM2 13h9v9H2zm2 2v5h5v-5zm11.996.996H18v2h2v2h2V22h-2.004v-2h-2v-2h-2zM5.5 16.5h2.004v2.004H5.5zm7.496 3.496H15V22h-2.004z" data-v-60a63325></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><i class="el-icon expand-icon" style="cursor:pointer;" data-v-aa6da386><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-aa6da386><path fill="currentColor" d="M896 192H128v128h768zm0 256H384v128h512zm0 256H128v128h768zM320 384 128 512l192 128z"></path></svg><!--]--></i></div><div class="iframe-container" data-v-aa6da386><iframe id="demo" class="iframe" scrolling="auto" frameborder="0" src="subPages/picker/Index" data-v-aa6da386></iframe></div></div><!----><!----><!--]--></main><footer class="VPDocFooter" data-v-fb66d0fe data-v-f286b101><!--[--><!--]--><div class="edit-info" data-v-f286b101><div class="edit-link" data-v-f286b101><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/component/picker.md" target="_blank" rel="noreferrer" data-v-f286b101><!--[--><span class="vpi-square-pen edit-link-icon" data-v-f286b101></span> 为此页提供修改建议<!--]--></a></div><div class="last-updated" data-v-f286b101><p class="VPLastUpdated" data-v-f286b101 data-v-29be4286>最后更新: <time datetime="2025-11-04T09:38:20.000Z" data-v-29be4286></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-f286b101><span class="visually-hidden" id="doc-footer-aria-label" data-v-f286b101>Pager</span><div class="pager" data-v-f286b101><a class="VPLink link pager-link prev" href="/component/input-number.html" data-v-f286b101><!--[--><span class="desc" data-v-f286b101>Previous page</span><span class="title" data-v-f286b101>InputNumber 计数器</span><!--]--></a></div><div class="pager" data-v-f286b101><a class="VPLink link pager-link next" href="/component/picker-view.html" data-v-f286b101><!--[--><span class="desc" data-v-f286b101>Next page</span><span class="title" data-v-f286b101>PickerView 选择器视图</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-0265fbf3 data-v-8c1e2209><div class="container" data-v-8c1e2209><p class="message" data-v-8c1e2209>Released under the MIT License.</p><p class="copyright" data-v-8c1e2209>Copyright © 2023-present weisheng</p></div></footer><!--[--><footer class="VPFooter has-sidebar" data-v-5241aff4><div class="container" data-v-5241aff4><p class="message" data-v-5241aff4>Released under the MIT License.</p><p class="copyright" data-v-5241aff4>Copyright © 2023-present weisheng</p></div></footer><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"component_action-sheet.md\":\"c1wk9iY0\",\"component_backtop.md\":\"ChjnCdXQ\",\"component_badge.md\":\"DHa9DmJP\",\"component_button.md\":\"DdPdDApy\",\"component_calendar-view.md\":\"By77yWTw\",\"component_calendar.md\":\"TPn3bVA7\",\"component_card.md\":\"DKYdUaSz\",\"component_cell.md\":\"B1CvrQYt\",\"component_checkbox.md\":\"BTN9YXJn\",\"component_circle.md\":\"C-NomEQu\",\"component_col-picker.md\":\"B7y2As-_\",\"component_collapse.md\":\"BqEW7fjt\",\"component_config-provider.md\":\"Cc9O2TFG\",\"component_count-down.md\":\"7AKR5r1_\",\"component_count-to.md\":\"DXWdmNx4\",\"component_curtain.md\":\"Bta-imfj\",\"component_datetime-picker-view.md\":\"rJ_XDCZt\",\"component_datetime-picker.md\":\"z0yCsYtN\",\"component_divider.md\":\"R4TdmO8i\",\"component_drop-menu.md\":\"C13tbRUp\",\"component_fab.md\":\"DImkhvpn\",\"component_floating-panel.md\":\"B7i2tAhS\",\"component_form.md\":\"CME-wnrf\",\"component_gap.md\":\"DIIJY1vb\",\"component_grid.md\":\"DkQoGrey\",\"component_icon.md\":\"BuHdjlZN\",\"component_img-cropper.md\":\"BqLT0gMm\",\"component_img.md\":\"D7sPPqXk\",\"component_index-bar.md\":\"BOkNzK1d\",\"component_input-number.md\":\"De7gihWB\",\"component_input.md\":\"DfDNMeI7\",\"component_keyboard.md\":\"BOsb0wk-\",\"component_layout.md\":\"DfTs5fy6\",\"component_loading.md\":\"IsQE3LX_\",\"component_loadmore.md\":\"CojhRRRt\",\"component_message-box.md\":\"C-1IPENS\",\"component_navbar.md\":\"CJu6jrqt\",\"component_notice-bar.md\":\"M5Td2nA8\",\"component_notify.md\":\"Bey59xX8\",\"component_number-keyboard.md\":\"CHSyxjdT\",\"component_overlay.md\":\"Cg9-6ocD\",\"component_pagination.md\":\"CDHiQxUl\",\"component_password-input.md\":\"072mSgvk\",\"component_picker-view.md\":\"Bai5gXeH\",\"component_picker.md\":\"DS6cN2sU\",\"component_popover.md\":\"A4pXDyWr\",\"component_popup.md\":\"BcRFloja\",\"component_progress.md\":\"Czp_wd4C\",\"component_radio.md\":\"DbJTnGS0\",\"component_rate.md\":\"C_WkdfIZ\",\"component_resize.md\":\"D8RZtXoR\",\"component_root-portal.md\":\"roOdXyJH\",\"component_search.md\":\"Mb8x7t2A\",\"component_segmented.md\":\"yzL4eQEM\",\"component_select-picker.md\":\"Bfsrlx9I\",\"component_sidebar.md\":\"DL1UgvVn\",\"component_signature.md\":\"DkbbyalD\",\"component_skeleton.md\":\"Cc_j76M_\",\"component_slider.md\":\"p6HGcIPe\",\"component_sort-button.md\":\"BD8z8Cve\",\"component_status-tip.md\":\"BvIC-tWU\",\"component_steps.md\":\"CGl3Ci6T\",\"component_sticky.md\":\"C_lGa15p\",\"component_swipe-action.md\":\"Be8RihFK\",\"component_swiper.md\":\"DaYLlpEs\",\"component_switch.md\":\"C0mqvZuH\",\"component_tabbar.md\":\"ydn44Av0\",\"component_table.md\":\"BkUxx66J\",\"component_tabs.md\":\"ZBLgX7sE\",\"component_tag.md\":\"Cah0fbm3\",\"component_text.md\":\"T9lTnVI5\",\"component_textarea.md\":\"CcwDxrKj\",\"component_toast.md\":\"BZuJA7Lz\",\"component_tooltip.md\":\"CC2aFIqN\",\"component_transition.md\":\"CkEHkk23\",\"component_upload.md\":\"XiFkl4kM\",\"component_use-count-down.md\":\"Xnxyrag0\",\"component_use-message.md\":\"BuGPPdHM\",\"component_use-notify.md\":\"BWojxxLU\",\"component_use-toast.md\":\"BZkuWk55\",\"component_use-upload.md\":\"Y-ZiqRcB\",\"component_watermark.md\":\"Cd26NJVG\",\"en-us_component_action-sheet.md\":\"Cd3U93mr\",\"en-us_component_backtop.md\":\"Bslz86Iq\",\"en-us_component_badge.md\":\"D8LazXDE\",\"en-us_component_button.md\":\"CnMVwqBn\",\"en-us_component_calendar-view.md\":\"iz4-bCKT\",\"en-us_component_calendar.md\":\"v2nB85ff\",\"en-us_component_card.md\":\"uC1up0ZK\",\"en-us_component_cell.md\":\"hIXxrdwM\",\"en-us_component_checkbox.md\":\"qBl_DsKh\",\"en-us_component_circle.md\":\"BPmZrds3\",\"en-us_component_col-picker.md\":\"BWRXToYb\",\"en-us_component_collapse.md\":\"LKD9aBUw\",\"en-us_component_config-provider.md\":\"CFNW3U-S\",\"en-us_component_count-down.md\":\"BJQiz0fk\",\"en-us_component_count-to.md\":\"D2-tcAxo\",\"en-us_component_curtain.md\":\"CpVzT501\",\"en-us_component_datetime-picker-view.md\":\"DRRyefaI\",\"en-us_component_datetime-picker.md\":\"viOfH4-D\",\"en-us_component_divider.md\":\"5yS4Zj7t\",\"en-us_component_drop-menu.md\":\"CjkACyIn\",\"en-us_component_fab.md\":\"BKrDynOW\",\"en-us_component_floating-panel.md\":\"BNdM3TAS\",\"en-us_component_form.md\":\"CmWlrhX2\",\"en-us_component_gap.md\":\"xHLZJiab\",\"en-us_component_grid.md\":\"BnbHrzpx\",\"en-us_component_icon.md\":\"ZGGzXqB0\",\"en-us_component_img-cropper.md\":\"NY3w0k-N\",\"en-us_component_img.md\":\"DJVBjNYz\",\"en-us_component_index-bar.md\":\"fF1C0kOD\",\"en-us_component_input-number.md\":\"CAZT25bO\",\"en-us_component_input.md\":\"DW5h1itn\",\"en-us_component_keyboard.md\":\"CodeGHFL\",\"en-us_component_layout.md\":\"rRHhIkkw\",\"en-us_component_loading.md\":\"B35WuME0\",\"en-us_component_loadmore.md\":\"D9kTaZhc\",\"en-us_component_message-box.md\":\"DrnZVwZp\",\"en-us_component_navbar.md\":\"BmlPgjvC\",\"en-us_component_notice-bar.md\":\"Cvr7wOv6\",\"en-us_component_notify.md\":\"Br3ccipV\",\"en-us_component_number-keyboard.md\":\"CaPQvUPH\",\"en-us_component_overlay.md\":\"zNxFtOQZ\",\"en-us_component_pagination.md\":\"DHm_Z8LN\",\"en-us_component_password-input.md\":\"C29XspiG\",\"en-us_component_picker-view.md\":\"a3X9EZkl\",\"en-us_component_picker.md\":\"CCw2hvXb\",\"en-us_component_popover.md\":\"BPLhDTIf\",\"en-us_component_popup.md\":\"BLOzydaK\",\"en-us_component_progress.md\":\"2cPjArIs\",\"en-us_component_radio.md\":\"BynGPD10\",\"en-us_component_rate.md\":\"D2Aaq0NP\",\"en-us_component_resize.md\":\"C3NcH4RM\",\"en-us_component_root-portal.md\":\"CTbe11FN\",\"en-us_component_search.md\":\"D8gdRsFB\",\"en-us_component_segmented.md\":\"DNjB96qJ\",\"en-us_component_select-picker.md\":\"7vfJz5YJ\",\"en-us_component_sidebar.md\":\"BgxPFXds\",\"en-us_component_signature.md\":\"D2eNXB2w\",\"en-us_component_skeleton.md\":\"Dgx_lV7y\",\"en-us_component_slider.md\":\"KcUCvn5T\",\"en-us_component_sort-button.md\":\"DHr8Lg6-\",\"en-us_component_status-tip.md\":\"PEI5mWsU\",\"en-us_component_steps.md\":\"C5tvS80n\",\"en-us_component_sticky.md\":\"DW-Nlnxa\",\"en-us_component_swipe-action.md\":\"DlVLtPzt\",\"en-us_component_swiper.md\":\"DS-UOAtN\",\"en-us_component_switch.md\":\"CoRdlYBi\",\"en-us_component_tabbar.md\":\"DrKNkzwJ\",\"en-us_component_table.md\":\"BUyeA4sa\",\"en-us_component_tabs.md\":\"DmdKyG-a\",\"en-us_component_tag.md\":\"BEcm8wa-\",\"en-us_component_text.md\":\"CZdJbtwW\",\"en-us_component_textarea.md\":\"56-Whl10\",\"en-us_component_toast.md\":\"BRSBm3RU\",\"en-us_component_tooltip.md\":\"C8DQf8H2\",\"en-us_component_transition.md\":\"C6DPrCEx\",\"en-us_component_upload.md\":\"BlVSsmpW\",\"en-us_component_use-count-down.md\":\"CyEqu1km\",\"en-us_component_use-message.md\":\"CMAz6nqd\",\"en-us_component_use-notify.md\":\"D0AjOFl5\",\"en-us_component_use-toast.md\":\"BV3WSzoK\",\"en-us_component_use-upload.md\":\"CBfVolaU\",\"en-us_component_watermark.md\":\"Do6ZpG1-\",\"en-us_guide_cases.md\":\"4dW2tPiK\",\"en-us_guide_changelog.md\":\"D1rlzokv\",\"en-us_guide_cli-templates.md\":\"4m4MEJdq\",\"en-us_guide_common-problems.md\":\"m7Th9aXD\",\"en-us_guide_custom-theme.md\":\"BPELFWuA\",\"en-us_guide_introduction.md\":\"C1I0pOjl\",\"en-us_guide_join-group.md\":\"DWJTm-4f\",\"en-us_guide_locale.md\":\"X5sYa5Eb\",\"en-us_guide_quick-use.md\":\"kNUqoGim\",\"en-us_guide_typography.md\":\"du5OecQa\",\"en-us_index.md\":\"BiPmfrlN\",\"en-us_reward_donor.md\":\"CFQu67rx\",\"en-us_reward_reward.md\":\"DtUfFX7-\",\"guide_cases.md\":\"CVhR7WpZ\",\"guide_changelog.md\":\"Cuc-ZOrl\",\"guide_cli-templates.md\":\"CjvCMsRJ\",\"guide_common-problems.md\":\"DbBMHfw2\",\"guide_consultation.md\":\"BLRMRi4o\",\"guide_custom-theme.md\":\"1nmxOJQd\",\"guide_introduction.md\":\"DvJU-z7D\",\"guide_join-group.md\":\"CGl14Eqc\",\"guide_locale.md\":\"CgE__xv0\",\"guide_quick-use.md\":\"BZt0nmeU\",\"guide_typography.md\":\"IvRl_D1k\",\"index.md\":\"DU4EjyMg\",\"reward_donor.md\":\"DeOBN5Sq\",\"reward_reward.md\":\"CfPFqJkK\",\"reward_sponsor.md\":\"C0P6i09I\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Wot UI\",\"description\":\"一个参照wot-design打造的uni-app组件库\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"lastUpdated\":{\"text\":\"最后更新\"},\"editLink\":{\"pattern\":\"https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path\",\"text\":\"为此页提供修改建议\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Moonofweisheng/wot-design-uni\"},{\"icon\":{\"svg\":\"<svg t=\\\"1692699544299\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"4184\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#6D6D72\\\" p-id=\\\"4185\\\"></path></svg>\"},\"link\":\"https://gitee.com/wot-design-uni/wot-design-uni\",\"ariaLabel\":\"Gitee\"},{\"icon\":{\"svg\":\"<svg t=\\\"1694688365239\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"4048\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z\\\" p-id=\\\"4049\\\" fill=\\\"#6D6D72\\\"></path></svg>\"},\"link\":\"/guide/join-group\",\"ariaLabel\":\"QQ\"},{\"icon\":{\"svg\":\"<svg t=\\\"1758594913114\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1316 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"5329\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z\\\" fill=\\\"#1E80FF\\\" p-id=\\\"5330\\\"></path></svg>\"},\"link\":\"https://juejin.cn/user/26044011388510/posts\"}],\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"A74X2RFXSU\",\"apiKey\":\"6961856d63f5181bf71cb4fa3e4398d2\",\"indexName\":\"wot-design-uni2\"}},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-present weisheng\"}},\"locales\":{\"root\":{\"label\":\"简体中文\",\"lang\":\"zh-CN\",\"description\":\"一个参照wot-design打造的uni-app组件库\",\"themeConfig\":{\"lastUpdated\":{\"text\":\"最后更新\"},\"editLink\":{\"pattern\":\"https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path\",\"text\":\"为此页提供修改建议\"},\"nav\":[{\"text\":\"指南\",\"activeMatch\":\"/guide/\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/quick-use\"},{\"text\":\"脚手架与模板\",\"link\":\"/guide/cli-templates\"},{\"text\":\"咨询服务\",\"link\":\"/guide/consultation\"},{\"text\":\"定制主题\",\"link\":\"/guide/custom-theme\"},{\"text\":\"常见问题\",\"link\":\"/guide/common-problems\"},{\"text\":\"国际化\",\"link\":\"/guide/locale\"},{\"text\":\"更新日志\",\"link\":\"/guide/changelog\"},{\"text\":\"⭐ 案例\",\"link\":\"/guide/cases\"},{\"text\":\"加群沟通\",\"link\":\"/guide/join-group\"}]},{\"text\":\"组件\",\"activeMatch\":\"/component/\",\"items\":[{\"text\":\"基础组件\",\"link\":\"/component/button\"},{\"text\":\"导航组件\",\"link\":\"/component/pagination\"},{\"text\":\"数据输入\",\"link\":\"/component/calendar\"},{\"text\":\"反馈组件\",\"link\":\"/component/action-sheet\"},{\"text\":\"数据展示\",\"link\":\"/component/badge\"}]},{\"text\":\"🥤一杯咖啡\",\"link\":\"/reward/reward\",\"activeMatch\":\"/reward/\"},{\"text\":\"博客\",\"link\":\"https://blog.wot-ui.cn/\"},{\"text\":\"模板\",\"items\":[{\"text\":\"快速上手模板 wot-starter\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"vitesse-uni-app\",\"link\":\"https://vitesse-docs.netlify.app/\"},{\"text\":\"wot-starter-retail\",\"link\":\"https://github.com/wot-ui/wot-starter-retail\"},{\"text\":\"unibest\",\"link\":\"https://unibest.tech/\"}]},{\"text\":\"资源\",\"items\":[{\"text\":\"快速上手模板\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"VS Code 代码提示插件\",\"link\":\"https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense\"},{\"text\":\"Vue3 uni-app路由库\",\"link\":\"https://moonofweisheng.github.io/uni-mini-router/\"},{\"text\":\"多平台小程序CI工具\",\"link\":\"https://github.com/Moonofweisheng/uni-mini-ci\"},{\"text\":\"Uni Helper\",\"link\":\"https://uni-helper.js.org/\"},{\"text\":\"uni-ku\",\"link\":\"https://github.com/uni-ku\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/quick-use\"},{\"text\":\"脚手架与模板\",\"link\":\"/guide/cli-templates\"},{\"text\":\"咨询服务\",\"link\":\"/guide/consultation\"},{\"text\":\"定制主题\",\"link\":\"/guide/custom-theme\"},{\"text\":\"国际化\",\"link\":\"/guide/locale\"},{\"text\":\"常见问题\",\"link\":\"/guide/common-problems\"},{\"text\":\"更新日志\",\"link\":\"/guide/changelog\"},{\"text\":\"⭐ 案例\",\"link\":\"/guide/cases\"},{\"text\":\"加群沟通\",\"link\":\"/guide/join-group\"}],\"/reward/\":[{\"text\":\"🥤一杯咖啡\",\"link\":\"/reward/reward\"},{\"text\":\"榜上有名\",\"link\":\"/reward/donor\"},{\"text\":\"成为赞助者\",\"link\":\"/reward/sponsor\"}],\"/component/\":[{\"text\":\"基础\",\"collapsed\":false,\"items\":[{\"link\":\"/component/button\",\"text\":\"Button 按钮\"},{\"link\":\"/component/icon\",\"text\":\"Icon 图标\"},{\"link\":\"/component/layout\",\"text\":\"Layout 布局\"},{\"link\":\"/component/config-provider\",\"text\":\"ConfigProvider 全局配置\"},{\"link\":\"/component/popup\",\"text\":\"Popup 弹出层\"},{\"link\":\"/component/resize\",\"text\":\"Resize 监听元素尺寸变化\"},{\"link\":\"/component/transition\",\"text\":\"Transition 动画\"},{\"link\":\"/component/fab\",\"text\":\"Fab 悬浮按钮\"},{\"link\":\"/component/text\",\"text\":\"Text 文本\"},{\"link\":\"/component/root-portal\",\"text\":\"RootPortal 根节点\"}]},{\"text\":\"导航\",\"collapsed\":false,\"items\":[{\"link\":\"/component/pagination\",\"text\":\"Pagination 分页\"},{\"link\":\"/component/popover\",\"text\":\"Popover 气泡\"},{\"link\":\"/component/tabs\",\"text\":\"Tabs 标签页\"},{\"link\":\"/component/segmented\",\"text\":\"Segmented 分段器\"},{\"link\":\"/component/tabbar\",\"text\":\"Tabbar 标签栏\"},{\"link\":\"/component/navbar\",\"text\":\"Navbar 导航栏\"},{\"link\":\"/component/sidebar\",\"text\":\"Sidebar 侧边栏\"},{\"link\":\"/component/backtop\",\"text\":\"Backtop 回到顶部\"},{\"link\":\"/component/index-bar\",\"text\":\"IndexBar 索引栏\"}]},{\"text\":\"数据输入\",\"collapsed\":false,\"items\":[{\"link\":\"/component/calendar\",\"text\":\"Calendar 日历选择器\"},{\"link\":\"/component/calendar-view\",\"text\":\"CalendarView 日历面板\"},{\"link\":\"/component/checkbox\",\"text\":\"Checkbox 复选框\"},{\"link\":\"/component/col-picker\",\"text\":\"ColPicker 多列选择器\"},{\"link\":\"/component/datetime-picker\",\"text\":\"DatetimePicker 时间选择器\"},{\"link\":\"/component/datetime-picker-view\",\"text\":\"DatetimePickerView 时间选择器视图\"},{\"link\":\"/component/form\",\"text\":\"Form 表单\"},{\"link\":\"/component/input\",\"text\":\"Input 输入框\"},{\"link\":\"/component/textarea\",\"text\":\"Textarea 文本域\"},{\"link\":\"/component/input-number\",\"text\":\"InputNumber 计数器\"},{\"link\":\"/component/picker\",\"text\":\"Picker 选择器\"},{\"link\":\"/component/picker-view\",\"text\":\"PickerView 选择器视图\"},{\"link\":\"/component/radio\",\"text\":\"Radio 单选框\"},{\"link\":\"/component/rate\",\"text\":\"Rate 评分\"},{\"link\":\"/component/search\",\"text\":\"Search 搜索框\"},{\"link\":\"/component/select-picker\",\"text\":\"SelectPicker 单复选选择器\"},{\"link\":\"/component/slider\",\"text\":\"Slider 滑块\"},{\"link\":\"/component/switch\",\"text\":\"Switch 开关\"},{\"link\":\"/component/upload\",\"text\":\"Upload 上传\"},{\"link\":\"/component/password-input\",\"text\":\"PasswordInput 密码输入框\"},{\"link\":\"/component/signature\",\"text\":\"Signature 签名\"}]},{\"text\":\"反馈\",\"collapsed\":false,\"items\":[{\"link\":\"/component/action-sheet\",\"text\":\"ActionSheet 动作面板\"},{\"link\":\"/component/drop-menu\",\"text\":\"DropMenu 下拉菜单\"},{\"link\":\"/component/floating-panel\",\"text\":\"FloatingPanel 浮动面板\"},{\"link\":\"/component/loading\",\"text\":\"Loading 加载\"},{\"link\":\"/component/message-box\",\"text\":\"MessageBox 弹框\"},{\"link\":\"/component/notice-bar\",\"text\":\"NoticeBar 通知栏\"},{\"link\":\"/component/overlay\",\"text\":\"Overlay 遮罩层\"},{\"link\":\"/component/progress\",\"text\":\"Progress 进度条\"},{\"link\":\"/component/circle\",\"text\":\"Circle 环形进度条\"},{\"link\":\"/component/sort-button\",\"text\":\"SortButton 排序按钮\"},{\"link\":\"/component/status-tip\",\"text\":\"StatusTip 缺省提示\"},{\"link\":\"/component/swipe-action\",\"text\":\"SwipeAction 滑动操作\"},{\"link\":\"/component/toast\",\"text\":\"Toast 轻提示\"},{\"link\":\"/component/notify\",\"text\":\"Notify 消息通知\"},{\"link\":\"/component/tooltip\",\"text\":\"Tooltip 文字提示\"},{\"link\":\"/component/count-down\",\"text\":\"CountDown 倒计时\"},{\"link\":\"/component/count-to\",\"text\":\"CountTo 数字滚动\"},{\"link\":\"/component/keyboard\",\"text\":\"Keyboard 虚拟键盘\"},{\"link\":\"/component/number-keyboard\",\"text\":\"NumberKeyboard 数字键盘\"}]},{\"text\":\"数据展示\",\"collapsed\":false,\"items\":[{\"link\":\"/component/badge\",\"text\":\"Badge 徽标\"},{\"link\":\"/component/card\",\"text\":\"Card 卡片\"},{\"link\":\"/component/cell\",\"text\":\"Cell 单元格\"},{\"link\":\"/component/collapse\",\"text\":\"Collapse 折叠面板\"},{\"link\":\"/component/curtain\",\"text\":\"Curtain 幕帘\"},{\"link\":\"/component/divider\",\"text\":\"Divider 分割线\"},{\"link\":\"/component/gap\",\"text\":\"Gap 间隔槽\"},{\"link\":\"/component/img\",\"text\":\"Img 图片\"},{\"link\":\"/component/img-cropper\",\"text\":\"ImgCropper 图片裁剪\"},{\"link\":\"/component/grid\",\"text\":\"Grid 宫格\"},{\"link\":\"/component/loadmore\",\"text\":\"Loadmore 加载更多\"},{\"link\":\"/component/skeleton\",\"text\":\"Skeleton 骨架屏\"},{\"link\":\"/component/steps\",\"text\":\"Steps 步骤条\"},{\"link\":\"/component/sticky\",\"text\":\"Sticky 粘性布局\"},{\"link\":\"/component/tag\",\"text\":\"Tag 标签\"},{\"link\":\"/component/watermark\",\"text\":\"Watermark 水印\"},{\"link\":\"/component/swiper\",\"text\":\"Swiper 轮播图\"},{\"link\":\"/component/table\",\"text\":\"Table 表格\"}]},{\"text\":\"组合式API\",\"items\":[{\"text\":\"useUpload\",\"link\":\"/component/use-upload\"},{\"text\":\"useCountDown\",\"link\":\"/component/use-count-down\"},{\"text\":\"useToast\",\"link\":\"/component/use-toast\"},{\"text\":\"useMessage\",\"link\":\"/component/use-message\"}]}]}}},\"en-US\":{\"label\":\"English\",\"lang\":\"en-US\",\"description\":\"A uni-app component library based on wot-design\",\"themeConfig\":{\"lastUpdated\":{\"text\":\"Last Updated\"},\"editLink\":{\"pattern\":\"https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"nav\":[{\"text\":\"Guide\",\"activeMatch\":\"/guide/\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/en-US/guide/introduction\"},{\"text\":\"Quick Start\",\"link\":\"/en-US/guide/quick-use\"},{\"text\":\"CLI & Templates\",\"link\":\"/en-US/guide/cli-templates\"},{\"text\":\"Custom Theme\",\"link\":\"/en-US/guide/custom-theme\"},{\"text\":\"Common Problems\",\"link\":\"/en-US/guide/common-problems\"},{\"text\":\"Internationalization\",\"link\":\"/en-US/guide/locale\"},{\"text\":\"Changelog\",\"link\":\"/en-US/guide/changelog\"},{\"text\":\"⭐ Cases\",\"link\":\"/en-US/guide/cases\"},{\"text\":\"Join Group\",\"link\":\"/en-US/guide/join-group\"}]},{\"text\":\"Components\",\"activeMatch\":\"/component/\",\"items\":[{\"text\":\"Basic Components\",\"link\":\"/en-US/component/button\"},{\"text\":\"Navigation\",\"link\":\"/en-US/component/pagination\"},{\"text\":\"Data Input\",\"link\":\"/en-US/component/calendar\"},{\"text\":\"Feedback\",\"link\":\"/en-US/component/action-sheet\"},{\"text\":\"Data Display\",\"link\":\"/en-US/component/badge\"}]},{\"text\":\"🥤Buy Me a Coffee\",\"link\":\"/en-US/reward/reward\",\"activeMatch\":\"/reward/\"},{\"text\":\"Blog\",\"link\":\"https://blog.wot-ui.cn/\"},{\"text\":\"Templates\",\"items\":[{\"text\":\"Quick Start Template wot-starter\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"vitesse-uni-app\",\"link\":\"https://vitesse-docs.netlify.app/\"},{\"text\":\"wot-starter-retail\",\"link\":\"https://github.com/wot-ui/wot-starter-retail\"},{\"text\":\"unibest\",\"link\":\"https://unibest.tech/\"}]},{\"text\":\"Resources\",\"items\":[{\"text\":\"Quick Start Template\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"VS Code IntelliSense Plugin\",\"link\":\"https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense\"},{\"text\":\"Vue3 uni-app Router\",\"link\":\"https://moonofweisheng.github.io/uni-mini-router/\"},{\"text\":\"Mini Program CI Tool\",\"link\":\"https://github.com/Moonofweisheng/uni-mini-ci\"},{\"text\":\"Uni Helper\",\"link\":\"https://uni-helper.js.org/\"},{\"text\":\"uni-ku\",\"link\":\"https://github.com/uni-ku\"}]}],\"sidebar\":{\"/en-US/guide/\":[{\"text\":\"Introduction\",\"link\":\"/en-US/guide/introduction\"},{\"text\":\"Quick Start\",\"link\":\"/en-US/guide/quick-use\"},{\"text\":\"CLI & Templates\",\"link\":\"/en-US/guide/cli-templates\"},{\"text\":\"Custom Theme\",\"link\":\"/en-US/guide/custom-theme\"},{\"text\":\"Internationalization\",\"link\":\"/en-US/guide/locale\"},{\"text\":\"Common Problems\",\"link\":\"/en-US/guide/common-problems\"},{\"text\":\"Changelog\",\"link\":\"/en-US/guide/changelog\"},{\"text\":\"⭐ Cases\",\"link\":\"/en-US/guide/cases\"},{\"text\":\"Join Group\",\"link\":\"/en-US/guide/join-group\"}],\"/en-US/reward/\":[{\"text\":\"🥤Buy Me a Coffee\",\"link\":\"/en-US/reward/reward\"},{\"text\":\"Donor List\",\"link\":\"/en-US/reward/donor\"},{\"text\":\"Sponsor\",\"link\":\"/reward/sponsor\"}],\"/en-US/component/\":[{\"text\":\"Basic\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/button\",\"text\":\"Button\"},{\"link\":\"/en-US/component/icon\",\"text\":\"Icon\"},{\"link\":\"/en-US/component/layout\",\"text\":\"Layout\"},{\"link\":\"/en-US/component/config-provider\",\"text\":\"ConfigProvider\"},{\"link\":\"/en-US/component/popup\",\"text\":\"Popup\"},{\"link\":\"/en-US/component/resize\",\"text\":\"Resize\"},{\"link\":\"/en-US/component/transition\",\"text\":\"Transition\"},{\"link\":\"/en-US/component/fab\",\"text\":\"Fab\"},{\"link\":\"/en-US/component/text\",\"text\":\"Text\"},{\"link\":\"/en-US/component/root-portal\",\"text\":\"RootPortal\"}]},{\"text\":\"Navigation\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/pagination\",\"text\":\"Pagination\"},{\"link\":\"/en-US/component/popover\",\"text\":\"Popover\"},{\"link\":\"/en-US/component/tabs\",\"text\":\"Tabs\"},{\"link\":\"/en-US/component/segmented\",\"text\":\"Segmented\"},{\"link\":\"/en-US/component/tabbar\",\"text\":\"Tabbar\"},{\"link\":\"/en-US/component/navbar\",\"text\":\"Navbar\"},{\"link\":\"/en-US/component/sidebar\",\"text\":\"Sidebar\"},{\"link\":\"/en-US/component/backtop\",\"text\":\"Backtop\"},{\"link\":\"/en-US/component/index-bar\",\"text\":\"IndexBar\"}]},{\"text\":\"Data Input\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/calendar\",\"text\":\"Calendar\"},{\"link\":\"/en-US/component/calendar-view\",\"text\":\"CalendarView\"},{\"link\":\"/en-US/component/checkbox\",\"text\":\"Checkbox\"},{\"link\":\"/en-US/component/col-picker\",\"text\":\"ColPicker\"},{\"link\":\"/en-US/component/datetime-picker\",\"text\":\"DatetimePicker\"},{\"link\":\"/en-US/component/datetime-picker-view\",\"text\":\"DatetimePickerView\"},{\"link\":\"/en-US/component/form\",\"text\":\"Form\"},{\"link\":\"/en-US/component/input\",\"text\":\"Input\"},{\"link\":\"/en-US/component/textarea\",\"text\":\"Textarea\"},{\"link\":\"/en-US/component/input-number\",\"text\":\"InputNumber\"},{\"link\":\"/en-US/component/picker\",\"text\":\"Picker\"},{\"link\":\"/en-US/component/picker-view\",\"text\":\"PickerView\"},{\"link\":\"/en-US/component/radio\",\"text\":\"Radio\"},{\"link\":\"/en-US/component/rate\",\"text\":\"Rate\"},{\"link\":\"/en-US/component/search\",\"text\":\"Search\"},{\"link\":\"/en-US/component/select-picker\",\"text\":\"SelectPicker\"},{\"link\":\"/en-US/component/slider\",\"text\":\"Slider\"},{\"link\":\"/en-US/component/switch\",\"text\":\"Switch\"},{\"link\":\"/en-US/component/upload\",\"text\":\"Upload\"},{\"link\":\"/en-US/component/password-input\",\"text\":\"PasswordInput\"},{\"link\":\"/en-US/component/signature\",\"text\":\"Signature\"}]},{\"text\":\"Feedback\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/action-sheet\",\"text\":\"ActionSheet\"},{\"link\":\"/en-US/component/drop-menu\",\"text\":\"DropMenu\"},{\"link\":\"/en-US/component/floating-panel\",\"text\":\"FloatingPanel\"},{\"link\":\"/en-US/component/loading\",\"text\":\"Loading\"},{\"link\":\"/en-US/component/message-box\",\"text\":\"MessageBox\"},{\"link\":\"/en-US/component/notice-bar\",\"text\":\"NoticeBar\"},{\"link\":\"/en-US/component/overlay\",\"text\":\"Overlay\"},{\"link\":\"/en-US/component/progress\",\"text\":\"Progress\"},{\"link\":\"/en-US/component/circle\",\"text\":\"Circle\"},{\"link\":\"/en-US/component/sort-button\",\"text\":\"SortButton\"},{\"link\":\"/en-US/component/status-tip\",\"text\":\"StatusTip\"},{\"link\":\"/en-US/component/swipe-action\",\"text\":\"SwipeAction\"},{\"link\":\"/en-US/component/toast\",\"text\":\"Toast\"},{\"link\":\"/en-US/component/notify\",\"text\":\"Notify\"},{\"link\":\"/en-US/component/tooltip\",\"text\":\"Tooltip\"},{\"link\":\"/en-US/component/count-down\",\"text\":\"CountDown\"},{\"link\":\"/en-US/component/count-to\",\"text\":\"CountTo\"},{\"link\":\"/en-US/component/keyboard\",\"text\":\"Keyboard\"},{\"link\":\"/en-US/component/number-keyboard\",\"text\":\"NumberKeyboard\"}]},{\"text\":\"Data Display\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/badge\",\"text\":\"Badge\"},{\"link\":\"/en-US/component/card\",\"text\":\"Card\"},{\"link\":\"/en-US/component/cell\",\"text\":\"Cell\"},{\"link\":\"/en-US/component/collapse\",\"text\":\"Collapse\"},{\"link\":\"/en-US/component/curtain\",\"text\":\"Curtain\"},{\"link\":\"/en-US/component/divider\",\"text\":\"Divider\"},{\"link\":\"/en-US/component/gap\",\"text\":\"Gap\"},{\"link\":\"/en-US/component/img\",\"text\":\"Img\"},{\"link\":\"/en-US/component/img-cropper\",\"text\":\"ImgCropper\"},{\"link\":\"/en-US/component/grid\",\"text\":\"Grid\"},{\"link\":\"/en-US/component/loadmore\",\"text\":\"Loadmore\"},{\"link\":\"/en-US/component/skeleton\",\"text\":\"Skeleton\"},{\"link\":\"/en-US/component/steps\",\"text\":\"Steps\"},{\"link\":\"/en-US/component/sticky\",\"text\":\"Sticky\"},{\"link\":\"/en-US/component/tag\",\"text\":\"Tag\"},{\"link\":\"/en-US/component/watermark\",\"text\":\"Watermark\"},{\"link\":\"/en-US/component/swiper\",\"text\":\"Swiper\"},{\"link\":\"/en-US/component/table\",\"text\":\"Table\"}]},{\"text\":\"Composables\",\"items\":[{\"text\":\"useUpload\",\"link\":\"/en-US/component/use-upload\"},{\"text\":\"useCountDown\",\"link\":\"/en-US/component/use-count-down\"},{\"text\":\"useToast\",\"link\":\"/en-US/component/use-toast\"},{\"text\":\"useMessage\",\"link\":\"/en-US/component/use-message\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink