blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity
vant-weapp/assets/iframe-router.84ac741c.js
landluck 40a85e2e2f Updates
2024-01-16 12:10:05 +08:00

3456 lines
860 KiB
JavaScript
Raw Blame History

import{o as e,a as p,u as d}from"./vue-libs.a9ab666b.js";const b=function(){const s=document.createElement("link").relList;if(s&&s.supports&&s.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))l(t);new MutationObserver(t=>{for(const c of t)if(c.type==="childList")for(const r of c.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&l(r)}).observe(document,{childList:!0,subtree:!0});function n(t){const c={};return t.integrity&&(c.integrity=t.integrity),t.referrerpolicy&&(c.referrerPolicy=t.referrerpolicy),t.crossorigin==="use-credentials"?c.credentials="include":t.crossorigin==="anonymous"?c.credentials="omit":c.credentials="same-origin",c}function l(t){if(t.ep)return;t.ep=!0;const c=n(t);fetch(t.href,c)}};b();var Un=(a,s)=>{const n=a.__vccOpts||a;for(const[l,t]of s)n[l]=t;return n};const v={class:"van-doc-markdown-body"},q=d('<h1>\u66F4\u65B0\u65E5\u5FD7</h1><div class="van-doc-card"><h3 id="v1.11.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.11.2...v1.11.3" target="_blank">v1.11.3</a></h3><p><code>2024-01-16</code></p><p><strong>Bug Fixes</strong></p><ul><li>Cascader: fix title slot inoperative <a href="https://github.com/youzan/vant-weapp/issues/5676" target="_blank">#5676</a></li><li>Transition: fix transition event sequence <a href="https://github.com/youzan/vant-weapp/issues/5699" target="_blank">#5699</a></li></ul><p><strong>Feature</strong></p><ul><li>Calendar\u3001ActionSheet\u3001Dialog\u3001ShareSheet: add root portal prop <a href="https://github.com/youzan/vant-weapp/issues/5680" target="_blank">#5680</a></li><li>goods-action-button: add custom-style prop support <a href="https://github.com/youzan/vant-weapp/issues/5659" target="_blank">#5659</a></li><li>Upload: support mix mediaType #5690 <a href="https://github.com/youzan/vant-weapp/issues/5690" target="_blank">#5690</a></li></ul></div><div class="van-doc-card"><h3 id="v1.11.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.11.1...v1.11.2" target="_blank">v1.11.2</a></h3><p><code>2023-12-05</code></p><p><strong>Bug Fixes</strong></p><ul><li>dialog/goods-action-button: \u4FEE\u590D dialog\u3001goods-action-button \u7EC4\u4EF6\u7F3A\u5C11 getRealTimePhoneNumber \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/5633" target="_blank">#5633</a></li><li>upload: \u4FEE\u590D\u4F01\u4E1A\u5FAE\u4FE1\u4E0B\u56FE\u7247\u65E0\u6CD5\u4E0A\u4F20 <a href="https://github.com/youzan/vant-weapp/issues/5581" target="_blank">#5581</a></li><li>calendar/input/textarea/popup: \u4FEE\u590D skyline \u6A21\u5F0F\u4E0B\u7EC4\u4EF6\u62A5\u9519\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5650" target="_blank">#5650</a></li></ul><p><strong>Document</strong></p><ul><li>area: \u8BA2\u6B63 columns-num \u53EA\u652F\u6301 number \u7C7B\u578B. <a href="https://github.com/youzan/vant-weapp/issues/5631" target="_blank">#5631</a></li></ul></div><div class="van-doc-card"><h3 id="v1.11.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.11.0...v1.11.1" target="_blank">v1.11.1</a></h3><p><code>2023-10-10</code></p><p><strong>Feature</strong></p><ul><li>icon: update @vant/icon to v3.0.1 <a href="https://github.com/youzan/vant-weapp/issues/5583" target="_blank">#5583</a></li></ul></div><div class="van-doc-card"><h3 id="v1.11.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.25...v1.11.0" target="_blank">v1.11.0</a></h3><p><code>2023-09-18</code></p><p><strong>Bug Fixes</strong></p><ul><li>calendar: \u4FEE\u590D calendar \u8C03\u7528 reset \u65B9\u6CD5\u65F6\u4E22\u5931\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/issues/5546" target="_blank">#5546</a></li><li>van-notice-bar: \u4FEE\u590D delay \u5C5E\u6027\u4E0D\u751F\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5547" target="_blank">#5547</a></li></ul><p><strong>Document</strong></p><ul><li>skeleton: \u4FEE\u590D custom class \u6587\u6863\u7F3A\u5931 <a href="https://github.com/youzan/vant-weapp/issues/5548" target="_blank">#5548</a></li></ul><p><strong>Feature</strong></p><ul><li>icon: \u5347\u7EA7 @vant/icon \u5230 <a href="https://github.com/youzan/vant/blob/main/packages/vant-icons/CHANGELOG.md" target="_blank">3.0.0</a> <a href="https://github.com/youzan/vant-weapp/issues/5561" target="_blank">#5561</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.25" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.24...v1.10.25" target="_blank">v1.10.25</a></h3><p><code>2023-08-30</code></p><p><strong>Document</strong></p><ul><li>slider: \u4FEE\u590D use-button-slot \u6587\u6863\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/issues/5534" target="_blank">#5534</a></li></ul><p><strong>Feature</strong></p><ul><li>button: \u589E\u52A0 button-id \u5C5E\u6027 \u548C agreePrivacyAuthorization \u4E8B\u4EF6\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5533" target="_blank">#5533</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.24" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.23...v1.10.24" target="_blank">v1.10.24</a></h3><p><code>2023-08-25</code></p><p><strong>Bug Fixes</strong></p><ul><li>calendar: \u589E\u52A0 limit date \u76D1\u542C <a href="https://github.com/youzan/vant-weapp/issues/5520" target="_blank">#5520</a></li></ul><p><strong>Feature</strong></p><ul><li>button: \u589E\u52A0 agreePrivacyAuthorization open-type \u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5527" target="_blank">#5527</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.23" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.22...v1.10.23" target="_blank">v1.10.23</a></h3><p><code>2023-07-28</code></p><p><strong>Feature</strong></p><ul><li>dialog: \u589E\u52A0 confirm/cancel button slot \u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5502" target="_blank">#5502</a></li><li>Search: \u589E\u52A0 cursor-spacing \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5498" target="_blank">#5498</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.22" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.21...v1.10.22" target="_blank">v1.10.22</a></h3><p><code>2023-07-24</code></p><p><strong>Bug Fixes</strong></p><ul><li>field: \u4FEE\u590D error message \u5C45\u4E2D\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/issues/5482" target="_blank">#5482</a></li><li>GoodsAction: \u4FEE\u590D\u81EA\u5B9A\u4E49 icon \u65F6\u6837\u5F0F\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/issues/5496" target="_blank">#5496</a></li><li>sticky: \u4FEE\u590D\u6E32\u67D3\u4F4D\u7F6E\u9519\u8BEF\u518D transition \u4E2D <a href="https://github.com/youzan/vant-weapp/issues/5483" target="_blank">#5483</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.21" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.20...v1.10.21" target="_blank">v1.10.21</a></h3><p><code>2023-07-10</code></p><p><strong>Bug Fixes</strong></p><ul><li>uploader: \u4FEE\u590D\u65E0\u6CD5\u5524\u8D77\u9009\u62E9\u56FE\u7247\u6846\u5728 PC \u4E0B <a href="https://github.com/youzan/vant-weapp/issues/5477" target="_blank">#5477</a></li></ul><p><strong>Feature</strong></p><ul><li>button: \u589E\u52A0 getRealtimePhoneNumber \u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5471" target="_blank">#5471</a></li><li>calendar: \u589E\u52A0 default-date \u4E3A null \u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5395" target="_blank">#5395</a></li><li>dialog: \u589E\u52A0\u786E\u8BA4/\u53D6\u6D88\u6309\u94AE\u5916\u90E8\u6837\u5F0F\u7C7B\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5478" target="_blank">#5478</a></li><li>field: \u589E\u52A0\u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5476" target="_blank">#5476</a></li><li>field: \u6269\u5927 input \u70B9\u51FB\u533A\u57DF\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5479" target="_blank">#5479</a></li><li>Upload: \u589E\u52A0 videoFit \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5475" target="_blank">#5475</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.20" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.19...v1.10.20" target="_blank">v1.10.20</a></h3><p><code>2023-07-03</code></p><p><strong>Bug Fixes</strong></p><ul><li>calendar: \u4FEE\u590D\u65E0\u6CD5\u9009\u62E9\u540C\u4E00\u5929\u5728 range \u6A21\u5F0F\u4E0B <a href="https://github.com/youzan/vant-weapp/issues/5451" target="_blank">#5451</a></li><li>slider: \u4FEE\u590D\u5C0F\u6570\u7CBE\u5EA6\u4E22\u5931\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5444" target="_blank">#5444</a></li></ul><p><strong>Document</strong></p><ul><li>add @inottn and @zhousg to core team <a href="https://github.com/youzan/vant-weapp/issues/5453" target="_blank">#5453</a></li><li>popup: \u4FEE\u590D\u6587\u6863\u7F3A\u5931 close-icon-position \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/5389" target="_blank">#5389</a></li><li>dialog: \u4FEE\u590D\u793A\u4F8B\u4EE3\u7801\u9519\u8BEF\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/5389" target="_blank">#5389</a></li></ul><p><strong>Feature</strong></p><ul><li>goods-action-icon: \u589E\u52A0 size \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/5457" target="_blank">#5457</a></li><li>goods-action-icon: \u589E\u52A0 info-class \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B <a href="https://github.com/youzan/vant-weapp/issues/5457" target="_blank">#5457</a></li><li>icon: \u589E\u52A0 info-class \u81EA\u5B9A\u4E49\u6837\u5F0F\u7C7B <a href="https://github.com/youzan/vant-weapp/issues/5458" target="_blank">#5458</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.19" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.18...v1.10.19" target="_blank">v1.10.19</a></h3><p><code>2023-05-19</code></p><p><strong>Bug Fixes</strong></p><ul><li>calendar: \u4FEE\u590D\u65E5\u5386\u6708\u4EFD\u6807\u9898\u4E0D\u540C\u6B65\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/5381" target="_blank">#5381</a></li><li>cascader: \u4FEE\u590D\u9009\u4E2D\u9879\u76EE\u7F3A\u5931\u548C fieldNames \u4E0D\u751F\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/5185" target="_blank">#5182</a></li><li>cascader: \u4FEE\u590D\u5F02\u6B65\u6570\u636E\u89C6\u56FE\u4E0D\u66F4\u65B0\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/5380" target="_blank">#5380</a></li><li>tab: \u4FEE\u590D\u5F02\u6B65\u6570\u636E\u60C5\u51B5\u9009\u4E2D\u7EBF\u5411\u53F3\u504F\u79FB\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5135" target="_blank">#5135</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.18" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.17...v1.10.18" target="_blank">v1.10.18</a></h3><p><code>2023-05-08</code></p><p><strong>Bug Fixes</strong></p><ul><li>steps: \u4FEE\u590D\u5728\u7AD6\u5411\u6A21\u5F0F\u4E0B icon \u88AB\u8986\u76D6\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5329" target="_blank">#5329</a></li><li>tabs: \u4FEE\u590D tab \u8F83\u591A\u65F6\uFF0Cslot \u65E0\u6CD5\u6B63\u5E38\u663E\u793A\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4700" target="_blank">#4700</a></li></ul><p><strong>Feature</strong></p><ul><li>field: input/change \u4E8B\u4EF6\u589E\u52A0 callback \u53C2\u6570 <a href="https://github.com/youzan/vant-weapp/issues/5345" target="_blank">#5345</a></li><li>goods-action: goods-action-button \u589E\u52A0 size \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/5347" target="_blank">#5347</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.17" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.16...v1.10.17" target="_blank">v1.10.17</a></h3><p><code>2023-05-04</code></p><p><strong>Bug Fixes</strong></p><ul><li>icon: \u4FEE\u590D\u5B9A\u4F4D\u6837\u5F0F\u9519\u8BEF\u5728\u5916\u90E8\u4F20\u5165 custom-class \u7684\u60C5\u51B5\u4E0B <a href="https://github.com/youzan/vant-weapp/issues/5335" target="_blank">#5335</a></li><li>tab: \u4FEE\u590D tab \u88AB\u5D4C\u5957\u65F6\uFF0C\u5185\u90E8 tab \u6837\u5F0F\u9519\u8BEF\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5200" target="_blank">#5200</a></li><li>Uploader: \u66FF\u6362 wx.chooseImage \u4E3A wx.chooseMedia \u89E3\u51B3\u9009\u62E9\u56FE\u7247\u9875\u9762\u5237\u65B0\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5343" target="_blank">#5343</a></li><li>van-field: \u4FEE\u590D\u5B89\u5353\u8BBE\u5907\u4E0B textarea maxlength \u9650\u5236\u4E0D\u751F\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5308" target="_blank">#5308</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.16" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.15...v1.10.16" target="_blank">v1.10.16</a></h3><p><code>2023-04-18</code></p><p><strong>Bug Fixes</strong></p><ul><li>icon: \u4FEE\u590D\u663E\u793A\u5F02\u5E38\u5728\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u6A21\u5F0F\u4E0B <a href="https://github.com/youzan/vant-weapp/issues/5320" target="_blank">#5320</a></li><li>stepper: \u4FEE\u590D\u6700\u5927\u503C\u5728\u8BBE\u7F6E\u5B57\u7B26\u4E32\u4E0B\u529F\u80FD\u9519\u8BEF\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5295" target="_blank">#5295</a></li><li>tabs: \u4FEE\u590D\u5728\u90E8\u5206\u8BBE\u5907\u4E0B info \u6837\u5F0F\u9519\u8BEF\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5318" target="_blank">#5318</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.15" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.14...v1.10.15" target="_blank">v1.10.15</a></h3><p><code>2023-04-03</code></p><p><strong>Bug Fixes</strong></p><ul><li>calendar: \u4FEE\u590D\u5728 allow-same-day \u548C \u4E0D\u663E\u793A confirm \u6309\u94AE\u65F6 confirm \u4E22\u5931\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/db89819f9e3537435ac5fcc52f680affd9255c6b" target="_blank">db8981</a></li></ul><p><strong>Feature</strong></p><ul><li>van-goods-action-icon: \u589E\u52A0 color \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/commit/4fd22f0a6b6b5ebcc37807ed3c85c3b40bd60e0c" target="_blank">4fd22f</a></li></ul><p><strong>hotfix</strong></p><ul><li>rate: \u4FEE\u590D\u5728\u8986\u76D6\u534A\u4E2A\u661F\u65F6\u8986\u76D6\u9AD8\u5EA6\u4E0D\u591F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5294" target="_blank">#5294</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.14" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.13...v1.10.14" target="_blank">v1.10.14</a></h3><p><code>2023-02-27</code></p><p><strong>Bug Fixes</strong></p><ul><li>icon: \u4FEE\u590D\u5728\u81EA\u5B9A\u4E49 icon \u65F6\u4E22\u5931 dot \u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/5253" target="_blank">#5253</a></li></ul><p><strong>Document</strong></p><ul><li>\u589E\u52A0 @landluck and @wjw-gavin \u5230\u6838\u5FC3\u56E2\u961F <a href="https://github.com/youzan/vant-weapp/issues/5252" target="_blank">#5252</a></li></ul><p><strong>Feature</strong></p><ul><li>dropdown-item: \u589E\u52A0 root-portal \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5256" target="_blank">#5256</a></li><li>dropdown-menu: \u589E\u52A0 safe-area-tab-bar \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5257" target="_blank">#5257</a></li><li>overlay: \u589E\u52A0 root-portal \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5255" target="_blank">#5255</a></li><li>popup: \u589E\u52A0 root-portal \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5254" target="_blank">#5254</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.13" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.12...v1.10.13" target="_blank">v1.10.13</a></h3><p><code>2023-02-13</code></p><p><strong>Bug Fixes</strong></p><ul><li>calendar: \u4FEE\u590D calendar \u7EC4\u4EF6\u5B89\u5168\u533A\u57DF\u4F20\u53C2\u672A\u4F20\u9012\u7ED9 popup \u7EC4\u4EF6\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/db79570d98537db669730aa66d3fb3932ded4737" target="_blank">db7957</a></li><li>cascader: \u4FEE\u590D cascader \u7EC4\u4EF6 onClickTab \u4E8B\u4EF6\u6CA1\u6709\u540C\u6B65 activeTab \u7684\u503C\u5BFC\u81F4\u9009\u62E9\u5F02\u5E38\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/92ae4a29c0b99aa65be6a71004b795ae2650f37c" target="_blank">92ae4a</a></li><li>stepper: \u4FEE\u590D always-embed \u7533\u660E\u4E24\u6B21\u8B66\u544A\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5231" target="_blank">#5231</a></li><li>stepper: \u4FEE\u590D onblur \u65F6\u5728\u503C\u53D8\u66F4\u7684\u60C5\u51B5\u4E0B change \u4E8B\u4EF6\u6CA1\u6709\u89E6\u53D1 <a href="https://github.com/youzan/vant-weapp/issues/5227" target="_blank">#5227</a></li></ul><p><strong>Feature</strong></p><ul><li>calendar: \u589E\u52A0 min-range \u5C5E\u6027\u652F\u6301\u5728 multiple \u6A21\u5F0F\u4E0B <a href="https://github.com/youzan/vant-weapp/issues/5230" target="_blank">#5230</a></li><li>popup: \u589E\u52A0 safe-area-tab-bar \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5194" target="_blank">#5194</a></li><li>tabbar-item: \u589E\u52A0 url link-type \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5232" target="_blank">#5232</a></li><li>uploader: \u589E\u52A0 showmenu \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5229" target="_blank">#5229</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.12" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.11...v1.10.12" target="_blank">v1.10.12</a></h3><p><code>2023-01-16</code></p><p><strong>Bug Fixes</strong></p><ul><li>calendar: \u4FEE\u590D\u5728 allow-same-day \u60C5\u51B5\u4E0B\u521D\u59CB\u4E0D\u80FD\u9009\u62E9\u540C\u4E00\u5929 <a href="https://github.com/youzan/vant-weapp/issues/5193" target="_blank">#5193</a></li><li>stepper: \u4FEE\u590D\u5728 async change \u60C5\u51B5\u4E0B\u5916\u90E8\u65E0\u6CD5\u66F4\u65B0 input \u503C <a href="https://github.com/youzan/vant-weapp/issues/5191" target="_blank">#5191</a></li></ul><p><strong>Document</strong></p><ul><li>docs(action-sheet): \u4FEE\u590D close-on-click-overlay \u521D\u59CB\u503C\u4E66\u5199\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/commit/b2fabe6b2b72ce1734b9123b00e78a854111d240" target="_blank">b2fabe</a></li></ul><p><strong>Feature</strong></p><ul><li>dropdown-menu: \u589E\u52A0 use-before-toggle \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5190" target="_blank">#5190</a></li><li>field: \u589E\u52A0 extra-event-params \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5184" target="_blank">#5184</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.11" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.10...v1.10.11" target="_blank">v1.10.11</a></h3><p><code>2023-01-03</code></p><p><strong>Bug Fixes</strong></p><ul><li>stepper: \u4FEE\u590D\u663E\u793A\u9519\u8BEF\u7684\u503C\u5728 blur \u7684\u60C5\u51B5\u4E0B <a href="https://github.com/youzan/vant-weapp/issues/5158" target="_blank">#5158</a></li><li>steps: \u4FEE\u590D\u989D\u5916\u7684\u95F4\u8DDD\u5728\u5782\u76F4\u65B9\u5411\u7684\u60C5\u51B5\u4E0B <a href="https://github.com/youzan/vant-weapp/issues/5166" target="_blank">#5166</a></li><li>transition: \u4FEE\u590D enter \u65F6\u95F4\u89E6\u53D1\u591A\u6B21\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5157" target="_blank">#5157</a></li></ul><p><strong>Feature</strong></p><ul><li>image: \u589E\u52A0 webp \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5163" target="_blank">#5163</a></li><li>uploader: \u589E\u52A0 extension \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/commit/a80767e9c1699a9b15fb9d4bb1b552ef3fc5c8dc" target="_blank">a80767</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.10" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.9...v1.10.10" target="_blank">v1.10.10</a></h3><p><code>2022-12-16</code></p><p><strong>Bug Fixes</strong></p><ul><li>dialog: \u4FEE\u590D\u5728\u6CA1\u6709\u5E95\u90E8\u6309\u94AE\u65F6\u5B58\u5728\u989D\u5916\u7684\u767D\u7EBF <a href="https://github.com/youzan/vant-weapp/issues/5141" target="_blank">#5141</a></li><li>dropdown: \u4FEE\u590D\u6587\u6848\u8D85\u51FA\u9650\u5236\u540E\u7BAD\u5934\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5145" target="_blank">#5145</a></li><li>button: \u4FEE\u590D demo \u793A\u4F8B\u7F3A\u5931 button \u7EC4\u4EF6\u5F15\u5165 <a href="https://github.com/youzan/vant-weapp/commit/8ec17cc87da28b9f3caa5293c3710ee927eaa210" target="_blank">8ec17c</a></li><li>search: \u4F18\u5316\u53D6\u6D88\u6309\u94AE\u7684\u70B9\u51FB\u533A\u57DF <a href="https://github.com/youzan/vant-weapp/issues/5148" target="_blank">#5148</a></li><li>uploader: \u4FEE\u590D\u65E0\u6CD5\u9884\u89C8\u89C6\u9891\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5142" target="_blank">#5142</a></li></ul><p><strong>Document</strong></p><ul><li>cascader: \u589E\u52A0 cascader \u6587\u6863\u94FE\u63A5 <a href="https://github.com/youzan/vant-weapp/commit/4bb9e625381dee97fbe2e6d3c1602365ab2c41c5" target="_blank">4bb9e6</a></li><li>uploader: \u4F18\u5316 thumb \u5B57\u6BB5\u6587\u6848\u63CF\u8FF0 <a href="https://github.com/youzan/vant-weapp/commit/af74936bdc9a665dfdd024a2e85be66fabf3133d" target="_blank">af7493</a></li></ul><p><strong>Feature</strong></p><ul><li>tab: \u65B0\u589E before-change \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5139" target="_blank">#5139</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.9" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.8...v1.10.9" target="_blank">v1.10.9</a></h3><p><code>2022-12-12</code></p><p><strong>Bug Fixes</strong></p><ul><li>slider: \u4FEE\u590D\u6587\u6863\u793A\u4F8B\u503C\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/issues/5128" target="_blank">#5128</a></li><li>tab: \u4FEE\u590D\u5728\u5F00\u542F\u5FAE\u4FE1\u5DE5\u5177\u70ED\u66F4\u65B0\u65F6\u51FA\u73B0\u5806\u6808\u6EA2\u51FA\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5125" target="_blank">#5125</a></li><li>transition: \u4FEE\u590D\u9875\u9762\u5207\u540E\u53F0\u540E\u65E0\u6CD5\u89E6\u53D1 transition \u76F8\u5173\u7EC4\u4EF6\u66F4\u65B0 <a href="https://github.com/youzan/vant-weapp/issues/5131" target="_blank">#5131</a></li></ul><p><strong>Feature</strong></p><ul><li>cascader: \u65B0\u589E cascader \u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4992" target="_blank">#4992</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.8" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.7...v1.10.8" target="_blank">v1.10.8</a></h3><p><code>2022-11-29</code></p><p><strong>Bug Fixes</strong></p><ul><li>slider: \u4FEE\u590D\u5FEB\u901F\u6ED1\u52A8\u65F6 value \u53EF\u80FD\u9519\u8BEF\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5112" target="_blank">#5112</a></li><li>tabs: \u4FEE\u590D\u521D\u59CB\u5316\u52A0\u8F7D\u65F6\u9009\u4E2D\u72B6\u6001\u52A8\u753B\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5115" target="_blank">#5115</a></li></ul><p><strong>Document</strong></p><ul><li>Calendar: \u4FEE\u590D\u793A\u4F8B\u4EE3\u7801\u9519\u8BEF\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/c55c785a9ed67e0801c693d61b1e7e691bd19cf1" target="_blank">c55c78</a></li><li>fix(stepper): \u4FEE\u590D stepper blur \u4E8B\u4EF6\u5931\u7126\u65F6\u4F1A\u89E6\u53D1 change \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/commit/8b441de1a6a0d439913d6a582d954331ff17e1fa" target="_blank">8b441d</a></li></ul><p><strong>Feature</strong></p><ul><li>dialog: \u589E\u52A0 custom-class \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5102" target="_blank">#5102</a></li><li>uploader: \u589E\u52A0 media-type \u5C5E\u6027\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5113" target="_blank">#5113</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.7" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.6...v1.10.7" target="_blank">v1.10.7</a></h3><p><code>2022-11-18</code></p><p><strong>Bug Fixes</strong></p><ul><li>search: \u589E\u52A0 value \u9ED8\u8BA4 props \u5B9A\u4E49 <a href="https://github.com/youzan/vant-weapp/commit/697746fb470e9e16476f3fe95c15e4448ca9d686" target="_blank">697746</a></li></ul><p><strong>Document</strong></p><ul><li>collapse: \u589E\u52A0 right-icon \u989D\u5916\u4F7F\u7528\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/commit/d39b35fc3a1d4b913d7b94bb45b3e861e3cee79e" target="_blank">d39b35</a></li></ul><p><strong>Feature</strong></p><ul><li>action-sheet: \u589E\u52A0\u81EA\u5B9A\u4E49\u6837\u5F0F\u80FD\u529B\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5097" target="_blank">#5097</a></li><li>dropdown-menu: \u589E\u52A0\u591A\u4E2A\u81EA\u5B9A\u4E49\u6837\u5F0F\u80FD\u529B\u652F\u6301 <a href="https://github.com/youzan/vant-weapp/issues/5099" target="_blank">#5099</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.6" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.5...v1.10.6" target="_blank">v1.10.6</a></h3><p><code>2022-11-06</code></p><p><strong>Bug Fixes</strong></p><ul><li>van-tabs: \u4FEE\u590D\u63D2\u4EF6\u5185\u4F7F\u7528 van-tabs \u5207\u6362 tab \u62A5\u9519\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5073" target="_blank">#5073</a></li><li>button: \u4FEE\u590D button \u5728 disabeld \u6216 loading \u65F6\u80FD\u89E6\u53D1 active \u72B6\u6001\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5084" target="_blank">#5084</a></li><li>mixin: \u4FEE\u590D page-scroll mixin \u51FD\u6570\u76D1\u542C\u6CA1\u6709\u6536\u56DE\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5086" target="_blank">#5086</a></li><li>overlay: \u4FEE\u590D custom-class \u4E0D\u751F\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5083" target="_blank">#5083</a></li><li>slider: \u4FEE\u590D slider \u5728 value \u5C0F\u4E8E step \u65E0\u6CD5\u6ED1\u52A8\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/5079" target="_blank">#5079</a></li></ul><p><strong>Feature</strong></p><ul><li>Dialog: option context \u652F\u6301\u4F20\u5165\u51FD\u6570 <a href="https://github.com/youzan/vant-weapp/issues/5043" target="_blank">#5043</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.5" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.4...v1.10.5" target="_blank">v1.10.5</a></h3><p><code>2022-09-07</code></p><p><strong>Feature</strong></p><ul><li>Dialog: messageAlign \u5C5E\u6027\u652F\u6301\u4F20 justify <a href="https://github.com/youzan/vant-weapp/issues/5034" target="_blank">#5034</a></li><li>Notify: \u652F\u6301 setDefaultOptions \u548C resetDefaultOptions \u65B9\u6CD5 <a href="https://github.com/youzan/vant-weapp/issues/5028" target="_blank">#5028</a></li><li>toast: context \u9009\u9879\u652F\u6301\u4F20\u5165\u51FD\u6570 <a href="https://github.com/youzan/vant-weapp/issues/5022" target="_blank">#5022</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D getDay \u548C getUTCDay \u6709\u65F6\u95F4\u5DEE\uFF0C\u5BFC\u81F4\u661F\u671F\u9519\u4F4D\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4883" target="_blank">#4883</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.3...v1.10.4" target="_blank">v1.10.4</a></h3><p><code>2022-07-23</code></p><p><strong>Feature</strong></p><ul><li>Button: \u65B0\u589E chooseavatar \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4976" target="_blank">#4976</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>NavBar: \u4FEE\u590D\u56E0 <code>box-sizing: border-box</code> \u5BFC\u81F4\u5BFC\u822A\u680F\u9AD8\u5EA6\u4E0D\u6B63\u786E\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4969" target="_blank">#4969</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.2...v1.10.3" target="_blank">v1.10.3</a></h3><p><code>2022-05-02</code></p><p><strong>Feature</strong></p><ul><li>Area: \u65B0\u589E show-toolbar \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4752" target="_blank">#4752</a></li><li>CollapseItem: \u65B0\u589E size \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4829" target="_blank">#4829</a></li><li>uploader: preview-size \u5C5E\u6027\u7C7B\u578B\u652F\u6301 Array \u81EA\u5B9A\u4E49\u5BBD\u9AD8 <a href="https://github.com/youzan/vant-weapp/issues/4798" target="_blank">#4798</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D\u8BBE\u7F6E maxDate \u548C minDate \u540E\uFF0C\u5468\u51E0\u663E\u793A\u4E0D\u6B63\u786E\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4742" target="_blank">#4742</a></li><li>NoticeBar: \u4FEE\u590D\u65E0\u6CD5\u4ECE\u521D\u59CB\u6700\u5DE6\u4FA7\u4F4D\u7F6E\u5F00\u59CB\u6EDA\u52A8\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4746" target="_blank">#4746</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.1...v1.10.2" target="_blank">v1.10.2</a></h3><p><code>2022-01-11</code></p><p><strong>Bug Fixes</strong></p><ul><li>build: \u4FEE\u590D\u7F16\u8BD1\u65F6 dts \u6587\u4EF6\u4E22\u5931 <a href="https://github.com/youzan/vant-weapp/issues/4741" target="_blank">#4741</a></li><li>Calendar: \u4FEE\u590D row-height \u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4733" target="_blank">#4733</a></li><li>ShareSheet: \u4FEE\u590D \u70B9\u51FB\u6587\u5B57 \u65F6 \u672A\u89E6\u53D1\u5C0F\u7A0B\u5E8F\u5F00\u653E\u80FD\u529B <a href="https://github.com/youzan/vant-weapp/pull/4739" target="_blank">#4739</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.10.0...v1.10.1" target="_blank">v1.10.1</a></h3><p><code>2022-01-04</code></p><p><strong>Bug Fixes</strong></p><ul><li>NoticeBar: \u79FB\u9664 \u9ED8\u8BA4 icon \u5C3A\u5BF8 <a href="https://github.com/youzan/vant-weapp/issues/4692" target="_blank">#4692</a></li><li>Tab: \u4FEE\u590D \u6ED1\u52A8\u5931\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4715" target="_blank">#4715</a></li></ul><p><strong>Document</strong></p><ul><li>quickstart: \u589E\u52A0 \u7528\u6237\u9690\u79C1\u4FDD\u62A4 \u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/issues/4711" target="_blank">#4711</a></li></ul><p><strong>Feature</strong></p><ul><li>GoodsAction: \u589E\u52A0 GoodsActionIcon \u7EC4\u4EF6\u7684 class-prefix \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4712" target="_blank">#4712</a></li></ul></div><div class="van-doc-card"><h3 id="v1.10.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.9.2...v1.10.0" target="_blank">v1.10.0</a></h3><p><code>2021-12-21</code></p><p><strong>Bug Fixes</strong></p><ul><li>page-scroll: \u4FEE\u590D\u5F53 vanPageScroller \u4E3A undefined \u65F6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/issues/4640" target="_blank">#4640</a></li><li>Switch: \u4FEE\u590D\u5F53\u4F7F\u7528 active-value \u65F6 \u81EA\u5B9A\u4E49\u989C\u8272\u5931\u6548 <a href="https://github.com/youzan/vant-weapp/issues/4645" target="_blank">#4645</a></li><li>Toast: \u4FEE\u590D\u5F53 type \u4E3A success/error \u65F6 toast \u6837\u5F0F\u4E0D\u6B63\u786E <a href="https://github.com/youzan/vant-weapp/issues/4587" target="_blank">#4587</a></li></ul><p><strong>Document</strong></p><ul><li>NoticeBar: \u4FEE\u590D\u6587\u6863\u4E2D \u5355\u4F4D\u6807\u8BC6 \u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/issues/4641" target="_blank">#4641</a></li></ul><p><strong>Feature</strong></p><ul><li>Stepper: \u65B0\u589E always-embed \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4678" target="_blank">#4678</a></li></ul></div><div class="van-doc-card"><h3 id="v1.9.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.9.1...v1.9.2" target="_blank">v1.9.2</a></h3><p><code>2021-10-28</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u9009\u62E9\u6700\u5C0F\u53EF\u9009\u65E5\u671F\u8303\u56F4 <a href="https://github.com/youzan/vant-weapp/issues/4569" target="_blank">#4569</a></li><li>Collapse: \u4FEE\u590D\u591A\u6B21\u70B9\u51FB\u5931\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4567" target="_blank">#4567</a></li><li>Tab: \u4FEE\u590D\u5361\u7247\u6A21\u5F0F\u6807\u7B7E\u9875\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4582" target="_blank">#4582</a></li><li>Tab: \u4FEE\u590D\u591A\u6307\u6ED1\u52A8\u591A\u4E2A\u6807\u7B7E\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4539" target="_blank">#4539</a></li></ul><p><strong>Feature</strong></p><ul><li>DropdownMenu: \u65B0\u589E --dropdown-menu-box-shadow CssVariable <a href="https://github.com/youzan/vant-weapp/issues/4565" target="_blank">#4565</a></li><li>DropdownMenu: \u65B0\u589E custom-class <a href="https://github.com/youzan/vant-weapp/issues/4583" target="_blank">#4583</a></li><li>Field: \u65B0\u589E always-embed \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4571" target="_blank">#4571</a></li><li>Toast: \u652F\u6301 html type <a href="https://github.com/youzan/vant-weapp/issues/4581" target="_blank">#4581</a></li></ul></div><div class="van-doc-card"><h3 id="v1.9.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.9.0...v1.9.1" target="_blank">v1.9.1</a></h3><p><code>2021-09-29</code></p><p><strong>Bug Fixes</strong></p><ul><li>CheckBox: \u79FB\u9664\u65E0\u7528\u65B9\u6CD5 <a href="https://github.com/youzan/vant-weapp/issues/4527" target="_blank">#4527</a></li><li>Slider: \u4FEE\u590D vertical \u5C5E\u6027\u5BFC\u81F4\u70B9\u51FB\u65E0\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4532" target="_blank">#4532</a></li></ul><p><strong>Document</strong></p><ul><li>Calendar: Day \u6570\u636E\u7ED3\u6784\u589E\u52A0 className \u5C5E\u6027\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/issues/4524" target="_blank">#4524</a></li></ul><p><strong>Feature</strong></p><ul><li>Calendar: \u589E\u52A0 readonly \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4529" target="_blank">#4529</a></li></ul></div><div class="van-doc-card"><h3 id="v1.9.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.7...v1.9.0" target="_blank">v1.9.0</a></h3><p><code>2021-09-27</code></p><p><strong>Bug Fixes</strong></p><ul><li>Slider: \u79FB\u9664 theme mixin <a href="https://github.com/youzan/vant-weapp/issues/4520" target="_blank">#4520</a></li><li>Tab: \u4FEE\u590D\u521D\u59CB\u4F4D\u7F6E\u4E0D\u6B63\u786E\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4521" target="_blank">#4521</a></li></ul><p><strong>Document</strong></p><ul><li>ActionSheet: \u6DFB\u52A0 show \u5C5E\u6027\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/issues/4518" target="_blank">#4518</a></li></ul><p><strong>Feature</strong></p><ul><li>Slider: \u6DFB\u52A0 vertical \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4486" target="_blank">#4486</a></li></ul><p><strong>Performance</strong></p><ul><li>\u79FB\u9664 CSS variables \u517C\u5BB9\u4EE3\u7801 <a href="https://github.com/youzan/vant-weapp/issues/4487" target="_blank">#4487</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.7" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.6...v1.8.7" target="_blank">v1.8.7</a></h3><p><code>2021-09-22</code></p><p><strong>Features</strong></p><ul><li>Icons: \u65B0\u589E guide-o \u56FE\u6807 <a href="https://github.com/youzan/vant-weapp/issues/4507" target="_blank">#4507</a></li></ul></div><div class="van-doc-card"><h3 id="1.8.6" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.5...v1.8.6" target="_blank">1.8.6</a></h3><p><code>2021-09-20</code></p><p><strong>Features</strong></p><ul><li>Calendar: \u65B0\u589E confirmDisabledText \u9ED8\u8BA4\u6587\u6848 <a href="https://github.com/youzan/vant-weapp/issues/4490" target="_blank">#4490</a>) (<a href="https://github.com/youzan/vant-weapp/commit/8629da1b75bb50e2f0a99905de90fd85015fb785" target="_blank">8629da1</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>\u79FB\u9664 optionalTypes <a href="https://github.com/youzan/vant-weapp/issues/4501" target="_blank">#4501</a>) (<a href="https://github.com/youzan/vant-weapp/commit/3afe10c0f929e5c6b0f32ca34de9dc8d05c8c016" target="_blank">3afe10c</a></li><li>Docs: \u4FEE\u590D\u6587\u6863\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/issues/4489" target="_blank">#4489</a></li></ul></div><div class="van-doc-card"><h3 id="1.8.5" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.4...v1.8.5" target="_blank">1.8.5</a></h3><p><code>2021-09-15</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D\u8D85\u51FA\u9009\u62E9\u8303\u56F4 toast \u63D0\u793A\u4E00\u76F4\u5B58\u5728\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4474" target="_blank">#4474</a></li><li>page-scroll: \u4FEE\u590D isDef \u53D6\u53CD\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4488" target="_blank">#4488</a></li></ul></div><div class="van-doc-card"><h3 id="1.8.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.3...v1.8.4" target="_blank">1.8.4</a></h3><p><code>2021-09-07</code></p><p><strong>Bug Fixes</strong></p><ul><li>page-scroll: \u4FEE\u590D getCurrentPage \u4E3A\u7A7A\u65F6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/issues/4458" target="_blank">#4458</a></li></ul><p><strong>Features</strong></p><ul><li>Field: \u65B0\u589E clear-trigger \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4461" target="_blank">#4461</a></li><li>Search: \u65B0\u589E clear-icon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4463" target="_blank">#4463</a></li><li>Search: \u65B0\u589E clear-trigger \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/commit/9e17b13164e57ff09140d755870853f702a89a39" target="_blank">9e17b13</a></li><li>Slider: \u65B0\u589E range \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4442" target="_blank">#4442</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.2...v1.8.3" target="_blank">v1.8.3</a></h3><p><code>2021-08-30</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D default-date \u5C5E\u6027\u5931\u6548\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4430" target="_blank">#4430</a></li><li>ShareSheet: \u8C03\u6574 overlayStyle \u5C5E\u6027\u7C7B\u578B\u4E3A string <a href="https://github.com/youzan/vant-weapp/commit/8c408e23030e65a0baf62f0b21fb8ed3f2c9df67" target="_blank">8c408e2</a></li><li>Stepper: \u8C03\u6574 minus/plus slots \u4F4D\u7F6E <a href="https://github.com/youzan/vant-weapp/issues/4427" target="_blank">#4427</a></li><li>Sticky: \u4FEE\u590D root \u4E3A null \u65F6\uFF0C\u8BFB\u53D6 root.top \u62A5\u9519\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4433" target="_blank">#4433</a></li><li>Calendar: \u8C03\u6574 minDate \u548C maxDate \u4F20\u503C\u7C7B\u578B\u4E3A Number <a href="https://github.com/youzan/vant-weapp/commit/37d8e697c9e3d985b926f68553b8afbb5c0a0569" target="_blank">37d8e69</a></li></ul><p><strong>Features</strong></p><ul><li>Popup: \u65B0\u589E lock-scroll \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4384" target="_blank">#4384</a></li></ul><p><strong>Performance Improvements</strong></p><ul><li>Radio: label \u7684 margin-left \u6539\u4E3A padding-left\uFF0C\u589E\u5927\u53EF\u70B9\u51FB\u533A\u57DF\uFF0C\u589E\u5F3A\u7528\u6237\u4F53\u9A8C <a href="https://github.com/youzan/vant-weapp/issues/4165" target="_blank">#4165</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.1...v1.8.2" target="_blank">v1.8.2</a></h3><p><code>2021-08-18</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/7f7cf62ee0f675ad6b86d41f70b23336e7ddc7a1" target="_blank">7f7cf6</a></li><li>Field: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/commit/6dd42a0473578e26e5f5f96158959e56689f68b6" target="_blank">6dd42a</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.8.0...v1.8.1" target="_blank">v1.8.1</a></h3><p><code>2021-08-18</code></p><p><strong>Feature</strong></p><ul><li>Calendar: \u65B0\u589E click-subtitle \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4385" target="_blank">#4385</a></li><li>Circle: \u4F7F\u7528 setTimeout \u4EE3\u66FF setInterval <a href="https://github.com/youzan/vant-weapp/issues/4401" target="_blank">#4401</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Picker: \u4FEE\u590D template \u5F15\u7528\u8DEF\u5F84\u4E0D\u662F\u76F8\u5BF9\u8DEF\u5F84\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4408" target="_blank">#4408</a></li></ul></div><div class="van-doc-card"><h3 id="v1.8.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.7.2...v1.8.0" target="_blank">v1.8.0</a></h3><p><code>2021-08-11</code></p><p><strong>Feature</strong></p><ul><li>Overlay: \u65B0\u589E lock-scroll \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4383" target="_blank">#4383</a></li><li>search: \u65B0\u589E click-input \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4357" target="_blank">#4357</a></li></ul><p><strong>Performance</strong></p><ul><li>\u79FB\u9664\u4E86 iOS8 \u76F8\u5173\u7684 polyfill\uFF0C\u51CF\u5C11\u5305\u4F53\u79EF <a href="https://github.com/youzan/vant-weapp/issues/4395" target="_blank">#4395</a></li></ul></div><div class="van-doc-card"><h3 id="v1.7.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/compare/v1.7.1...v1.7.2" target="_blank">v1.7.2</a></h3><p><code>2021-07-19</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u521D\u59CB\u65E5\u671F\u8BBE\u7F6E\u4E3A\u5F53\u524D\u65E5\u671F <a href="https://github.com/youzan/vant-weapp/issues/4339" target="_blank">#4339</a></li></ul><p><strong>Features</strong></p><ul><li>Cell: CellGroup \u65B0\u589E inset \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/issues/4341" target="_blank">#4341</a></li><li>Search: \u65B0\u589E click-input \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4337" target="_blank">#4337</a></li></ul></div><div class="van-doc-card"><h3 id="1.7.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.7.1" target="_blank">1.7.1</a></h3><p><code>2021-07-06</code></p><p><strong>Bug Fixes</strong></p><ul><li>Col: \u4FEE\u590D\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/issues/4322" target="_blank">#4322</a></li><li>Grid: \u589E\u52A0 icon-prefix \u5C5E\u6027\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/issues/4318" target="_blank">#4318</a></li><li>IndexBar: \u4FEE\u590D\u5F53\u7D22\u5F15\u5217\u8868\u4E3A\u7A7A\u65F6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/issues/4310" target="_blank">#4310</a></li></ul></div><div class="van-doc-card"><h3 id="1.7.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.7.0" target="_blank">1.7.0</a></h3><p><code>2021-07-04</code></p><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D type \u4E3A getUserInfo &amp; wx.getUserProfile \u53EF\u7528\u65F6 lang \u53C2\u6570\u5931\u6548 <a href="https://github.com/youzan/vant-weapp/issues/4250" target="_blank">#4250</a></li><li>ShareSheet: \u65B0\u589E\u5185\u7F6E icon <code>weapp-qrcode</code> <code>wechat-moments</code> <a href="https://github.com/youzan/vant-weapp/issues/4256" target="_blank">#4256</a></li></ul><p><strong>Features</strong></p><ul><li>Checkbox: \u589E\u52A0 direction \u5C5E\u6027\uFF0C\u8BBE\u7F6E\u6392\u5217\u65B9\u5411 <a href="https://github.com/youzan/vant-weapp/issues/4265" target="_blank">#4265</a></li><li>ConfigProvider: \u589E\u52A0\u5168\u5C40\u914D\u7F6E\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/issues/4279" target="_blank">#4279</a></li><li>Grid: \u589E\u52A0 reverse \u5C5E\u6027\uFF0C\u652F\u6301\u6587\u672C&amp;\u56FE\u7247\u4F4D\u7F6E\u4E92\u6362 <a href="https://github.com/youzan/vant-weapp/issues/4280" target="_blank">#4280</a></li><li>GridItem: \u589E\u52A0 icon-prefix \u5C5E\u6027\uFF0C\u652F\u6301\u7B2C\u4E09\u65B9\u5B57\u4F53 <a href="https://github.com/youzan/vant-weapp/issues/4276" target="_blank">#4276</a></li><li>Rate: \u589E\u52A0\u66F4\u591A css \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/issues/4297" target="_blank">#4297</a></li><li>Slider: \u589E\u52A0\u66F4\u591A css \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/issues/4305" target="_blank">#4305</a></li></ul><p><strong>Improvements</strong></p><ul><li>wxs style \u65B9\u6CD5\u652F\u6301\u9A7C\u5CF0\u53D8\u91CF\u547D\u540D\uFF0C\u4EE5\u4FBF\u80FD\u66F4\u597D\u7684\u5728 wxml \u4E2D\u4F7F\u7528 <a href="https://github.com/youzan/vant-weapp/issues/4281" target="_blank">#4281</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.9" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.9" target="_blank">1.6.9</a></h3><p><code>2021-06-06</code></p><p><strong>Bug Fixes</strong></p><ul><li>DatetimePicker: \u4FEE\u590D \u52A8\u6001\u8BBE\u7F6E min-hour min-date \u663E\u793A\u4E0D\u6B63\u786E <a href="https://github.com/youzan/vant-weapp/issues/4245" target="_blank">#4245</a></li><li>Tabs: \u4FEE\u590D tab \u6570\u91CF\u8F83\u591A\u65F6\u6EDA\u52A8\u8DDD\u79BB\u4E0D\u6B63\u786E <a href="https://github.com/youzan/vant-weapp/issues/4202" target="_blank">#4202</a></li><li>Uploader: \u4FEE\u590D demo \u4E2D beforeRead \u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/issues/4235" target="_blank">#4235</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.9-beta.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.9-beta.2" target="_blank">1.6.9-beta.2</a></h3><p><code>2021-05-22</code></p><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D open-type \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/issues/4222" target="_blank">#4222</a></li><li>Calendar: \u4FEE\u590D allow-same-day \u5F00\u542F\u65F6 custom-color \u5C5E\u6027\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/issues/4200" target="_blank">#4200</a></li><li>Circle: \u4FEE\u590D value \u662F\u5C0F\u6570\u65F6\u6296\u52A8\u7684\u60C5\u51B5 <a href="https://github.com/youzan/vant-weapp/issues/4152" target="_blank">#4152</a></li><li>NoticeBar: \u8C03\u6574\u6EDA\u52A8\u884C\u4E3A <a href="https://github.com/youzan/vant-weapp/issues/4201" target="_blank">#4201</a></li><li>NoticeBar: \u4FEE\u590D\u4E0D\u6B63\u786E\u7684\u6EDA\u52A8\u901F\u5EA6 <a href="https://github.com/youzan/vant-weapp/commit/cde3876fb0742cacf3e481a8eb2b487dabc8709e" target="_blank">cde3876</a></li><li>Radio: \u652F\u6301\u52A8\u6001\u8BBE\u7F6E disabled <a href="https://github.com/youzan/vant-weapp/issues/4191" target="_blank">#4191</a></li><li>Rate: \u652F\u6301\u6ED1\u52A8\u9009\u62E9\u534A\u661F <a href="https://github.com/youzan/vant-weapp/issues/4195" target="_blank">#4195</a></li></ul><p><strong>Features</strong></p><ul><li>Calendar: \u589E\u52A0 first-day-of-week \u5C5E\u6027\uFF0C\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5 <a href="https://github.com/youzan/vant-weapp/issues/4211" target="_blank">#4211</a></li><li>Calendar: \u589E\u52A0 show-range-prompt \u5C5E\u6027\u548C over-range \u4E8B\u4EF6\uFF0C\u8BBE\u7F6E\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848 <a href="https://github.com/youzan/vant-weapp/issues/4212" target="_blank">#4212</a></li><li>Icons: \u56FE\u6807\u5E93\u8FC1\u79FB\u81F3 iconfont.cn <a href="https://github.com/youzan/vant-weapp/issues/4219" target="_blank">#4219</a></li><li>OpenType: \u652F\u6301 getUserProfile <a href="https://github.com/youzan/vant-weapp/issues/4203" target="_blank">#4203</a></li><li>Panel: \u79FB\u9664 useFooterSlot <a href="https://github.com/youzan/vant-weapp/issues/4205" target="_blank">#4205</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.8" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.8" target="_blank">1.6.8</a></h3><p><code>2021-02-26</code></p><p><strong>Features</strong></p><ul><li>NoticeBar: \u65B0\u589E\u9ED8\u8BA4\u63D2\u69FD (<a href="https://github.com/youzan/vant-weapp/pull/4048" target="_blank">#4048</a>)</li><li>Stepper: \u65B0\u589E theme \u5C5E\u6027\uFF0C\u652F\u6301\u5706\u5F62\u98CE\u683C (<a href="https://github.com/youzan/vant-weapp/pull/4049" target="_blank">#4049</a>)</li><li>Stepper: \u65B0\u589E plus &amp; minus \u63D2\u69FD (<a href="https://github.com/youzan/vant-weapp/pull/4049" target="_blank">#4049</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Checkbox: \u4FEE\u590D label-position \u5C5E\u6027\u65E0\u6548 (<a href="https://github.com/youzan/vant-weapp/pull/4036" target="_blank">#4036</a>)</li><li>Dialog: \u4FEE\u590D beforeClose \u65B9\u6CD5\u7C7B\u578B\u5B9A\u4E49 (<a href="https://github.com/youzan/vant-weapp/pull/4019" target="_blank">#4019</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Circle: \u5F53\u5185\u7F6E canvas \u4E0D\u652F\u6301\u540C\u5C42\u6E32\u67D3\u65F6\u964D\u7EA7\u81F3\u9ED8\u8BA4 type (<a href="https://github.com/youzan/vant-weapp/pull/4050" target="_blank">#4050</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.7" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.7" target="_blank">1.6.7</a></h3><p><code>2021-01-27</code></p><p><strong>Features</strong></p><ul><li>Radio: \u65B0\u589E <code>direction</code> \u5C5E\u6027 (<a href="https://github.com/youzan/vant-weapp/issues/4007" target="_blank">#4007</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Icons: \u4FEE\u590D\u90E8\u5206\u5730\u533A\u56FE\u6807\u4E0D\u663E\u793A (<a href="https://github.com/youzan/vant-weapp/issues/4012" target="_blank">#4012</a>)</li><li>Transition: \u4FEE\u590D\u9ED8\u8BA4\u8BBE\u7F6E <code>show</code> \u5C5E\u6027\u4E3A <code>true</code> \u65F6\u4E0D\u751F\u6548 (<a href="https://github.com/youzan/vant-weapp/issues/4005" target="_blank">#4005</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.6" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.6" target="_blank">1.6.6</a></h3><p><code>2021-01-21</code></p><p><strong>Features</strong></p><ul><li>Uploader: \u652F\u6301\u6587\u4EF6\u9884\u89C8 (<a href="https://github.com/youzan/vant-weapp/pull/3975" target="_blank">#3975</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Picker: \u4FEE\u590D\u6807\u9898\u680F\u65E0\u6CD5\u663E\u793A (<a href="https://github.com/youzan/vant-weapp/pull/3973" target="_blank">#3973</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Calendar: \u4F18\u5316\u6A21\u677F\u4EE3\u7801 (<a href="https://github.com/youzan/vant-weapp/pull/3972" target="_blank">#3972</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.5" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.5" target="_blank">1.6.5</a></h3><p><code>2021-01-19</code></p><p><strong>Features</strong></p><ul><li>Field: \u65B0\u589E input \u63D2\u69FD (<a href="https://github.com/youzan/vant-weapp/pull/3932" target="_blank">#3932</a>)</li><li>Field: \u65B0\u589E click-input \u4E8B\u4EF6 (<a href="https://github.com/youzan/vant-weapp/pull/3932" target="_blank">#3932</a>)</li><li>Icon: \u65B0\u589E delete-o\u3001sort\u3001font\u3001font-o\u3001revoke \u56FE\u6807 (<a href="https://github.com/youzan/vant-weapp/pull/3881" target="_blank">#3881</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D custom-style \u5C5E\u6027\u4E0D\u751F\u6548 (<a href="https://github.com/youzan/vant-weapp/pull/3903" target="_blank">#3903</a>)</li><li>Dialog: \u4FEE\u590D close-on-click-overlay \u5C5E\u6027\u4E0D\u751F\u6548 (<a href="https://github.com/youzan/vant-weapp/pull/3913" target="_blank">#3913</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Cell: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3888" target="_blank">#3888</a>)</li><li>Col: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3886" target="_blank">#3886</a>)</li><li>Divider: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3887" target="_blank">#3887</a>)</li><li>Empty: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3933" target="_blank">#3933</a>)</li><li>Loading: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3892" target="_blank">#3892</a>)</li><li>Notice-bar: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3891" target="_blank">#3891</a>)</li><li>Notify: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3893" target="_blank">#3893</a>)</li><li>Picker: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3949" target="_blank">#3949</a>)</li><li>Stepper: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3890" target="_blank">#3890</a>)</li><li>Sticky: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3879" target="_blank">#3879</a>)</li><li>SwipeCell: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3928" target="_blank">#3928</a>)</li><li>Switch: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3889" target="_blank">#3889</a>)</li><li>Tag: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3894" target="_blank">#3894</a>)</li><li>Transition: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3895" target="_blank">#3895</a>)</li><li>Uploader: \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/issues/3897" target="_blank">#3897</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.4" target="_blank">1.6.4</a></h3><p><code>2020-12-18</code></p><p><strong>Improvements</strong></p><ul><li>Tab: \u4F18\u5316\u7C98\u6027\u5E03\u5C40\u65F6\u7684\u6E32\u67D3\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3875" target="_blank">#3875</a>)</li><li>Grid: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3868" target="_blank">#3839</a>)</li><li>Image: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3868" target="_blank">#3839</a>)</li><li>Button: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3839" target="_blank">#3839</a>)</li><li>Icon: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (<a href="https://github.com/youzan/vant-weapp/pull/3868" target="_blank">#3839</a>)</li><li>Checkbox: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (<a href="https://github.com/youzan/vant-weapp/pull/3868" target="_blank">#3839</a>)</li><li>Slider: \u51CF\u5C11\u4EE3\u7801\u4F53\u79EF (<a href="https://github.com/youzan/vant-weapp/pull/3868" target="_blank">#3839</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D\u5728 phone \u8BBE\u5907\u4E0A\u9009\u62E9\u65E5\u671F\u540E\u663E\u793A\u9519\u8BEF (<a href="https://github.com/youzan/vant-weapp/pull/3833" target="_blank">#3833</a>)</li><li>GoodsAction: \u4FEE\u590D\u90E8\u5206\u8BBE\u5907\u4E0A\u9AD8\u5EA6\u5F02\u5E38 (<a href="https://github.com/youzan/vant-weapp/pull/3865" target="_blank">#3865</a>)</li><li>Slider: \u4FEE\u590D\u8BBE\u7F6E <code>max</code> <code>min</code> \u65F6\u6ED1\u52A8\u4E0D\u5747\u5300 (<a href="https://github.com/youzan/vant-weapp/pull/3876" target="_blank">#3876</a>)</li><li>Tab: \u4FEE\u590D\u5207\u6362\u65F6\u5185\u5BB9\u533A\u95EA\u70C1\u7684\u95EE\u9898 (<a href="https://github.com/youzan/vant-weapp/pull/3866" target="_blank">#3866</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.3" target="_blank">1.6.3</a></h3><p><code>2020-12-09</code></p><p><strong>Features</strong></p><ul><li>Dialog: \u65B0\u589E <code>beforeClose</code> \u5C5E\u6027 (<a href="https://github.com/youzan/vant-weapp/pull/3815" target="_blank">#3815</a>)</li><li>uploader: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF (<a href="https://github.com/youzan/vant-weapp/pull/3797" target="_blank">#3797</a>)</li><li>Aarea: \u652F\u6301\u4E0D\u4F20\u5165 <code>county_list</code> \u6570\u636E (<a href="https://github.com/youzan/vant-weapp/pull/3824" target="_blank">#3824</a>)</li><li>Tab: \u65B0\u589E <code>resize</code> \u65B9\u6CD5 (<a href="https://github.com/youzan/vant-weapp/pull/3827" target="_blank">#3827</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Collapse: \u4F7F\u7528 animate \u63D0\u5347\u52A8\u753B\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3826" target="_blank">#3826</a>)</li><li>Tab: \u4F18\u5316\u6837\u5F0F\u62FC\u88C5\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3827" target="_blank">#3827</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u8F93\u5165\u4E2D\u6587\u65F6\u663E\u793A\u5B57\u6570\u6682\u65F6\u8D85\u51FA maxlength (<a href="https://github.com/youzan/vant-weapp/pull/3802" target="_blank">#3802</a>)</li><li>Info: \u4FEE\u590D\u6837\u5F0F\u9519\u8BEF (<a href="https://github.com/youzan/vant-weapp/pull/3823" target="_blank">#3823</a>)</li><li>NavBar: \u4FEE\u590D\u52A8\u6001\u6E32\u67D3\u65F6\u7EC4\u4EF6\u62A5\u9519 (<a href="https://github.com/youzan/vant-weapp/pull/3822" target="_blank">#3822</a>)</li><li>Progress: \u4FEE\u590D <code>percentage</code> \u4E3A 0 \u65F6\u6837\u5F0F\u5F02\u5E38 (<a href="https://github.com/youzan/vant-weapp/pull/3808" target="_blank">#3808</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.2" target="_blank">1.6.2</a></h3><p><code>2020-11-29</code></p><p><strong>Features</strong></p><ul><li>Tabbar: \u65B0\u589E <code>placeholder</code> <code>icon-prefix</code> \u5C5E\u6027 (<a href="https://github.com/youzan/vant-weapp/pull/3792" target="_blank">#3792</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>DatetimePicker: \u4FEE\u590D <code>type=year-month</code> \u65F6\u9009\u62E9\u51FA\u73B0\u62A5\u9519 (<a href="https://github.com/youzan/vant-weapp/pull/3783" target="_blank">#3783</a>)</li><li>Info: \u4FEE\u590D\u90E8\u5206\u5B89\u5353\u8BBE\u5907\u4E2D\u6587\u6848\u4E0D\u5B8C\u5168\u5C45\u4E2D (<a href="https://github.com/youzan/vant-weapp/pull/3778" target="_blank">#3778</a>)</li><li>Tab: \u4FEE\u590D <code>ellipsis</code> \u4E3A <code>false</code> \u65F6\u4E0B\u5212\u7EBF\u4F4D\u7F6E\u4E0D\u6B63\u786E (<a href="https://github.com/youzan/vant-weapp/pull/3777" target="_blank">#3777</a>)</li><li>Notify: \u4FEE\u590D\u7EC4\u4EF6\u672A\u5168\u5C40\u5C45\u4E2D (<a href="https://github.com/youzan/vant-weapp/pull/3751" target="_blank">#3751</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Icon: \u4F7F\u7528 wxs \u4F18\u5316\u6027\u80FD (<a href="https://github.com/youzan/vant-weapp/pull/3791" target="_blank">#3791</a>)</li></ul></div><div class="van-doc-card"><h3 id="1.6.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.1" target="_blank">1.6.1</a></h3><p><code>2020-11-12</code></p><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u672A\u4F20\u5165 <code>label</code> \u5C5E\u6027\u65F6\u4ECD\u6E32\u67D3 label <a href="https://github.com/youzan/vant-weapp/pull/3756" target="_blank">#3756</a></li><li>Picker: \u4FEE\u590D confirm\u3001cancel \u4E8B\u4EF6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/3755" target="_blank">#3755</a></li></ul></div><div class="van-doc-card"><h3 id="1.6.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.6.0" target="_blank">1.6.0</a></h3><p><code>2020-11-11</code></p><p><strong>Features</strong></p><ul><li>SwipeCell: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B <code>custom-class</code> <a href="https://github.com/youzan/vant-weapp/pull/3678" target="_blank">#3678</a></li><li>ActionSheet: \u8C03\u6574\u53D6\u6D88\u6587\u5B57\u989C\u8272\u81F3 @gray-7 <a href="https://github.com/youzan/vant-weapp/pull/3719" target="_blank">#3719</a></li><li>ActionSheet: \u8C03\u6574\u9876\u90E8\u680F\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3720" target="_blank">#3720</a></li><li>ActionSheet: \u8C03\u6574\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\u81F3 22px <a href="https://github.com/youzan/vant-weapp/pull/3718" target="_blank">#3718</a></li><li>ActionSheet: \u8C03\u6574\u63CF\u8FF0\u6587\u5B57\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3726" target="_blank">#3726</a></li><li>Cell: \u8C03\u6574\u56FE\u6807\u5916\u8FB9\u8DDD\u81F3 4px <a href="https://github.com/youzan/vant-weapp/pull/3721" target="_blank">#3721</a></li><li>DropdownMenu: \u589E\u52A0\u9ED8\u8BA4\u9634\u5F71 <a href="https://github.com/youzan/vant-weapp/pull/3723" target="_blank">#3723</a></li><li>DropdownMenu: \u8C03\u6574\u9009\u4E2D\u6001\u9ED8\u8BA4\u989C\u8272\u81F3 #ee0a24 <a href="https://github.com/youzan/vant-weapp/pull/3725" target="_blank">#3725</a></li><li>Image: \u8C03\u6574\u56FE\u6807\u5927\u5C0F\u81F3 36px <a href="https://github.com/youzan/vant-weapp/pull/3724" target="_blank">#3724</a></li><li>Popup: \u8C03\u6574\u5706\u89D2\u81F3 16px <a href="https://github.com/youzan/vant-weapp/pull/3713" target="_blank">#3713</a></li><li>Search: \u8C03\u6574\u5DE6\u4FA7\u5185\u8FB9\u8DDD\u81F3 12px <a href="https://github.com/youzan/vant-weapp/pull/3716" target="_blank">#3716</a></li><li>Sidebar: \u8C03\u6574\u5BBD\u5EA6\u81F3 85px <a href="https://github.com/youzan/vant-weapp/pull/3722" target="_blank">#3722</a></li><li>TabbarItem: \u8C03\u6574\u56FE\u6807\u5927\u5C0F\u81F3 22px <a href="https://github.com/youzan/vant-weapp/pull/3717" target="_blank">#3717</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u4F7F\u7528 <code>label</code> \u5C5E\u6027\u65F6 <code>label-class</code> \u6837\u5F0F\u7C7B\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3729" target="_blank">#3729</a></li><li>NoticeBar: \u4FEE\u590D\u5185\u5BB9\u8F83\u77ED\u65F6\u5F00\u542F <code>scrollable</code> \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3727" target="_blank">#3727</a></li><li>SidebarItem: \u4FEE\u590D\u957F\u6570\u5B57\u4E0D\u6362\u884C\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3714" target="_blank">#3714</a></li><li>Tag: \u9ED8\u8BA4\u5B57\u4F53\u52A0\u5165 miui <a href="https://github.com/youzan/vant-weapp/pull/3715" target="_blank">#3715</a></li></ul></div><div class="van-doc-card"><h3 id="1.5.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.5.2" target="_blank">1.5.2</a></h3><p><code>2020-10-15</code></p><p><strong>Features</strong></p><ul><li>Uploader: \u6807\u51C6\u5316 file-list \u4E0E\u4E8B\u4EF6\u53C2\u6570 <a href="https://github.com/youzan/vant-weapp/pull/3673" target="_blank">#3673</a></li><li>Uploader: \u65B0\u589E thumb\uFF0C\u652F\u6301\u7F29\u7565\u56FE\u5C55\u793A <a href="https://github.com/youzan/vant-weapp/pull/3673" target="_blank">#3673</a></li><li>GoodsAction: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/pull/3654" target="_blank">#3654</a></li><li>\u79FB\u52A8 @types/wechat-miniprogram \u81F3 dependencies <a href="https://github.com/youzan/vant-weapp/pull/3674" target="_blank">#3654</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: \u4FEE\u590D\u7EC6\u8FB9\u6846\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3653" target="_blank">#3653</a></li><li>Tab: \u91CD\u6784\u52A8\u753B\u5B9E\u73B0\uFF0C\u4E0D\u518D\u4F7F\u7528 <code>transform</code> <a href="https://github.com/youzan/vant-weapp/pull/3668" target="_blank">#3668</a></li></ul></div><div class="van-doc-card"><h3 id="1.5.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.5.1" target="_blank">1.5.1</a></h3><p><code>2020-09-29</code></p><p><strong>Features</strong></p><ul><li>Card: \u65B0\u589E <code>origin-price</code> <code>tag</code> \u63D2\u69FD <a href="https://github.com/youzan/vant-weapp/pull/3645" target="_blank">#3645</a></li><li>ShareSheet: \u8C03\u6574\u9ED8\u8BA4 z-index \u81F3 100 <a href="https://github.com/youzan/vant-weapp/pull/3575" target="_blank">#3575</a></li><li>ShareSheet: \u65B0\u589E item \u5C5E\u6027 openType <a href="https://github.com/youzan/vant-weapp/pull/3575" target="_blank">#3575</a></li><li>Uploader: \u6269\u5927\u5220\u9664\u6309\u94AE\u70B9\u51FB\u533A\u57DF <a href="https://github.com/youzan/vant-weapp/pull/3631" target="_blank">#3631</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Uploader: \u652F\u6301\u9884\u89C8\u89C6\u9891 <a href="https://github.com/youzan/vant-weapp/pull/3594" target="_blank">#3594</a></li><li>Dialog: \u8C03\u6574\u7C7B\u578B\u5B9A\u4E49 <a href="https://github.com/youzan/vant-weapp/pull/3630" target="_blank">#3630</a></li><li>NavBar: \u4FEE\u590D CSS \u53D8\u91CF --nav-bar-icon-color \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3643" target="_blank">#3643</a></li><li>NavBar: \u4FEE\u590D\u672A\u8BBE\u7F6E title \u65F6\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3643" target="_blank">#3643</a></li><li>Tab: \u4FEE\u590D line-width \u5C5E\u6027\u4E0D\u652F\u6301 string <a href="https://github.com/youzan/vant-weapp/pull/3628" target="_blank">#3628</a></li></ul></div><div class="van-doc-card"><h3 id="1.5.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.5.0" target="_blank">1.5.0</a></h3><p><code>2020-08-27</code></p><p><strong>Features</strong></p><ul><li>ShareSheet: \u65B0\u589E\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3559" target="_blank">#3559</a></li><li>Icons: \u5347\u7EA7 @vant/icons \u81F3 v1.2.5 <a href="https://github.com/youzan/vant-weapp/pull/3539" target="_blank">#3539</a></li><li>sidebar: \u65B0\u589E badge \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3564" target="_blank">#3564</a></li><li>Tabs: \u8C03\u6574\u9ED8\u8BA4 line-width \u81F3 40px <a href="https://github.com/youzan/vant-weapp/pull/3518" target="_blank">#3518</a></li><li>Tabs: \u53BB\u9664\u9ED8\u8BA4\u8FB9\u6846 <a href="https://github.com/youzan/vant-weapp/pull/3519" target="_blank">#3519</a></li><li>TreeSelect: \u65B0\u589E selected-icon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3565" target="_blank">#3565</a></li><li>TreeSelect: \u652F\u6301 badge\u3001dot \u663E\u793A <a href="https://github.com/youzan/vant-weapp/pull/3565" target="_blank">#3565</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>collapse: \u4FEE\u590D\u5D4C\u5957\u5728 popup \u7B49\u7EC4\u4EF6\u4E2D\u65F6\u9ED8\u8BA4\u5C55\u5F00\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3562" target="_blank">#3562</a></li><li>empty: \u4FEE\u590D image\u3001description \u63D2\u69FD\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3563" target="_blank">#3563</a></li></ul></div><div class="van-doc-card"><h3 id="1.4.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.4" target="_blank">1.4.4</a></h3><p><code>2020-08-12</code></p><p><strong>Bug Fixes</strong></p><ul><li>Transition: \u91CD\u6784\u7EC4\u4EF6\u4EE5\u4FEE\u590D\u5361\u987F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3498" target="_blank">#3498</a></li><li>Icon: \u4FEE\u590D\u6570\u5B57\u672A\u5BF9\u9F50 <a href="https://github.com/youzan/vant-weapp/pull/3501" target="_blank">#3501</a></li><li>Tab: \u4FEE\u590D\u53EF\u6EDA\u52A8\u65F6\u4E0B\u5212\u7EBF\u4F4D\u7F6E\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/3511" target="_blank">#3511</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.3" target="_blank">v1.4.3</a></h3><p><code>2020-08-07</code></p><p><strong>Features</strong></p><ul><li>Dialog: \u589E\u52A0\u5706\u89D2\u6309\u94AE\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3476" target="_blank">#3476</a></li><li>Cell: \u8C03\u6574\u4E0B\u5212\u7EBF\u4F4D\u7F6E <a href="https://github.com/youzan/vant-weapp/pull/3487" target="_blank">#3487</a></li><li>Tab: \u8C03\u6574\u9ED8\u8BA4\u6EDA\u52A8\u9608\u503C\u81F3 5 \u4E2A\u3001\u4F18\u5316\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3459" target="_blank">#3459</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.2" target="_blank">v1.4.2</a></h3><p><code>2020-08-03</code></p><p><strong>Features</strong></p><ul><li>Toast: \u4F18\u5316\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3451" target="_blank">#3451</a></li><li>Tag: \u4F18\u5316\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3465" target="_blank">#3465</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: \u4FEE\u590D\u8D85\u51FA max-range \u65F6\u672A\u663E\u793A Toast <a href="https://github.com/youzan/vant-weapp/pull/3466" target="_blank">#3466</a></li><li>Tab: \u4FEE\u590D\u624B\u52BF\u6EDA\u52A8\u53EF\u5207\u6362\u81F3\u7981\u7528\u9879 <a href="https://github.com/youzan/vant-weapp/pull/3467" target="_blank">#3467</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.1" target="_blank">v1.4.1</a></h3><p><code>2020-07-28</code></p><p><strong>Features</strong></p><ul><li>Picker: \u8C03\u6574\u9ED8\u8BA4\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570\u4E3A 6 \u4E2A <a href="https://github.com/youzan/vant-weapp/pull/3418" target="_blank">#3418</a></li><li>Toast: \u8C03\u6574\u5706\u89D2\u4E3A 8px <a href="https://github.com/youzan/vant-weapp/pull/3419" target="_blank">#3419</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Slider: \u4FEE\u590D\u70B9\u51FB\u4F1A\u89E6\u53D1 drag \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3415" target="_blank">#3415</a></li><li>Area: \u4FEE\u590D\u4E2D\u95F4\u5217\u65E0\u6CD5\u6EDA\u52A8 <a href="https://github.com/youzan/vant-weapp/pull/3443" target="_blank">#3443</a></li></ul></div><div class="van-doc-card"><h3 id="v1.4.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.4.0" target="_blank">v1.4.0</a></h3><p><code>2020-07-17</code></p><p><strong>Features</strong></p><ul><li>Empty: \u65B0\u589E Empty \u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3327" target="_blank">#3327</a></li><li>NoticeBar: \u65B0\u589E background \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3388" target="_blank">#3388</a></li><li>NoticeBar: \u65B0\u589E close \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3388" target="_blank">#3388</a></li><li>GridItem: \u65B0\u589E icon-color \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3386" target="_blank">#3386</a></li><li>NavBar: \u73B0\u5728 custom-style \u5C06\u5F71\u54CD\u6839\u8282\u70B9<a href="https://github.com/youzan/vant-weapp/pull/3371" target="_blank">#3371</a></li><li>Cell: \u65B0\u589E title-style \u5C5E\u6027, fix Field label width <a href="https://github.com/youzan/vant-weapp/pull/3370" target="_blank">#3370</a></li><li>Uploader: \u66F4\u65B0 failed \u56FE\u6807 <a href="https://github.com/youzan/vant-weapp/pull/3359" target="_blank">#3359</a></li><li>Uploader: \u66F4\u65B0\u5220\u9664\u56FE\u6807\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3385" target="_blank">#3385</a></li><li>Uploader: \u79FB\u9664\u5706\u89D2\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3384" target="_blank">#3384</a></li><li>Field: \u66F4\u65B0\u7981\u7528\u6001\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3358" target="_blank">#3358</a></li><li>Field: \u66F4\u65B0 label \u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3357" target="_blank">#3357</a></li><li>Picker: \u8C03\u6574 action button \u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/3316" target="_blank">#3316</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Collapse: \u4F7F\u7528 animation \u91CD\u6784\u52A8\u753B\u90E8\u5206\u903B\u8F91\u4EE5\u4FEE\u590D\u52A8\u753B\u5361\u987F <a href="https://github.com/youzan/vant-weapp/pull/3401" target="_blank">#3401</a></li><li>Uploader: \u4FEE\u590D loading \u6837\u5F0F\u9519\u8BEF\u3001\u8C03\u6574 previewSize \u5C5E\u6027\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/pull/3317" target="_blank">#3317</a></li><li>Area: \u4FEE\u590D\u4F4E\u7248\u672C\u57FA\u7840\u5E93\u4E0B columns-num \u8BBE\u7F6E\u4E3A 1 \u6216 2 \u65F6\u771F\u673A\u73AF\u5883\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/3318" target="_blank">#3318</a></li><li>DatetimePicker: \u4FEE\u590D\u4F7F\u7528 formatter \u65F6\uFF0C\u4E8B\u4EF6\u8FD4\u56DE\u503C\u53EF\u80FD\u4E0D\u6B63\u786E <a href="https://github.com/youzan/vant-weapp/pull/3352" target="_blank">#3352</a></li><li>Field: \u4FEE\u590D textarea \u6A21\u5F0F\u4E0B label \u4E0E value \u4E0D\u5728\u540C\u4E00\u6C34\u5E73\u7EBF\u4E0A <a href="https://github.com/youzan/vant-weapp/pull/3383" target="_blank">#3383</a></li><li>Dialog: show dialog after class ready <a href="https://github.com/youzan/vant-weapp/pull/3374" target="_blank">#3374</a></li><li>Calendar: confirm-disabled-text \u5C5E\u6027\u589E\u52A0\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/pull/3394" target="_blank">#3394</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.3" target="_blank">v1.3.3</a></h3><p><code>2020-06-24</code></p><p><strong>Features</strong></p><ul><li>steps: \u4E3A\u6BCF\u4E00\u9879\u589E\u52A0 inactiveIcon\u3001activeIcon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3315" target="_blank">#3315</a></li><li>field: \u589E\u52A0\u5916\u90E8\u6837\u5F0F\u7C7B label-class <a href="https://github.com/youzan/vant-weapp/pull/3311" target="_blank">#3311</a></li><li>field: \u73B0\u5728\u603B\u4F1A\u4ECE\u5185\u90E8 set value \u503C <a href="https://github.com/youzan/vant-weapp/pull/3313" target="_blank">#3313</a></li><li>uploader: \u4E3A\u6BCF\u4E00\u9879\u589E\u52A0 deletable \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3270" target="_blank">#3270</a></li><li>uploader: \u6269\u5927\u5220\u9664\u56FE\u6807\u7684\u53EF\u70B9\u51FB\u533A\u57DF <a href="https://github.com/youzan/vant-weapp/pull/3265" target="_blank">#3265</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>tabbar: \u4FEE\u590D iphone-se \u4E0A\u9AD8\u5EA6\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3314" target="_blank">#3314</a></li><li>grid: \u4FEE\u590D text \u4E0E icon \u540C\u65F6\u8BBE\u7F6E\u65F6\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3310" target="_blank">#3310</a></li><li>calendar: \u4FEE\u590D\u591A\u9009\u6A21\u5F0F\u4E0B default-date \u5C5E\u6027\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3284" target="_blank">#3284</a></li><li>circle: \u4FEE\u590D type=&quot;2d&quot; \u65F6\u65E0\u6CD5\u52A8\u6001\u53D8\u66F4 value <a href="https://github.com/youzan/vant-weapp/pull/3264" target="_blank">#3264</a></li><li>nav-bar: \u4FEE\u590D\u672A\u8BBE\u7F6E left-text \u65F6\u5DE6\u4FA7\u56FE\u6807\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/3263" target="_blank">#3263</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.2" target="_blank">v1.3.2</a></h3><p><code>2020-06-04</code></p><p><strong>Features</strong></p><ul><li>button: \u65B0\u589E form-type \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3208" target="_blank">#3208</a></li><li>grid: \u65B0\u589E icon-size\u3001badge \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3236" target="_blank">#3236</a></li><li>grid: \u65B0\u589E direction \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3192" target="_blank">#3192</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Grid: \u4FEE\u590D\u5F00\u542F <code>square</code> \u65F6\u6A2A\u3001\u7EB5\u5411\u95F4\u8DDD\u4E0D\u540C <a href="https://github.com/youzan/vant-weapp/pull/3231" target="_blank">#3231</a></li><li>uploader: \u4FEE\u590D\u70B9\u51FB\u5220\u9664\u56FE\u6807\u65F6\u89E6\u53D1 click-preview \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3230" target="_blank">#3230</a></li><li>circle: \u4FEE\u590D <code>type=&quot;2d&quot;</code> \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3228" target="_blank">#3228</a></li><li>calendar: \u4FEE\u590D\u5728\u9009\u62E9\u533A\u95F4\u65F6\uFF0C\u70B9\u51FB\u786E\u5B9A\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/3195" target="_blank">#3195</a></li><li>tag: \u4FEE\u590D css \u53D8\u91CF\u540D\u62FC\u5199\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/3191" target="_blank">#3191</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.1" target="_blank">v1.3.1</a></h3><p><code>2020-05-24</code></p><p><strong>Features</strong></p><ul><li>Button: \u65B0\u589E class-prefix \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3159" target="_blank">#3159</a></li><li>Collapse: \u65B0\u589E open\u3001close \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3176" target="_blank">#3176</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>\u4FEE\u590D\u63A7\u5236\u53F0\u63D0\u793A\u9009\u62E9\u5668\u9519\u8BEF\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3137" target="_blank">#3137</a></li><li>\u4FEE\u590D GoodsActionButton \u5728\u67D0\u4E9B\u60C5\u51B5\u4E0B\u62A5\u9519\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3145" target="_blank">#3145</a></li></ul></div><div class="van-doc-card"><h3 id="v1.3.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.3.0" target="_blank">v1.3.0</a></h3><p><code>2020-05-08</code></p><h4 id="zhi-chi-jian-yi-shuang-xiang-bang-ding" tabindex="-1">\u652F\u6301\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A</h4><p>1.3.0 \u4E2D\uFF0C\u6211\u4EEC\u4E3A\u6570\u4E2A\u8868\u5355\u7EC4\u4EF6\u652F\u6301\u4E86\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A\uFF0C\u6D89\u53CA\u7EC4\u4EF6\u6709</p><p>Slider <a href="https://github.com/youzan/vant-weapp/pull/3107" target="_blank">#3107</a></p><p>Search <a href="https://github.com/youzan/vant-weapp/pull/3106" target="_blank">#3106</a></p><p>Rate <a href="https://github.com/youzan/vant-weapp/pull/3105" target="_blank">#3105</a></p><p><strong>Features</strong></p><ul><li>sticky: \u65B0\u589E scroll-top \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3115" target="_blank">#3115</a></li><li>button: \u65B0\u589E dataset \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3075" target="_blank">#3075</a></li><li>uploader: \u6240\u6709\u7C7B\u578B\u90FD\u4F1A\u89E6\u53D1 click-preview \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/3071" target="_blank">#3071</a></li><li>Uploader: \u5C5E\u6027 accept \u65B0\u589E\u503C media <a href="https://github.com/youzan/vant-weapp/pull/3047" target="_blank">#3047</a></li><li>feat: \u65B0\u589E\u57FA\u7840 font-family <a href="https://github.com/youzan/vant-weapp/pull/3061" target="_blank">#3061</a></li><li>submit-bar: \u4F7F\u7528\u53E6\u4E00\u4E2A view \u5B9E\u73B0 safe-area-inset-bottom \u4EE5\u907F\u514D\u6837\u5F0F\u51B2\u7A81 <a href="https://github.com/youzan/vant-weapp/pull/3104" target="_blank">#3104</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>dialog: \u4FEE\u590D title \u591A\u4F59\u7A7A\u683C\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/3069" target="_blank">#3069</a></li><li>tab: \u4FEE\u590D tab \u4E2A\u6570\u591A\u65F6\u663E\u793A\u6EDA\u52A8\u6761 <a href="https://github.com/youzan/vant-weapp/pull/3072" target="_blank">#3072</a></li><li>Sticky: \u4FEE\u590D\u4F7F\u7528\u7EC4\u4EF6\u65F6\u9875\u9762 onPageScroll \u5931\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3092" target="_blank">#3092</a></li><li>button: \u4FEE\u590D disabled \u5C5E\u6027\u5BF9 open-type \u7C7B\u578B\u7684\u6309\u94AE\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3076" target="_blank">#3076</a></li></ul></div><div class="van-doc-card"><h3 id="v1.2.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.2.2" target="_blank">v1.2.2</a></h3><p><code>2020-04-21</code></p><p><strong>Features</strong></p><ul><li>GoodsActionButton: \u65B0\u589E CSS \u53D8\u91CF goods-action-line-height <a href="https://github.com/youzan/vant-weapp/pull/3037" target="_blank">#3037</a></li><li>Calendar: \u9009\u62E9\u533A\u95F4\u5927\u4E8E range \u65F6\u81EA\u52A8\u9009\u4E2D\u6700\u5927\u8303\u56F4 <a href="https://github.com/youzan/vant-weapp/pull/3026" target="_blank">#3026</a></li><li>Notify: \u65B0\u589E top \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/3018" target="_blank">#3018</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u672A\u8BBE\u7F6E autosize \u65F6 wxs \u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/3038" target="_blank">#3038</a></li><li>Field: \u907F\u514D\u8BBE\u7F6E showClear \u4E3A undefined <a href="https://github.com/youzan/vant-weapp/pull/3012" target="_blank">#3012</a></li></ul></div><div class="van-doc-card"><h3 id="v1.2.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.2.1" target="_blank">v1.2.1</a></h3><p><code>2020-04-12</code></p><p><strong>Features</strong></p><ul><li>Field: \u652F\u6301\u5C0F\u7A0B\u5E8F\u53CC\u5411\u7ED1\u5B9A <a href="https://github.com/youzan/vant-weapp/pull/2986" target="_blank">#2986</a></li><li>Calendar: \u591A\u9009\u6A21\u5F0F\u4E0B\u65B0\u589E unselect \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2990" target="_blank">#2990</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>IndexBar: \u79FB\u9664 scroll-top \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2999" target="_blank">#2999</a></li><li>Uploader: \u4FEE\u590D\u56FE\u7247\u540E\u7F00\u540D\u4E3A\u5927\u5199\u65F6\u672A\u6B63\u5E38\u8BC6\u522B <a href="https://github.com/youzan/vant-weapp/pull/2987" target="_blank">#2987</a></li><li>Field: \u4FEE\u590D autosize \u5C5E\u6027 \u8BBE\u7F6E max-height \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/3007" target="_blank">#3007</a></li></ul></div><div class="van-doc-card"><h3 id="v1.2.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.2.0" target="_blank">v1.2.0</a></h3><p><code>2020-04-04</code></p><p><strong>Features</strong></p><ul><li>TreeSelect: \u66F4\u65B0 nav \u80CC\u666F\u8272 <a href="https://github.com/youzan/vant-weapp/pull/2952" target="_blank">#2952</a></li><li>Sticky: \u4F7F\u7528 page scroll \u91CD\u6784\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2950" target="_blank">#2950</a></li><li>Field: \u65B0\u589E auto-focus\u3001disable-default-padding\u3001cursor \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2936" target="_blank">#2936</a></li><li>Field: \u65B0\u589E linechange\u3001keyboardheightchange \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2936" target="_blank">#2936</a></li><li>Uploader: \u652F\u6301\u663E\u793A\u4E0A\u4F20\u72B6\u6001 <a href="https://github.com/youzan/vant-weapp/pull/2929" target="_blank">#2929</a></li><li>Image: mode \u5C5E\u6027\u65B0\u589E widthFix\u3001heightFix <a href="https://github.com/youzan/vant-weapp/pull/2908" target="_blank">#2908</a></li><li>Canvas: \u65B0\u589E type \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2906" target="_blank">#2906</a></li><li>NavBar: \u65B0\u589E placeholder \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2896" target="_blank">#2896</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: \u4FEE\u590D\u8F93\u5165\u8FC7\u5FEB\u65F6\u8F93\u5165\u6846\u5185\u5BB9\u4E0D\u65AD\u56DE\u9000 <a href="https://github.com/youzan/vant-weapp/pull/2936" target="_blank">#2936</a></li><li>Calendar: \u4FEE\u590D show-confirm \u4E3A true \u65F6\u7EC4\u4EF6\u521D\u59CB\u5316\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/2951" target="_blank">#2951</a></li><li>Tab: \u4FEE\u590D type \u4E3A card \u65F6 color \u5BF9\u8FB9\u6846\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2941" target="_blank">#2941</a></li></ul></div><div class="van-doc-card"><h3 id="v1.1.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.1.0" target="_blank">v1.1.0</a></h3><p><code>2020-03-21</code></p><p><strong>Features</strong></p><ul><li>\u65B0\u589E Calendar \u65E5\u5386\u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2894" target="_blank">#2894</a></li><li>Grid: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B custom-class\u3001content-class\u3001icon-class\u3001text-class <a href="https://github.com/youzan/vant-weapp/pull/2882" target="_blank">#2882</a></li><li>Steps: \u65B0\u589E click \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2874" target="_blank">#2874</a></li><li>SideBar: \u65B0\u589E title \u63D2\u69FD <a href="https://github.com/youzan/vant-weapp/pull/2873" target="_blank">#2873</a></li><li>Uploader: \u65B0\u589E upload-icon \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2869" target="_blank">#2869</a></li><li>Uploader: \u65B0\u589E show-upload \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2868" target="_blank">#2868</a></li><li>Uploader: \u66F4\u65B0\u6837\u5F0F\u3001\u8C03\u6574\u4E8B\u4EF6\u89E6\u53D1\u987A\u5E8F\u4E0E vant \u4E00\u81F4 <a href="https://github.com/youzan/vant-weapp/pull/2886" target="_blank">#2886</a></li><li>Field: \u65B0\u589E show-word-limit \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2856" target="_blank">#2856</a></li><li>Field: autosize \u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\uFF0C\u6307\u5B9A maxHeight \u4E0E minHeight <a href="https://github.com/youzan/vant-weapp/pull/2856" target="_blank">#2856</a></li><li>Field: \u65B0\u589E\u82E5\u5E72 CSS \u53D8\u91CF <a href="https://github.com/youzan/vant-weapp/pull/2856" target="_blank">#2856</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: \u79FB\u9664 lang \u5C5E\u6027\u9ED8\u8BA4\u503C <a href="https://github.com/youzan/vant-weapp/pull/2883" target="_blank">#2883</a></li><li>Button: \u4FEE\u590D disabled \u5C5E\u6027\u5BF9\u539F\u751F\u4E8B\u4EF6\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2878" target="_blank">#2878</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.7" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.7" target="_blank">v1.0.7</a></h3><p><code>2020-03-04</code></p><p><strong>Features</strong></p><ul><li>DropdownItem: \u65B0\u589E <code>popupStyle</code> \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2804" target="_blank">#2804</a></li><li>DropdownItem: \u65B0\u589E <code>open</code> <code>close</code> <code>opened</code> <code>closed</code> \u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2804" target="_blank">#2804</a></li><li>Card: \u65B0\u589E <code>price</code> <code>num</code> \u63D2\u69FD <a href="https://github.com/youzan/vant-weapp/pull/2787" target="_blank">#2787</a></li><li>Card: \u65B0\u589E <code>origin-price-class</code> \u5916\u90E8\u6837\u5F0F\u7C7B <a href="https://github.com/youzan/vant-weapp/pull/2787" target="_blank">#2787</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tab: \u4FEE\u590D\u5185\u5BB9\u9879\u9AD8\u5EA6\u4E0D\u540C\u65F6\u7C98\u6027\u5E03\u5C40\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/2817" target="_blank">#2817</a></li><li>Picker: \u4FEE\u590D\u672A\u9009\u4E2D\u9879\u6837\u5F0F\u672A\u7F6E\u7070 <a href="https://github.com/youzan/vant-weapp/pull/2816" target="_blank">#2816</a></li><li>GoodsActionButton: \u4FEE\u590D\u4EC5\u4F7F\u7528\u4E00\u4E2A button \u65F6\u6837\u5F0F\u5F02\u5E38 <a href="https://github.com/youzan/vant-weapp/pull/2808" target="_blank">#2808</a></li><li>Radio: <code>name</code>\u7C7B\u578B\u4E0E<code>value</code>\u7EDF\u4E00 <a href="https://github.com/youzan/vant-weapp/pull/2801" target="_blank">#2801</a></li><li>Uploader: \u4FEE\u590D\u6587\u6863\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2777" target="_blank">#2777</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.6" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.6" target="_blank">v1.0.6</a></h3><p><code>2020-02-24</code></p><p><strong>Features</strong></p><ul><li>GoodsActionButton: \u65B0\u589E\u9ED8\u8BA4 slot <a href="https://github.com/youzan/vant-weapp/pull/2779" target="_blank">#2779</a></li><li>SubmitBar: \u66F4\u65B0\u5706\u89D2\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/2755" target="_blank">#2755</a></li><li>Card: \u66F4\u65B0\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/2754" target="_blank">#2754</a></li><li>\u4F18\u5316 relation \u90E8\u5206\u4EE3\u7801 <a href="https://github.com/youzan/vant-weapp/pull/2760" target="_blank">#2760</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>DropdownItem: \u4FEE\u590D\u70B9\u51FB\u9009\u9879\u65F6\u4E0D\u89E6\u53D1<code>close</code>\u4E8B\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2766" target="_blank">#2766</a></li><li>GoodsActionButton: \u4FEE\u590D\u4F4E\u7248\u672C\u57FA\u7840\u5E93\u4E0B\u7684\u6837\u5F0F\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/2762" target="_blank">#2762</a></li><li>Tabs: \u4FEE\u590D\u70B9\u51FB\u7981\u7528\u9879\u65F6\u4E8B\u4EF6\u53C2\u6570\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2758" target="_blank">#2758</a></li><li>Checkbox: \u4FEE\u590D\u52A8\u6001\u8BBE\u7F6E<code>disabled</code>\u5C5E\u6027\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2748" target="_blank">#2748</a></li><li>Button: add loading color when plain is true <a href="https://github.com/youzan/vant-weapp/pull/2746" target="_blank">#2746</a></li><li>Radio: \u4FEE\u590D<code>label-disabled</code>\u6587\u6863\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2763" target="_blank">#2763</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.5" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.5" target="_blank">v1.0.5</a></h3><p><code>2020-02-07</code></p><p><strong>Features</strong></p><ul><li>ActionSheet: actions \u652F\u6301\u66F4\u591A openType <a href="https://github.com/youzan/vant-weapp/pull/2715" target="_blank">#2715</a></li><li>Uploader: \u65B0\u589E\u5F00\u59CB<code>disabled</code>\u65F6\u7684\u7EC4\u4EF6\u6837\u5F0F <a href="https://github.com/youzan/vant-weapp/pull/2720" target="_blank">#2720</a></li><li>Icon: \u8C03\u6574\u793A\u4F8B\u5C0F\u7A0B\u5E8F\u9875\u9762\u4E0E vant \u5BF9\u9F50 <a href="https://github.com/youzan/vant-weapp/pull/2728" target="_blank">#2728</a></li><li>\u793A\u4F8B\u5C0F\u7A0B\u5E8F\u9996\u9875\u4E0E vant \u5BF9\u9F50 <a href="https://github.com/youzan/vant-weapp/pull/2729" target="_blank">#2729</a></li><li>\u5B8C\u5584\u5FEB\u901F\u4E0A\u624B\u6587\u6863\uFF0C\u589E\u52A0 npm \u6784\u5EFA\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/pull/2726" target="_blank">#2726</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Radio: \u4FEE\u590D<code>disabled</code>\u5C5E\u6027\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2711" target="_blank">#2711</a></li><li>Tab: \u4FEE\u590D<code>animated</code>\u5C5E\u6027\u65E0\u6CD5\u52A8\u6001\u5207\u6362 <a href="https://github.com/youzan/vant-weapp/pull/2712" target="_blank">#2712</a></li><li>Circle: \u4FEE\u6B63\u6587\u6863\u9519\u8BEF\uFF0C<code>size</code>\u5C5E\u6027\u4E0D\u652F\u6301<code>string</code>\u7C7B\u578B <a href="https://github.com/youzan/vant-weapp/pull/2694" target="_blank">#2694</a></li><li>\u4FEE\u6B63\u6587\u6863\u9ED8\u8BA4 slot \u540D\u79F0\u4E3A default \u7684\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2726" target="_blank">#2726</a></li><li>TreeSelect: \u4FEE\u6B63\u6587\u6863\u793A\u4F8B\u4EE3\u7801\u6807\u7B7E\u95ED\u5408\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2710" target="_blank">#2710</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.4" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.4" target="_blank">v1.0.4</a></h3><p><code>2020-01-21</code></p><p><strong>Features</strong></p><ul><li>Stepper: \u65B0\u589E disable-long-press \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2691" target="_blank">#2691</a></li><li>quickstart: \u5FEB\u901F\u4E0A\u624B\u65B0\u589E\u5173\u95ED style v2 \u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/pull/2704" target="_blank">#2704</a></li><li>Search: \u65B0\u589E background\u3001disabled\u3001input-align \u6587\u6863\u793A\u4F8B <a href="https://github.com/youzan/vant-weapp/pull/2698" target="_blank">#2698</a></li><li>Icon: \u6587\u6863\u65B0\u589E\u56FE\u6807\u6587\u5B57\u52A0\u8F7D\u5931\u8D25\u8BF4\u660E <a href="https://github.com/youzan/vant-weapp/pull/2681" target="_blank">#2681</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Sticky: \u4FEE\u590D\u771F\u673A\u4E0A\u9875\u9762\u6EDA\u52A8\u7F13\u6162\u65F6\u65E0\u6CD5\u5438\u9876/\u53D6\u6D88\u5438\u9876 <a href="https://github.com/youzan/vant-weapp/pull/2703" target="_blank">#2703</a></li><li>DropdownItem: \u4FEE\u590D wx:key \u8B66\u544A <a href="https://github.com/youzan/vant-weapp/pull/2670" target="_blank">#2670</a></li><li>IndexBar: \u6587\u6863\u4FEE\u590D\u7EC4\u4EF6\u5F15\u5165\u8DEF\u5F84\u9519\u8BEF <a href="https://github.com/youzan/vant-weapp/pull/2689" target="_blank">#2689</a></li><li>\u5347\u7EA7\u4F9D\u8D56\u7248\u672C\u4EE5\u907F\u514D\u5B89\u5168\u8B66\u544A <a href="https://github.com/youzan/vant-weapp/pull/2680" target="_blank">#2680</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.3" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.3" target="_blank">v1.0.3</a></h3><p><code>2020-01-09</code></p><p><strong>Features</strong></p><ul><li>npm \u5305\u9ED8\u8BA4\u8F93\u51FA es5 \u7248\u672C\u4EE3\u7801 <a href="https://github.com/youzan/vant-weapp/pull/2639" target="_blank">#2639</a></li><li>Steps: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B desc-class <a href="https://github.com/youzan/vant-weapp/pull/2630" target="_blank">#2630</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tab: \u89E3\u51B3\u52A8\u6001\u6DFB\u52A0\u9009\u9879\u65F6\uFF0C\u987A\u5E8F\u9519\u4E71\u548C\u4E0B\u5212\u7EBF\u957F\u5EA6\u4E0D\u53D8\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/2663" target="_blank">#2663</a></li><li>NavBar: \u4FEE\u590D\u8FD4\u56DE\u56FE\u6807\u672A\u5C45\u4E2D\u7684\u95EE\u9898 <a href="https://github.com/youzan/vant-weapp/pull/2633" target="_blank">#2633</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.2" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.2" target="_blank">v1.0.2</a></h3><p><code>2019-12-31</code></p><p><strong>Features</strong></p><ul><li>Skeleton: \u65B0\u589E\u5916\u90E8\u6837\u5F0F\u7C7B<code>row-class``avatar-class``title-class</code> <a href="https://github.com/youzan/vant-weapp/pull/2612" target="_blank">#2612</a></li><li>SwipeCell: \u652F\u6301\u52A8\u6001\u4FEE\u6539<code>width</code>\u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2607" target="_blank">#2607</a></li><li>Uploader: \u65B0\u589E<code>camera``compressed``maxDuration</code>\u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2584" target="_blank">#2584</a></li></ul><p><strong>Improvements</strong></p><ul><li>Tab: \u4F18\u5316\u5F39\u6027\u6EDA\u52A8\u6548\u679C <a href="https://github.com/youzan/vant-weapp/pull/2606" target="_blank">#2606</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>IndexBar: \u4FEE\u590D\u5B57\u6BCD\u672A\u5168\u90E8\u5B9A\u4E49\u65F6 click \u4E8B\u4EF6\u62A5\u9519 <a href="https://github.com/youzan/vant-weapp/pull/2605" target="_blank">#2605</a></li><li>Field: \u4FEE\u590D\u70B9\u51FB\u6E05\u9664\u56FE\u6807\u540E\u4E0B\u4E00\u6B21\u70B9\u51FB\u65E0\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2602" target="_blank">#2602</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.1" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.1" target="_blank">v1.0.1</a></h3><p><code>2019-12-23</code></p><p><strong>Features</strong></p><ul><li>Uploader: \u65B0\u589E sizeType \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2563" target="_blank">#2563</a></li><li>GoodsActionButton: \u65B0\u589E plain \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2559" target="_blank">#2559</a></li><li>Uploader: \u53BB\u9664 use-slot \u5C5E\u6027 <a href="https://github.com/youzan/vant-weapp/pull/2551" target="_blank">#2551</a></li><li>\u65B0\u589E\u6837\u5F0F\u8986\u76D6\u8BF4\u660E\u6587\u6863 <a href="https://github.com/youzan/vant-weapp/pull/2566" target="_blank">#2566</a></li></ul><p><strong>Improvements</strong></p><ul><li>\u4F7F\u7528 nextTick \u4F18\u5316\u90E8\u5206\u5F02\u6B65\u903B\u8F91 <a href="https://github.com/youzan/vant-weapp/pull/2561" target="_blank">#2561</a></li><li>wxs \u65B0\u589E addUnit \u65B9\u6CD5\u4EE5\u51CF\u5C11 setData \u8C03\u7528\u6B21\u6570 <a href="https://github.com/youzan/vant-weapp/pull/2550" target="_blank">#2550</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tag: \u4FEE\u590D\u672A\u4F9D\u8D56 van-icon \u7EC4\u4EF6 <a href="https://github.com/youzan/vant-weapp/pull/2579" target="_blank">#2579</a></li><li>Notify: \u4FEE\u590D safeAreaInsetTop \u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2558" target="_blank">#2558</a></li><li>Uploader: \u4FEE\u590D capture \u5C5E\u6027\u4E0D\u751F\u6548 <a href="https://github.com/youzan/vant-weapp/pull/2551" target="_blank">#2551</a></li></ul></div><div class="van-doc-card"><h3 id="v1.0.0" tabindex="-1"><a href="https://github.com/youzan/vant-weapp/tree/v1.0.0" target="_blank">v1.0.0</a></h3><p><code>2019-12-11</code></p><h4 id="zhu-yao-bian-dong" tabindex="-1">\u4E3B\u8981\u53D8\u52A8</h4><ul><li>npm \u5305\u540D\u7531 vant-weapp \u91CD\u547D\u540D\u4E3A @vant/weapp</li><li>\u589E\u52A0\u5341\u4E00\u4E2A\u65B0\u7EC4\u4EF6</li><li>\u589E\u52A0\u6570\u5341\u4E2A API</li><li>\u6240\u6709\u7EC4\u4EF6\u652F\u6301\u901A\u8FC7<code>CSS\u81EA\u5B9A\u4E49\u5C5E\u6027</code>\u81EA\u5B9A\u4E49\u6837\u5F0F</li><li>\u4F7F\u7528<code>env()</code>\u91CD\u6784 iOS \u5B89\u5168\u533A\u57DF\u9002\u914D</li><li>\u8C03\u6574\u90E8\u5206 API \u547D\u540D\uFF0C\u5E9F\u9664\u5C11\u91CF API</li></ul><h4 id="xin-zu-jian" tabindex="-1">\u65B0\u7EC4\u4EF6</h4><p>\u5728 Vant Weapp 1.0 \u7248\u672C\u4E2D\uFF0C\u6211\u4EEC\u65B0\u589E\u4E86 11 \u4E2A\u5B9E\u7528\u7684\u57FA\u7840\u7EC4\u4EF6\uFF1A</p><ul><li><b>Grid \u5BAB\u683C</b>\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A</li><li><b>Image \u56FE\u7247</b>\uFF0C\u589E\u5F3A\u7248\u7684 Image \u6807\u7B7E\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u4E0E\u52A0\u8F7D\u5931\u8D25\u63D0\u793A</li><li><b>Circle \u73AF\u5F62\u8FDB\u5EA6\u6761</b>\uFF0C\u544A\u77E5\u7528\u6237\u5F53\u524D\u7684\u72B6\u6001\u548C\u8FDB\u5EA6</li><li><b>Overaly \u906E\u7F69\u5C42</b>\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C</li><li><b>Divider \u5206\u5272\u7EBF</b>\uFF0C\u533A\u9694\u5185\u5BB9\u7684\u5206\u5272\u7EBF</li><li><b>Sticky \u7C98\u6027\u5E03\u5C40</b>\uFF0C\u4E0E CSS \u4E2D<code>position: sticky</code>\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u7C7B\u4F3C</li><li><b>Skeleton \u9AA8\u67B6\u5C4F</b>\uFF0C\u5728\u5F85\u52A0\u8F7D\u533A\u57DF\u5C55\u793A\u7684\u5360\u4F4D\u533A\u5757\uFF0C\u63D0\u4F9B\u754C\u9762\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u7684\u8FC7\u6E21\u6548\u679C</li><li><b>IndexBar \u7D22\u5F15\u680F</b>\uFF0C\u901A\u8BAF\u5F55\u4E2D\u7684\u5B57\u6BCD\u7D22\u5F15\u680F\uFF0C\u7528\u4E8E\u957F\u5217\u8868\u5FEB\u901F\u7D22\u5F15</li><li><b>Uploader \u6587\u4EF6\u4E0A\u4F20</b>\uFF0C\u4E0A\u4F20\u4E00\u4E2A\u6216\u591A\u4E2A\u6587\u4EF6</li><li><b>CountDown \u5012\u8BA1\u65F6</b>\uFF0C\u7528\u4E8E\u663E\u793A\u6D3B\u52A8\u5012\u8BA1\u65F6\u3001\u77ED\u4FE1\u9A8C\u8BC1\u7801\u7B49</li><li><b>DropdownMenu \u4E0B\u62C9\u83DC\u5355</b>\uFF0C\u7528\u4E8E\u5217\u8868\u7684\u5206\u7C7B\u9009\u62E9\u3001\u7B5B\u9009\u53CA\u6392\u5E8F</li></ul><p><img src="https://img.yzcdn.cn/public_files/2019/12/06/748d9b70feb76eeaf44f9d6080b6e108.png" alt=""></p><h4 id="yang-shi-ding-zhi" tabindex="-1">\u6837\u5F0F\u5B9A\u5236</h4><p>\u5728 1.0 \u8FED\u4EE3\u8BA1\u5212\u786E\u5B9A\u4E4B\u521D\uFF0C\u6211\u4EEC\u5C31\u4E0D\u65AD\u601D\u8003\u8FD9\u6837\u4E00\u4E2A\u95EE\u9898 -- \u8BE5\u5982\u4F55\u7ED9\u7528\u6237\u63D0\u4F9B\u52A8\u6001\u5207\u6362\u4E3B\u9898\u6837\u5F0F\u7684\u529F\u80FD\u5462\uFF1F</p><p>\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u73AF\u5883\u662F\u975E\u5E38\u7279\u6B8A\u7684\u3002\u4E0D\u5177\u6709\u52A8\u6001\u52A0\u8F7D\u4EE3\u7801\u7684\u673A\u5236\uFF0C\u540C\u65F6\u5FAE\u4FE1\u53C8\u9650\u5236\u4E86\u4EE3\u7801\u7684\u4E3B\u5305\u5927\u5C0F\u548C\u603B\u5927\u5C0F\u3002\u4F20\u7EDF\u7684\u57FA\u4E8E\u9884\u8BBE\u7684\u6837\u5F0F\u5B9A\u5236\u8FC7\u4E8E\u81C3\u80BF\uFF0C\u4E0D\u518D\u9002\u5408\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u73AF\u5883\u3002</p><p>\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684\u7EC4\u4EF6\u6A21\u578B\u76F8\u5F53\u4E8E\u4E00\u4E2A\u7B80\u5316\u7248\u7684 <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-CN" target="_blank">Shadow DOM</a>\uFF0C\u5E78\u8FD0\u7684\u662F\uFF0C\u5C0F\u7A0B\u5E8F\u4E5F\u652F\u6301\u4E86 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">CSS \u81EA\u5B9A\u4E49\u5C5E\u6027</a> \u7684\u7279\u6027\u3002\u6700\u7EC8\uFF0C\u6211\u4EEC\u57FA\u4E8E CSS \u81EA\u5B9A\u4E49\u5C5E\u6027\u8BBE\u8BA1\u4E86\u6837\u5F0F\u5B9A\u5236\u7684\u65B9\u6848\uFF0C\u5F00\u53D1\u8005\u4F7F\u7528\u7075\u6D3B\u3001\u65B9\u4FBF\uFF0C\u7EC4\u4EF6\u7EF4\u62A4\u4E5F\u66F4\u7B80\u5355\u3002</p><p>\u4ECE 1.0 \u7248\u672C\u5F00\u59CB\uFF0CVant Weapp \u4E2D\u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u652F\u6301\u901A\u8FC7 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">CSS \u7EC4\u5B9A\u4E49\u5C5E\u6027</a> \u8FDB\u884C\u6837\u5F0F\u5B9A\u5236\uFF0C\u5177\u4F53\u4F7F\u7528\u59FF\u52BF\u53EF\u67E5\u770B<a href="https://youzan.github.io/vant-weapp/#/theme" target="_blank">\u76F8\u5173\u6587\u6863</a></p><p><img src="https://img.yzcdn.cn/public_files/2019/06/11/9a066c1a212264c7ae56065e1f13d317.png" alt="\u5B9A\u5236\u4E3B\u9898"></p><h4 id="bu-jian-rong-geng-xin" tabindex="-1">\u4E0D\u517C\u5BB9\u66F4\u65B0</h4><p>1.0 \u7248\u672C\u4E2D\u5305\u542B\u5C11\u91CF\u4E0D\u517C\u5BB9\u66F4\u65B0\uFF0C\u4E3B\u8981\u662F\u547D\u540D\u8C03\u6574\u548C\u79FB\u9664\u4E2A\u522B\u5C5E\u6027\u3002\u5BF9\u4E8E\u6B63\u5728\u4F7F\u7528 0.x \u7248\u672C\u7684\u9879\u76EE\uFF0C\u8BF7\u6309\u7167\u4E0B\u65B9\u7684\u5217\u8868\u4F9D\u6B21\u68C0\u67E5\uFF0C\u5927\u90E8\u5206\u9879\u76EE\u53EF\u4EE5<b>\u65E0\u75DB\u5347\u7EA7</b>\u3002</p><h5 id="badge" tabindex="-1">Badge</h5><ul><li><code>BadgeGroup</code>\u91CD\u547D\u540D\u4E3A<code>Sidebar</code></li><li><code>Badge</code>\u91CD\u547D\u540D\u4E3A<code>SlidebarItem</code></li><li><code>active</code>\u5C5E\u6027\u91CD\u547D\u540D\u4E3A<code>activeKey</code></li></ul><h5 id="notify" tabindex="-1">Notify</h5><ul><li><code>text</code>\u9009\u9879\u91CD\u547D\u540D\u4E3A<code>message</code></li><li><code>backgroundColor</code>\u9009\u9879\u91CD\u547D\u540D\u4E3A<code>background</code></li></ul><h5 id="popup" tabindex="-1">Popup</h5><ul><li>\u53BB\u9664<code>transitionend</code>\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6</li></ul><h5 id="switchcell" tabindex="-1">SwitchCell</h5><ul><li>\u79FB\u9664\u4E86<code>SwitchCell</code>\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u4F7F\u7528<code>Cell</code>\u548C<code>Switch</code>\u7EC4\u4EF6\u4EE3\u66FF</li></ul><h5 id="transition" tabindex="-1">Transition</h5><ul><li>\u53BB\u9664<code>transitionend</code>\u4E8B\u4EF6\uFF0C\u65B0\u589E 6 \u4E2A\u4E8B\u4EF6</li></ul><hr><h4 id="xin-te-xing" tabindex="-1">\u65B0\u7279\u6027</h4><h5 id="actionsheet" tabindex="-1">ActionSheet</h5><ul><li>\u65B0\u589E<code>click-overlay</code>\u4E8B\u4EF6</li><li>\u65B0\u589E<code>close-on-click-action</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>color</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>description</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>round</code>\u5C5E\u6027</li></ul><h5 id="area" tabindex="-1">Area</h5><ul><li>\u65B0\u589E<code>columns-placeholder</code>\u5C5E\u6027</li><li><code>reset</code>\u65B9\u6CD5\u652F\u6301\u4F20\u5165<code>code</code>\u53C2\u6570</li></ul><h5 id="button" tabindex="-1">Button</h5><ul><li>\u65B0\u589E<code>loading-type</code>\u5C5E\u6027</li><li><code>color</code>\u5C5E\u6027\u652F\u6301\u6E10\u53D8\u8272</li><li>\u5207\u6362<code>disabled</code>\u65F6\u589E\u52A0\u8FC7\u6E21\u6548\u679C</li></ul><h5 id="checkbox" tabindex="-1">Checkbox</h5><ul><li>\u65B0\u589E<code>icon-size</code>\u5C5E\u6027</li></ul><h5 id="color" tabindex="-1">Color</h5><ul><li>\u57FA\u7840\u7EA2\u8272\u66F4\u65B0\u4E3A<code>#ee0a24</code></li></ul><h5 id="datetimepicker" tabindex="-1">DatetimePicker</h5><ul><li>\u65B0\u589E<code>filter</code>\u5C5E\u6027</li></ul><h5 id="dialog" tabindex="-1">Dialog</h5><ul><li>\u4F18\u5316\u6587\u5B57\u6362\u884C</li><li>\u65B0\u589E<code>title</code>\u63D2\u69FD</li><li>\u65B0\u589E<code>confirm-button-color</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>cancel-button-color</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>width</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>overlay-style</code>\u5C5E\u6027</li></ul><h5 id="field" tabindex="-1">Field</h5><ul><li>\u65B0\u589E<code>clickable</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>arrow-direction</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>hold-keyboard</code>\u5C5E\u6027</li></ul><h5 id="goodsactionbutton" tabindex="-1">GoodsActionButton</h5><ul><li>\u65B0\u589E<code>color</code>\u5C5E\u6027</li><li>\u6837\u5F0F\u5347\u7EA7\u4E3A\u5706\u89D2\u98CE\u683C</li></ul><h5 id="goodsactionicon" tabindex="-1">GoodsActionIcon</h5><ul><li>\u65B0\u589E<code>icon</code>\u63D2\u69FD</li><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li></ul><h5 id="griditem" tabindex="-1">GridItem</h5><ul><li>\u65B0\u589E<code>info</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li></ul><h5 id="icon" tabindex="-1">Icon</h5><ul><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>down</code>\u56FE\u6807</li><li>\u65B0\u589E<code>wap-hone</code>\u5B9E\u5E95\u98CE\u683C\u56FE\u6807</li><li>\u652F\u6301<code>number</code>\u7C7B\u578B\u7684<code>size</code>\u5C5E\u6027</li></ul><h5 id="loading" tabindex="-1">Loading</h5><ul><li>\u652F\u6301<code>number</code>\u7C7B\u578B\u7684<code>size</code>\u5C5E\u6027</li></ul><h5 id="noticebar" tabindex="-1">NoticeBar</h5><ul><li>\u963B\u6B62\u5173\u95ED\u56FE\u6807\u70B9\u51FB\u4E8B\u4EF6\u5192\u6CE1</li></ul><h5 id="notify-1" tabindex="-1">Notify</h5><ul><li>\u65B0\u589E<code>clear</code>\u65B9\u6CD5</li></ul><h5 id="popup-1" tabindex="-1">Popup</h5><ul><li>\u65B0\u589E<code>round</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>closeable</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>close-icon</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>close-icon-position</code>\u5C5E\u6027</li></ul><h5 id="progress" tabindex="-1">Progress</h5><ul><li>\u65B0\u589E<code>stroke-width</code>\u5C5E\u6027</li></ul><h5 id="radio" tabindex="-1">Radio</h5><ul><li>\u65B0\u589E<code>icon-size</code>\u5C5E\u6027</li></ul><h5 id="rate" tabindex="-1">Rate</h5><ul><li>\u4F18\u5316\u624B\u52BF\u5224\u65AD</li><li>\u65B0\u589E<code>gutter</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>touchable</code>\u5C5E\u6027</li><li>\u652F\u6301<code>string</code>\u7C7B\u578B\u7684<code>size</code>\u5C5E\u6027</li></ul><h5 id="search" tabindex="-1">Search</h5><ul><li>\u65B0\u589E<code>action-text</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>left-icon</code>\u63D2\u69FD</li><li>\u65B0\u589E<code>right-icon</code>\u63D2\u69FD</li></ul><h5 id="slidebaritem" tabindex="-1">SlidebarItem</h5><ul><li>\u65B0\u589E<code>dot</code>\u5C5E\u6027</li></ul><h5 id="slider" tabindex="-1">Slider</h5><ul><li>\u65B0\u589E<code>drag-start</code>\u4E8B\u4EF6</li><li>\u65B0\u589E<code>drag-end</code>\u4E8B\u4EF6</li><li>\u652F\u6301\u4F20\u5165\u4EFB\u610F\u8303\u56F4\u7684<code>max</code>\u548C<code>min</code>\u5C5E\u6027</li><li>\u652F\u6301<code>number</code>\u7C7B\u578B\u7684<code>bar-height</code>\u5C5E\u6027</li><li>\u589E\u52A0\u6ED1\u52A8\u52A8\u753B</li><li>\u589E\u5927\u70B9\u51FB\u533A\u57DF</li></ul><h5 id="swipecell" tabindex="-1">SwipeCell</h5><ul><li>\u65B0\u589E<code>name</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>open</code>\u4E8B\u4EF6</li><li>\u652F\u6301\u6253\u5F00\u72B6\u6001\u4E92\u65A5</li></ul><h5 id="switch" tabindex="-1">Switch</h5><ul><li>\u52A0\u8F7D\u56FE\u6807\u7684\u989C\u8272\u4F1A\u8DDF\u968F\u5F00\u5173\u72B6\u6001\u53D8\u5316</li></ul><h5 id="stepper" tabindex="-1">Stepper</h5><ul><li>\u652F\u6301\u957F\u6309\u624B\u52BF</li><li>\u65B0\u589E<code>input-width</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>button-size</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>decimalLength</code>\u5C5E\u6027</li><li>\u65B0\u589E disablePlus\u3001disableMinus \u5C5E\u6027</li></ul><h5 id="steps" tabindex="-1">Steps</h5><ul><li>\u65B0\u589E<code>active-icon</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>inactive-icon</code>\u5C5E\u6027</li></ul><h5 id="tabs" tabindex="-1">Tabs</h5><ul><li>\u4F7F\u7528 Sticky \u7EC4\u4EF6\u91CD\u6784\u5438\u9876\u5B9E\u73B0</li><li>\u65B0\u589E<code>name</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>line-height</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>ellipsis</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>lazy-render</code>\u5C5E\u6027</li><li><code>line-width</code>\u5C5E\u6027\u652F\u6301<code>String</code>\u7C7B\u578B</li><li>\u589E\u52A0\u4E91\u5F00\u53D1\u7ED3\u5408\u793A\u4F8B</li></ul><h5 id="treeselect" tabindex="-1">TreeSelect</h5><ul><li>\u65B0\u589E<code>max</code>\u5C5E\u6027</li><li>\u65B0\u589E<code>content</code>\u63D2\u69FD</li></ul></div>',80),f=[q],y={__name:"changelog",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",v,f))}},_={class:"van-doc-markdown-body"},x=d(`<h1>\u6837\u5F0F\u8986\u76D6</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Vant Weapp \u57FA\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684\u673A\u5236\uFF0C\u4E3A\u5F00\u53D1\u8005\u63D0\u4F9B\u4E86\u4EE5\u4E0B 3 \u79CD\u4FEE\u6539\u7EC4\u4EF6\u6837\u5F0F\u7684\u65B9\u6CD5</p></div><div class="van-doc-card"><h3 id="jie-chu-yang-shi-ge-chi" tabindex="-1">\u89E3\u9664\u6837\u5F0F\u9694\u79BB</h3><p>\u6837\u5F0F\u9694\u79BB\u7684\u76F8\u5173\u80CC\u666F\u77E5\u8BC6\u8BF7\u67E5\u9605<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB" target="_blank">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a></p><br><p>Vant Weapp \u7684\u6240\u6709\u7EC4\u4EF6\u90FD\u5F00\u542F\u4E86<code>addGlobalClass: true</code>\u4EE5\u63A5\u53D7\u5916\u90E8\u6837\u5F0F\u7684\u5F71\u54CD\uFF0C\u53EF\u4EE5\u4F7F\u7528\u5982\u4E0B 2 \u79CD\u65B9\u5F0F\u8986\u76D6\u7EC4\u4EF6\u6837\u5F0F</p><blockquote><p>\u5728\u9875\u9762\u4E2D\u4F7F\u7528 Vant Weapp \u7EC4\u4EF6\u65F6\uFF0C\u53EF\u76F4\u63A5\u5728\u9875\u9762\u7684\u6837\u5F0F\u6587\u4EF6\u4E2D\u8986\u76D6\u6837\u5F0F</p></blockquote><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre><pre><code class="language-css"><span class="hljs-comment">/* page.wxss */</span>
<span class="hljs-selector-class">.van-button--primary</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;
<span class="hljs-attribute">background-color</span>: pink;
}
</code></pre><blockquote><p>\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u4F7F\u7528 Vant Weapp \u7EC4\u4EF6\u65F6\uFF0C\u9700\u5F00\u542F<code>styleIsolation: &#39;shared&#39;</code>\u9009\u9879</p></blockquote><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Component</span>({
<span class="hljs-attr">options</span>: {
<span class="hljs-attr">styleIsolation</span>: <span class="hljs-string">&#39;shared&#39;</span>,
},
});
</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.van-button--primary</span> {
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;
<span class="hljs-attribute">background-color</span>: pink;
}
</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-wai-bu-yang-shi-lei" tabindex="-1">\u4F7F\u7528\u5916\u90E8\u6837\u5F0F\u7C7B</h3><p>\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u76F8\u5173\u77E5\u8BC6\u80CC\u666F\u8BF7\u67E5\u9605<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F%E7%B1%BB" target="_blank">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a></p><br><p>Vant Weapp \u5F00\u653E\u4E86\u5927\u91CF\u7684\u5916\u90E8\u6837\u5F0F\u7C7B\u4F9B\u5F00\u53D1\u8005\u4F7F\u7528\uFF0C\u5177\u4F53\u7684\u6837\u5F0F\u7C7B\u540D\u79F0\u53EF\u67E5\u9605\u5BF9\u5E94\u7EC4\u4EF6\u7684\u201C\u5916\u90E8\u6837\u5F0F\u7C7B\u201D\u90E8\u5206\u3002</p><p>\u9700\u8981\u6CE8\u610F\u7684\u662F\u666E\u901A\u6837\u5F0F\u7C7B\u548C\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u4F18\u5148\u7EA7\u662F\u672A\u5B9A\u4E49\u7684\uFF0C\u56E0\u6B64\u4F7F\u7528\u65F6\u8BF7\u6DFB\u52A0<code>!important</code>\u4EE5\u4FDD\u8BC1\u5916\u90E8\u6837\u5F0F\u7C7B\u7684\u4F18\u5148\u7EA7\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span>
<span class="hljs-attr">title-class</span>=<span class="hljs-string">&quot;cell-title&quot;</span>
<span class="hljs-attr">value-class</span>=<span class="hljs-string">&quot;cell-value&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.cell-title</span> {
<span class="hljs-attribute">color</span>: pink <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.cell-value</span> {
<span class="hljs-attribute">color</span>: green <span class="hljs-meta">!important</span>;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span> <span class="hljs-meta">!important</span>;
}
</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-css-bian-liang" tabindex="-1">\u4F7F\u7528 CSS \u53D8\u91CF</h3><p>Vant Weapp \u4E3A\u90E8\u5206 CSS \u5C5E\u6027\u5F00\u653E\u4E86\u57FA\u4E8E CSS \u5C5E\u6027\u7684\u5B9A\u5236\u65B9\u6848\u3002</p><p>\u76F8\u8F83\u4E8E \u89E3\u9664\u6837\u5F0F\u9694\u79BB \u548C \u4F7F\u7528\u5916\u90E8\u6837\u5F0F\u7C7B\uFF0C\u8FD9\u79CD\u65B9\u6848\u652F\u6301\u5728\u9875\u9762\u6216\u5E94\u7528\u7EA7\u522B\u5BF9\u591A\u4E2A\u7EC4\u4EF6\u7684\u6837\u5F0F\u505A\u6279\u91CF\u4FEE\u6539\u4EE5\u8FDB\u884C\u4E3B\u9898\u6837\u5F0F\u7684\u5B9A\u5236\u3002</p><p>\u5F53\u7136\uFF0C\u7528\u5B83\u6765\u4FEE\u6539\u5355\u4E2A\u7EC4\u4EF6\u7684\u90E8\u5206\u6837\u5F0F\u4E5F\u662F\u7EF0\u7EF0\u6709\u4F59\u7684\u3002\u5177\u4F53\u7684\u4F7F\u7528\u65B9\u6CD5\u8BF7\u67E5\u9605<a href="#/theme" target="_blank">\u5B9A\u5236\u4E3B\u9898</a></p></div>`,5),w=[x],k={__name:"custom-style",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",_,w))}},z={class:"van-doc-markdown-body"},C=d('<div class="van-doc-card"><div class="van-doc-intro"><img class="van-doc-intro__logo" style="width:120px;height:120px;box-shadow:none;" src="https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png"><h2 style="margin:0;font-size:32px;line-height:60px;">Vant Weapp</h2><p>\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u5C0F\u7A0B\u5E8F UI \u7EC4\u4EF6\u5E93</p></div></div><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Vant \u662F\u4E00\u4E2A<strong>\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u79FB\u52A8\u7AEF\u7EC4\u4EF6\u5E93</strong>\uFF0C\u4E8E 2017 \u5E74\u5F00\u6E90\u3002</p><p>\u76EE\u524D Vant \u5B98\u65B9\u63D0\u4F9B\u4E86 <a href="https://vant-contrib.gitee.io/vant/v2" target="_blank">Vue 2 \u7248\u672C</a>\u3001<a href="https://vant-contrib.gitee.io/vant" target="_blank">Vue 3 \u7248\u672C</a>\u548C<a href="http://vant-contrib.gitee.io/vant-weapp" target="_blank">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7248\u672C</a>\uFF0C\u5E76\u7531\u793E\u533A\u56E2\u961F\u7EF4\u62A4 <a href="https://github.com/3lang3/react-vant" target="_blank">React \u7248\u672C</a>\u548C<a href="https://github.com/ant-move/Vant-Aliapp" target="_blank">\u652F\u4ED8\u5B9D\u5C0F\u7A0B\u5E8F\u7248\u672C</a>\u3002</p></div><div class="van-doc-card"><h3 id="yu-lan" tabindex="-1">\u9884\u89C8</h3><p>\u626B\u63CF\u4E0B\u65B9\u5C0F\u7A0B\u5E8F\u4E8C\u7EF4\u7801\uFF0C\u4F53\u9A8C\u7EC4\u4EF6\u5E93\u793A\u4F8B\uFF1A</p><img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg" style="width:200px;height:200px;margin-top:15px;box-shadow:none;"><blockquote><p>Tips: \u4E3A\u4E86\u4FBF\u4E8E\u9884\u89C8\u7EC4\u4EF6\u6548\u679C\uFF0C\u672C\u6587\u6863\u7684\u53F3\u4FA7\u5185\u5D4C\u4E86 H5 \u7248\u7684 Vant \u9875\u9762\u4F5C\u4E3A\u53C2\u8003\u3002\u5728\u5B9E\u9645\u4F7F\u7528\u4E2D\uFF0C\u4E2A\u522B\u7EC4\u4EF6\u7684\u8868\u73B0\u53EF\u80FD\u4E0E\u5C0F\u7A0B\u5E8F\u4E0A\u7684\u8868\u73B0\u6709\u5DEE\u5F02\uFF0C\u8BF7\u4EE5\u5B9E\u9645\u6548\u679C\u4E3A\u51C6\u3002</p></blockquote></div><div class="van-doc-card"><h3 id="kuai-su-shang-shou" tabindex="-1">\u5FEB\u901F\u4E0A\u624B</h3><p>\u8BF7\u53C2\u8003 <a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></div><div class="van-doc-card"><h3 id="lian-jie" tabindex="-1">\u94FE\u63A5</h3><ul><li><a href="https://github.com/youzan/vant-weapp/issues" target="_blank">\u610F\u89C1\u53CD\u9988</a></li><li><a href="https://vant-contrib.gitee.io/vant/#/zh-CN/design" target="_blank">\u8BBE\u8BA1\u8D44\u6E90</a></li><li><a href="https://vant-contrib.gitee.io/vant-weapp/#/changelog" target="_blank">\u66F4\u65B0\u65E5\u5FD7</a></li><li><a href="https://github.com/vant-ui/vant-demo" target="_blank">\u5B98\u65B9\u793A\u4F8B</a></li></ul></div><h2 id="gong-xian" tabindex="-1">\u8D21\u732E</h2><div class="van-doc-card"><h3 id="he-xin-tuan-dui" tabindex="-1">\u6838\u5FC3\u56E2\u961F</h3><p>\u4EE5\u4E0B\u662F Vant \u548C Vant Weapp \u7684\u6838\u5FC3\u8D21\u732E\u8005\u4EEC\uFF1A</p><table><thead><tr><th style="text-align:center;"><a href="https://github.com/chenjiahan/" target="_blank"><img src="https://avatars.githubusercontent.com/u/7237365?s=80&amp;v=4" alt="chenjiahan"></a></th><th style="text-align:center;"><a href="https://github.com/cookfront/" target="_blank"><img src="https://avatars.githubusercontent.com/u/4829465?s=80&amp;v=4" alt="cookfront"></a></th><th style="text-align:center;"><a href="https://github.com/w91/" target="_blank"><img src="https://avatars.githubusercontent.com/u/2599455?s=80&amp;v=4" alt="w91"></a></th><th style="text-align:center;"><a href="https://github.com/pangxie1991/" target="_blank"><img src="https://avatars.githubusercontent.com/u/5961240?s=80&amp;v=4" alt="pangxie1991"></a></th><th style="text-align:center;"><a href="https://github.com/rex-zsd/" target="_blank"><img src="https://avatars.githubusercontent.com/u/8767877?s=80&amp;v=4" alt="rex-zsd"></a></th><th style="text-align:center;"><a href="https://github.com/nemo-shen/" target="_blank"><img src="https://avatars.githubusercontent.com/u/13480805?s=80&amp;v=4" alt="nemo-shen"></a></th></tr></thead><tbody><tr><td style="text-align:center;"><a href="https://github.com/chenjiahan/" target="_blank">chenjiahan</a></td><td style="text-align:center;"><a href="https://github.com/cookfront/" target="_blank">cookfront</a></td><td style="text-align:center;"><a href="https://github.com/w91/" target="_blank">wangnaiyi</a></td><td style="text-align:center;"><a href="https://github.com/pangxie1991/" target="_blank">pangxie</a></td><td style="text-align:center;"><a href="https://github.com/rex-zsd/" target="_blank">rex-zsd</a></td><td style="text-align:center;"><a href="https://github.com/nemo-shen/" target="_blank">nemo-shen</a></td></tr></tbody></table><table><thead><tr><th style="text-align:center;"><a href="https://github.com/Lindysen/" target="_blank"><img src="https://avatars.githubusercontent.com/u/33708359?s=80&amp;v=4" alt="Lindysen"></a></th><th style="text-align:center;"><a href="https://github.com/JakeLaoyu/" target="_blank"><img src="https://avatars.githubusercontent.com/u/16181940?s=80&amp;v=4" alt="JakeLaoyu"></a></th><th style="text-align:center;"><a href="https://github.com/landluck/" target="_blank"><img src="https://avatars.githubusercontent.com/u/27060081?s=80&amp;v=4" alt="landluck"></a></th><th style="text-align:center;"><a href="https://github.com/wjw-gavin/" target="_blank"><img src="https://avatars.githubusercontent.com/u/19986739?s=80&amp;v=4" alt="wjw-gavin"></a></th><th style="text-align:center;"><a href="https://github.com/inottn/" target="_blank"><img src="https://avatars.githubusercontent.com/u/18509404?s=80&amp;v=4" alt="inottn"></a></th><th style="text-align:center;"><a href="https://github.com/zhousg/" target="_blank"><img src="https://avatars.githubusercontent.com/u/15833290?s=80&amp;v=4" alt="zhousg"></a></th></tr></thead><tbody><tr><td style="text-align:center;"><a href="https://github.com/Lindysen/" target="_blank">Lindysen</a></td><td style="text-align:center;"><a href="https://github.com/JakeLaoyu/" target="_blank">JakeLaoyu</a></td><td style="text-align:center;"><a href="https://github.com/landluck/" target="_blank">landluck</a></td><td style="text-align:center;"><a href="https://github.com/wjw-gavin/" target="_blank">wjw-gavin</a></td><td style="text-align:center;"><a href="https://github.com/inottn/" target="_blank">inottn</a></td><td style="text-align:center;"><a href="https://github.com/zhousg/" target="_blank">zhousg</a></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="gong-xian-zhe-men" tabindex="-1">\u8D21\u732E\u8005\u4EEC</h3><p>\u611F\u8C22\u4EE5\u4E0B\u5C0F\u4F19\u4F34\u4EEC\u4E3A Vant Weapp \u53D1\u5C55\u505A\u51FA\u7684\u8D21\u732E\uFF1A</p><a href="https://github.com/youzan/vant-weapp/graphs/contributors"><img src="https://opencollective.com/vant-weapp/contributors.svg?width=890&amp;button=false" alt="contributors" style="width:100%;margin:16px 0;"></a></div><div class="van-doc-card"><h3 id="gong-xian-dai-ma" tabindex="-1">\u8D21\u732E\u4EE3\u7801</h3><p>\u4F7F\u7528\u8FC7\u7A0B\u4E2D\u53D1\u73B0\u4EFB\u4F55\u95EE\u9898\u90FD\u53EF\u4EE5\u63D0 <a href="https://github.com/youzan/vant-weapp/issues" target="_blank">Issue</a> \u7ED9\u6211\u4EEC\uFF0C\u5F53\u7136\uFF0C\u6211\u4EEC\u4E5F\u975E\u5E38\u6B22\u8FCE\u4F60\u7ED9\u6211\u4EEC\u53D1 <a href="https://github.com/youzan/vant-weapp/pulls" target="_blank">PR</a>\u3002</p></div><div class="van-doc-card"><h3 id="kai-yuan-xie-yi" tabindex="-1">\u5F00\u6E90\u534F\u8BAE</h3><p>\u672C\u9879\u76EE\u57FA\u4E8E <a href="https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89" target="_blank">MIT</a> \u534F\u8BAE\uFF0C\u8BF7\u81EA\u7531\u5730\u4EAB\u53D7\u548C\u53C2\u4E0E\u5F00\u6E90\u3002</p></div>',10),P=[C],S={__name:"home",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",z,P))}},D={class:"van-doc-markdown-body"},I=d(`<h1>\u5FEB\u901F\u4E0A\u624B</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">\u80CC\u666F\u77E5\u8BC6</h3><p>\u4F7F\u7528 Vant Weapp \u524D\uFF0C\u8BF7\u786E\u4FDD\u4F60\u5DF2\u7ECF\u5B66\u4E60\u8FC7\u5FAE\u4FE1\u5B98\u65B9\u7684 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/" target="_blank">\u5C0F\u7A0B\u5E8F\u7B80\u6613\u6559\u7A0B</a> \u548C <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/" target="_blank">\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4ECB\u7ECD</a>\u3002</p></div><h2 id="an-zhuang" tabindex="-1">\u5B89\u88C5</h2><div class="van-doc-card"><h3 id="bu-zou-yi-tong-guo-npm-an-zhuang" tabindex="-1">\u6B65\u9AA4\u4E00 \u901A\u8FC7 npm \u5B89\u88C5</h3><blockquote><p>\u4F7F\u7528 npm \u6784\u5EFA\u524D\uFF0C\u8BF7\u5148\u9605\u8BFB\u5FAE\u4FE1\u5B98\u65B9\u7684 <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html" target="_blank">npm \u652F\u6301</a></p></blockquote><pre><code class="language-bash"><span class="hljs-comment"># \u901A\u8FC7 npm \u5B89\u88C5</span>
npm i @vant/weapp -S --production
<span class="hljs-comment"># \u901A\u8FC7 yarn \u5B89\u88C5</span>
yarn add @vant/weapp --production
<span class="hljs-comment"># \u5B89\u88C5 0.x \u7248\u672C</span>
npm i vant-weapp -S --production
</code></pre></div><div class="van-doc-card"><h3 id="bu-zou-er-xiu-gai-app.json" tabindex="-1">\u6B65\u9AA4\u4E8C \u4FEE\u6539 app.json</h3><p>\u5C06 app.json \u4E2D\u7684 <code>&quot;style&quot;: &quot;v2&quot;</code> \u53BB\u9664\uFF0C\u5C0F\u7A0B\u5E8F\u7684<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style" target="_blank">\u65B0\u7248\u57FA\u7840\u7EC4\u4EF6</a>\u5F3A\u884C\u52A0\u4E0A\u4E86\u8BB8\u591A\u6837\u5F0F\uFF0C\u96BE\u4EE5\u8986\u76D6\uFF0C\u4E0D\u5173\u95ED\u5C06\u9020\u6210\u90E8\u5206\u7EC4\u4EF6\u6837\u5F0F\u6DF7\u4E71\u3002</p></div><div class="van-doc-card"><h3 id="bu-zou-san-xiu-gai-project.config.json" tabindex="-1">\u6B65\u9AA4\u4E09 \u4FEE\u6539 project.config.json</h3><p>\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u9879\u76EE\uFF0C<code>miniprogramRoot</code> \u9ED8\u8BA4\u4E3A <code>miniprogram</code>\uFF0C<code>package.json</code> \u5728\u5176\u5916\u90E8\uFF0Cnpm \u6784\u5EFA\u65E0\u6CD5\u6B63\u5E38\u5DE5\u4F5C\u3002</p><p>\u9700\u8981\u624B\u52A8\u5728 <code>project.config.json</code> \u5185\u6DFB\u52A0\u5982\u4E0B\u914D\u7F6E\uFF0C\u4F7F\u5F00\u53D1\u8005\u5DE5\u5177\u53EF\u4EE5\u6B63\u786E\u7D22\u5F15\u5230 npm \u4F9D\u8D56\u7684\u4F4D\u7F6E\u3002</p><pre><code class="language-json"><span class="hljs-punctuation">{</span>
...
<span class="hljs-attr">&quot;setting&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
...
<span class="hljs-attr">&quot;packNpmManually&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;packNpmRelationList&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>
<span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;packageJsonPath&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;./package.json&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;miniprogramNpmDistDir&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;./miniprogram/&quot;</span>
<span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre><p>\u6CE8\u610F\uFF1A \u7531\u4E8E\u76EE\u524D\u65B0\u7248\u5F00\u53D1\u8005\u5DE5\u5177\u521B\u5EFA\u7684\u5C0F\u7A0B\u5E8F\u76EE\u5F55\u6587\u4EF6\u7ED3\u6784\u95EE\u9898\uFF0Cnpm\u6784\u5EFA\u7684\u6587\u4EF6\u76EE\u5F55\u4E3Aminiprogram_npm\uFF0C\u5E76\u4E14\u5F00\u53D1\u5DE5\u5177\u4F1A\u9ED8\u8BA4\u5728\u5F53\u524D\u76EE\u5F55\u4E0B\u521B\u5EFAminiprogram_npm\u7684\u6587\u4EF6\u540D\uFF0C\u6240\u4EE5\u65B0\u7248\u672C\u7684miniprogramNpmDistDir\u914D\u7F6E\u4E3A&#39;./&#39;\u5373\u53EF</p></div><div class="van-doc-card"><h3 id="bu-zou-si-gou-jian-npm-bao" tabindex="-1">\u6B65\u9AA4\u56DB \u6784\u5EFA npm \u5305</h3><p>\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u70B9\u51FB <strong>\u5DE5\u5177 -&gt; \u6784\u5EFA npm</strong>\uFF0C\u5E76\u52FE\u9009 <strong>\u4F7F\u7528 npm \u6A21\u5757</strong> \u9009\u9879\uFF0C\u6784\u5EFA\u5B8C\u6210\u540E\uFF0C\u5373\u53EF\u5F15\u5165\u7EC4\u4EF6\u3002</p><img style="width:500px;" src="https://img.yzcdn.cn/public_files/2019/08/15/fa0549210055976cb63798503611ce3d.png"></div><div class="van-doc-card"><h3 id="bu-zou-wu-typescript-zhi-chi" tabindex="-1">\u6B65\u9AA4\u4E94 typescript \u652F\u6301</h3><p>\u5982\u679C\u4F60\u4F7F\u7528 typescript \u5F00\u53D1\u5C0F\u7A0B\u5E8F\uFF0C\u8FD8\u9700\u8981\u505A\u5982\u4E0B\u64CD\u4F5C\uFF0C\u4EE5\u83B7\u5F97\u987A\u7545\u7684\u5F00\u53D1\u4F53\u9A8C\u3002</p><h4 id="an-zhuang-miniprogram-api-typings" tabindex="-1">\u5B89\u88C5 miniprogram-api-typings</h4><pre><code class="language-bash"><span class="hljs-comment"># \u901A\u8FC7 npm \u5B89\u88C5</span>
npm i -D miniprogram-api-typings
<span class="hljs-comment"># \u901A\u8FC7 yarn \u5B89\u88C5</span>
yarn add -D miniprogram-api-typings
</code></pre><h4 id="zai-tsconfig.json-zhong-zeng-jia-ru-xia-pei-zhi-yi-fang-zhi-tsc-bian-yi-bao-cuo." tabindex="-1">\u5728 tsconfig.json \u4E2D\u589E\u52A0\u5982\u4E0B\u914D\u7F6E\uFF0C\u4EE5\u9632\u6B62 tsc \u7F16\u8BD1\u62A5\u9519\u3002</h4><p>\u8BF7\u5C06<code>path/to/node_modules/@vant/weapp</code>\u4FEE\u6539\u4E3A\u9879\u76EE\u7684 <code>node_modules</code> \u4E2D @vant/weapp \u6240\u5728\u7684\u76EE\u5F55\u3002</p><pre><code class="language-json"><span class="hljs-punctuation">{</span>
...
<span class="hljs-attr">&quot;compilerOptions&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
...
<span class="hljs-attr">&quot;baseUrl&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;.&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;types&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;miniprogram-api-typings&quot;</span><span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;paths&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;@vant/weapp/*&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;path/to/node_modules/@vant/weapp/dist/*&quot;</span><span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;lib&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><span class="hljs-string">&quot;ES6&quot;</span><span class="hljs-punctuation">]</span>
<span class="hljs-punctuation">}</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><div class="van-doc-card"><h3 id="shi-li-gong-cheng" tabindex="-1">\u793A\u4F8B\u5DE5\u7A0B</h3><p>\u6211\u4EEC\u63D0\u4F9B\u4E86\u4E00\u4E2A<a href="https://github.com/vant-ui/vant-demo" target="_blank">\u793A\u4F8B\u5DE5\u7A0B</a>\uFF0C\u793A\u4F8B\u5DE5\u7A0B\u4F1A\u5E2E\u52A9\u4F60\u4E86\u89E3\u5982\u4E0B\u5185\u5BB9\uFF1A</p><ul><li>\u57FA\u4E8E Vant Weapp \u642D\u5EFA\u5C0F\u7A0B\u5E8F\u5E94\u7528</li><li>\u6837\u5F0F\u8986\u76D6\u65B9\u6848</li></ul></div><h2 id="shi-yong" tabindex="-1">\u4F7F\u7528</h2><div class="van-doc-card"><h3 id="yin-ru-zu-jian" tabindex="-1">\u5F15\u5165\u7EC4\u4EF6</h3><p>\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u53EA\u9700\u8981\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u914D\u7F6E Button \u5BF9\u5E94\u7684\u8DEF\u5F84\u5373\u53EF\u3002</p><p>\u6240\u6709\u7EC4\u4EF6\u6587\u6863\u4E2D\u7684\u5F15\u5165\u8DEF\u5F84\u5747\u4EE5 npm \u5B89\u88C5\u4E3A\u4F8B\uFF0C\u5982\u679C\u4F60\u662F\u901A\u8FC7\u4E0B\u8F7D\u6E90\u4EE3\u7801\u7684\u65B9\u5F0F\u4F7F\u7528 @vant/weapp\uFF0C\u8BF7\u5C06\u8DEF\u5F84\u4FEE\u6539\u4E3A\u9879\u76EE\u4E2D @vant/weapp \u6240\u5728\u7684\u76EE\u5F55\u3002</p><pre><code class="language-json"><span class="hljs-comment">// \u901A\u8FC7 npm \u5B89\u88C5</span>
<span class="hljs-comment">// app.json</span>
<span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/button/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><pre><code class="language-json"><span class="hljs-comment">// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es6\u7248\u672C</span>
<span class="hljs-comment">// app.json</span>
<span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;path/to/@vant/weapp/dist/button/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><pre><code class="language-json"><span class="hljs-comment">// \u901A\u8FC7\u4E0B\u8F7D\u6E90\u7801\u4F7F\u7528 es5\u7248\u672C</span>
<span class="hljs-comment">// app.json</span>
<span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;path/to/@vant/weapp/lib/button/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-zu-jian" tabindex="-1">\u4F7F\u7528\u7EC4\u4EF6</h3><p>\u5F15\u5165\u7EC4\u4EF6\u540E\uFF0C\u53EF\u4EE5\u5728 wxml \u4E2D\u76F4\u63A5\u4F7F\u7528\u7EC4\u4EF6</p><pre><code class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><h2 id="qi-ta" tabindex="-1">\u5176\u4ED6</h2><div class="van-doc-card"><h3 id="zai-kai-fa-zhe-gong-ju-zhong-yu-lan-shi-li-xiao-cheng-xu" tabindex="-1">\u5728\u5F00\u53D1\u8005\u5DE5\u5177\u4E2D\u9884\u89C8\u793A\u4F8B\u5C0F\u7A0B\u5E8F</h3><pre><code class="language-bash">
<span class="hljs-comment"># \u5C06\u9879\u76EE\u514B\u9686\u5230\u672C\u5730</span>
git <span class="hljs-built_in">clone</span> git@github.com:youzan/vant-weapp.git
<span class="hljs-comment"># \u5B89\u88C5\u9879\u76EE\u4F9D\u8D56</span>
<span class="hljs-built_in">cd</span> vant-weapp &amp;&amp; npm install
<span class="hljs-comment"># \u6267\u884C\u7EC4\u4EF6\u7F16\u8BD1</span>
npm run dev
</code></pre><p>\u63A5\u7740\u6253\u5F00\u5FAE\u4FE1\u5F00\u53D1\u8005\u5DE5\u5177\uFF0C\u5BFC\u5165<code>example</code>\u76EE\u5F55\u7684\u9879\u76EE\u5C31\u53EF\u4EE5\u9884\u89C8\u793A\u4F8B\u4E86\u3002</p></div><div class="van-doc-card"><h3 id="guan-yu-yong-hu-yin-si-bao-hu-zhi-yin" tabindex="-1">\u5173\u4E8E\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15</h3><p>@vant/weapp \u90E8\u5206\u7EC4\u4EF6\u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u63A5\u53E3\uFF0C\u5176\u4E2D\u90E8\u5206\u63A5\u53E3\u6D89\u53CA\u83B7\u53D6\u7528\u6237\u9690\u79C1\u4FE1\u606F\u3002</p><p>\u4F8B\u5982 <code>&lt;Uploader /&gt;</code> \u4F7F\u7528\u4E86\u5FAE\u4FE1\u63D0\u4F9B\u7684\u9009\u62E9\u7528\u6237\u76F8\u518C\u4E2D\u56FE\u7247\u63A5\u53E3<code>(wx.chooseImage)</code>\u3002</p><p>\u5F53\u5C0F\u7A0B\u5E8F\u5F15\u5165 @vant/weapp \u5E76\u53D1\u5E03\u65F6\uFF0C \u6839\u636E\u5FAE\u4FE1<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/" target="_blank">\u300A\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u586B\u5199\u8BF4\u660E\u300B</a>\uFF0C \u5982\u68C0\u6D4B\u5230\u4EE3\u7801\u4E2D\u5B58\u5728\u6D89\u53CA\u7528\u6237\u9690\u79C1\u4FE1\u606F\u63A5\u53E3\u5219\u9700\u586B\u5199\u7528\u6237\u9690\u79C1\u4FDD\u62A4\u6307\u5F15\u4FE1\u606F\uFF0C\u5982\u5DF2\u586B\u5199\u5219\u65E0\u9700\u91CD\u590D\u586B\u5199\u3002</p></div>`,15),T=[I],$={__name:"quickstart",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",D,T))}},A={class:"van-doc-markdown-body"},E=d(`<h1>\u5B9A\u5236\u4E3B\u9898</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">\u80CC\u666F\u77E5\u8BC6</h3><p>\u5C0F\u7A0B\u5E8F\u57FA\u4E8E <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn" target="_blank">Shadow DOM</a> \u6765\u5B9E\u73B0\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u6240\u4EE5 Vant Weapp \u4F7F\u7528\u4E0E\u4E4B\u914D\u5957\u7684 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">CSS \u53D8\u91CF</a> \u6765\u5B9E\u73B0\u5B9A\u5236\u4E3B\u9898\u3002\u94FE\u63A5\u4E2D\u7684\u5185\u5BB9\u53EF\u4EE5\u5E2E\u52A9\u4F60\u5BF9\u8FD9\u4E24\u4E2A\u6982\u5FF5\u6709\u57FA\u672C\u7684\u8BA4\u8BC6\uFF0C\u907F\u514D\u8BB8\u591A\u4E0D\u5FC5\u8981\u7684\u56F0\u6270\u3002</p><p>CSS \u53D8\u91CF \u7684\u517C\u5BB9\u6027\u8981\u6C42\u53EF\u4EE5\u5728 <a href="https://caniuse.com/#feat=css-variables" target="_blank">\u8FD9\u91CC</a> \u67E5\u770B\u3002\u5BF9\u4E8E\u4E0D\u652F\u6301 CSS \u53D8\u91CF \u7684\u8BBE\u5907\uFF0C\u5B9A\u5236\u4E3B\u9898\u5C06\u4E0D\u4F1A\u751F\u6548\uFF0C\u4E0D\u8FC7\u4E0D\u5FC5\u62C5\u5FC3\uFF0C\u9ED8\u8BA4\u6837\u5F0F\u4ECD\u4F1A\u751F\u6548\u3002</p></div><div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">\u6837\u5F0F\u53D8\u91CF</h3><p>\u5B9A\u5236\u4F7F\u7528\u7684 CSS \u53D8\u91CF \u4E0E Less \u53D8\u91CF \u540C\u540D\uFF0C\u4E0B\u9762\u662F\u4E00\u4E9B\u57FA\u672C\u7684\u6837\u5F0F\u53D8\u91CF\uFF0C\u6240\u6709\u53EF\u7528\u7684\u989C\u8272\u53D8\u91CF\u8BF7\u53C2\u8003 <a href="https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less" target="_blank">\u914D\u7F6E\u6587\u4EF6</a>\u3002</p><pre><code class="language-less"><span class="hljs-comment">// Component Colors</span>
<span class="hljs-variable">@text-color:</span> <span class="hljs-number">#323233</span>;
<span class="hljs-variable">@border-color:</span> <span class="hljs-number">#ebedf0</span>;
<span class="hljs-variable">@active-color:</span> <span class="hljs-number">#f2f3f5</span>;
<span class="hljs-variable">@background-color:</span> <span class="hljs-number">#f8f8f8</span>;
<span class="hljs-variable">@background-color-light:</span> <span class="hljs-number">#fafafa</span>;
</code></pre></div><h2 id="ding-zhi-fang-fa" tabindex="-1">\u5B9A\u5236\u65B9\u6CD5</h2><div class="van-doc-card"><h3 id="ding-zhi-dan-ge-zu-jian-de-zhu-ti-yang-shi" tabindex="-1">\u5B9A\u5236\u5355\u4E2A\u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F</h3><blockquote><p>\u5728 wxss \u4E2D\u4E3A\u7EC4\u4EF6\u8BBE\u7F6E CSS \u53D8\u91CF</p></blockquote><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;my-button&quot;</span>&gt;</span>
\u9ED8\u8BA4\u6309\u94AE
<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre><pre><code class="language-less"><span class="hljs-selector-class">.my-button</span> {
<span class="hljs-attr">--button-border-radius</span>: 10px;
<span class="hljs-attr">--button-default-color</span>: #f2f3f5;
}
</code></pre><blockquote><p>\u6216\u901A\u8FC7 style \u5C5E\u6027\u6765\u8BBE\u7F6E CSS \u53D8\u91CF\uFF0C\u8FD9\u4F7F\u4F60\u80FD\u591F\u8F7B\u677E\u5B9E\u73B0\u4E3B\u9898\u7684\u52A8\u6001\u5207\u6362</p></blockquote><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;{{ buttonStyle }}&quot;</span>&gt;</span>
\u9ED8\u8BA4\u6309\u94AE
<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">buttonStyle</span>: <span class="hljs-string">\`
--button-border-radius: 10px;
--button-default-color: green;
\`</span>,
},
<span class="hljs-title function_">onLoad</span>(<span class="hljs-params"></span>) {
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">buttonStyle</span>: <span class="hljs-string">\`
--button-border-radius: 2px;
--button-default-color: pink;
\`</span>,
});
}, <span class="hljs-number">2000</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="ding-zhi-duo-ge-zu-jian-de-zhu-ti-yang-shi" tabindex="-1">\u5B9A\u5236\u591A\u4E2A\u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F</h3><blockquote><p>\u4E0E\u5355\u4E2A\u7EC4\u4EF6\u7684\u5B9A\u5236\u65B9\u5F0F\u7C7B\u4F3C\uFF0C\u53EA\u9700\u7528\u4E00\u4E2A container \u8282\u70B9\u5305\u88F9\u4F4F\u9700\u8981\u5B9A\u5236\u7684\u7EC4\u4EF6\uFF0C\u5E76\u5C06 CSS \u53D8\u91CF \u8BBE\u7F6E\u5728 container \u8282\u70B9\u4E0A</p></blockquote><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;container&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>
\u9ED8\u8BA4\u6309\u94AE
<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-toast&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/toast/toast&#39;</span>;
<span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onClick</span>(<span class="hljs-params"></span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~&#39;</span>);
},
});
</code></pre><pre><code class="language-less"><span class="hljs-selector-class">.container</span> {
<span class="hljs-attr">--button-border-radius</span>: 10px;
<span class="hljs-attr">--button-default-color</span>: #f2f3f5;
<span class="hljs-attr">--toast-max-width</span>: 100px;
<span class="hljs-attr">--toast-background-color</span>: pink;
}
</code></pre></div><div class="van-doc-card"><h3 id="ding-zhi-quan-ju-zhu-ti-yang-shi" tabindex="-1">\u5B9A\u5236\u5168\u5C40\u4E3B\u9898\u6837\u5F0F</h3><blockquote><p>\u5728 app.wxss \u4E2D\uFF0C\u5199\u5165 CSS \u53D8\u91CF\uFF0C\u5373\u53EF\u5BF9\u5168\u5C40\u751F\u6548</p></blockquote><pre><code class="language-less"><span class="hljs-selector-tag">page</span> {
<span class="hljs-attr">--button-border-radius</span>: 10px;
<span class="hljs-attr">--button-default-color</span>: #f2f3f5;
<span class="hljs-attr">--toast-max-width</span>: 100px;
<span class="hljs-attr">--toast-background-color</span>: pink;
}
</code></pre></div>`,7),F=[E],B={__name:"theme",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",A,F))}},R={class:"van-doc-markdown-body"},N=d(`<h1>ActionSheet \u52A8\u4F5C\u9762\u677F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5E95\u90E8\u5F39\u8D77\u7684\u6A21\u6001\u9762\u677F\uFF0C\u5305\u542B\u4E0E\u5F53\u524D\u60C5\u5883\u76F8\u5173\u7684\u591A\u4E2A\u9009\u9879\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-action-sheet&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/action-sheet/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u9700\u8981\u4F20\u5165\u4E00\u4E2A<code>actions</code>\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u5C5E\u6027\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:select</span>=<span class="hljs-string">&quot;onSelect&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">actions</span>: [
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u9009\u9879&#39;</span>,
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u9009\u9879&#39;</span>,
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u9009\u9879&#39;</span>,
<span class="hljs-attr">subname</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
<span class="hljs-attr">openType</span>: <span class="hljs-string">&#39;share&#39;</span>,
},
],
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
<span class="hljs-title function_">onSelect</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-qu-xiao-an-niu" tabindex="-1">\u5C55\u793A\u53D6\u6D88\u6309\u94AE</h3><p>\u8BBE\u7F6E<code>cancel-text</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5E95\u90E8\u5C55\u793A\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u540E\u5173\u95ED\u5F53\u524D\u83DC\u5355\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>
<span class="hljs-attr">cancel-text</span>=<span class="hljs-string">&quot;\u53D6\u6D88&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-miao-shu-xin-xi" tabindex="-1">\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>description</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u9009\u9879\u4E0A\u65B9\u663E\u793A\u63CF\u8FF0\u4FE1\u606F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>
<span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u8FD9\u662F\u4E00\u6BB5\u63CF\u8FF0\u4FE1\u606F&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xuan-xiang-zhuang-tai" tabindex="-1">\u9009\u9879\u72B6\u6001</h3><p>\u9009\u9879\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u52A0\u8F7D\u72B6\u6001\u6216\u7981\u7528\u72B6\u6001\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>
<span class="hljs-attr">cancel-text</span>=<span class="hljs-string">&quot;\u53D6\u6D88&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">actions</span>: [
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u7740\u8272\u9009\u9879&#39;</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#ee0a24&#39;</span> },
{ <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u7981\u7528\u9009\u9879&#39;</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-mian-ban" tabindex="-1">\u81EA\u5B9A\u4E49\u9762\u677F</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>title</code>\u5C5E\u6027\u5C55\u793A\u6807\u9898\u680F\uFF0C\u540C\u65F6\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-action-sheet</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="wei-xin-kai-fang-neng-li" tabindex="-1">\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B</h3><p>\u9700\u8981\u4F20\u5165\u4E00\u4E2A<code>actions</code>\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u5C5E\u6027\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">&quot;onGetUserInfo&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">actions</span>: [
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u83B7\u53D6\u7528\u6237\u4FE1\u606F&#39;</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#07c160&#39;</span>, <span class="hljs-attr">openType</span>: <span class="hljs-string">&#39;getUserInfo&#39;</span> },
],
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
<span class="hljs-title function_">onGetUserInfo</span>(<span class="hljs-params">e</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">detail</span>);
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u52A8\u4F5C\u9762\u677F</td><td><em>boolean</em></td><td>-</td></tr><tr><td>actions</td><td>\u83DC\u5355\u9009\u9879</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>description <code>v1.0.0</code></td><td>\u9009\u9879\u4E0A\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F</td><td><em>string</em></td><td>-</td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>cancel-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td>-</td></tr><tr><td>round <code>v1.0.0</code></td><td>\u662F\u5426\u663E\u793A\u5706\u89D2</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-action</td><td>\u662F\u5426\u5728\u70B9\u51FB\u9009\u9879\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u662F\u5426\u5173\u95ED\u83DC\u5355</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>root-portal <code>v1.11.3</code></td><td>\u662F\u5426\u4ECE\u9875\u9762\u5B50\u6811\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 &gt;= <code>2.25.2 </code></td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:select</td><td>\u9009\u4E2D\u9009\u9879\u65F6\u89E6\u53D1\uFF0C\u7981\u7528\u6216\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1</td><td>event.detail: \u9009\u9879\u5BF9\u5E94\u7684\u5BF9\u8C61</td></tr><tr><td>bind:close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:cancel</td><td>\u53D6\u6D88\u6309\u94AE\u70B9\u51FB\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>\u7528\u6237\u70B9\u51FB\u8BE5\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C\u56DE\u8C03\u7684 detail \u6570\u636E\u4E0E wx.getUserInfo \u8FD4\u56DE\u7684\u4E00\u81F4\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;getUserInfo&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:contact</td><td>\u5BA2\u670D\u6D88\u606F\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;contact&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;getPhoneNumber&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:getrealtimephonenumber <code>v1.10.21</code></td><td>\u83B7\u53D6\u624B\u673A\u53F7\u5B9E\u65F6\u9A8C\u8BC1\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;getRealtimePhoneNumber&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:agreeprivacyauthorization <code>v1.10.24</code></td><td>\u540C\u610F\u9690\u79C1\u534F\u8BAE\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;agreePrivacyAuthorization&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:error</td><td>\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;launchApp&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:launchapp</td><td>\u6253\u5F00 APP \u6210\u529F\u7684\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;launchApp&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:opensetting</td><td>\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03\uFF0C<a href="#/action-sheet#actions">openType</a>=&quot;openSetting&quot;\u65F6\u6709\u6548</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="actions" tabindex="-1">actions</h3><p><code>API</code>\u4E2D\u7684<code>actions</code>\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u914D\u7F6E\u6BCF\u4E00\u5217\uFF0C\u6BCF\u4E00\u5217\u6709\u4EE5\u4E0B<code>key</code>\uFF1A</p><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>subname</td><td>\u4E8C\u7EA7\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>\u9009\u9879\u6587\u5B57\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>loading</td><td>\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001</td><td><em>boolean</em></td><td>-</td></tr><tr><td>className</td><td>\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class \u7C7B\u540D</td><td><em>string</em></td><td>-</td></tr><tr><td>openType</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html" target="_blank">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0Czh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>sessionFrom</td><td>\u4F1A\u8BDD\u6765\u6E90\uFF0CopenType=&quot;contact&quot;\u65F6\u6709\u6548</td><td><em>string</em></td><td>-</td></tr><tr><td>sendMessageTitle</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898\uFF0CopenType=&quot;contact&quot;\u65F6\u6709\u6548</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>sendMessagePath</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84\uFF0CopenType=&quot;contact&quot;\u65F6\u6709\u6548</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>sendMessageImg</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u56FE\u7247\uFF0CopenType=&quot;contact&quot;\u65F6\u6709\u6548</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>showMessageCard</td><td>\u662F\u5426\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\uFF0C\u8BBE\u7F6E\u6B64\u53C2\u6570\u4E3A true\uFF0C\u7528\u6237\u8FDB\u5165\u5BA2\u670D\u4F1A\u8BDD\u4F1A\u5728\u53F3\u4E0B\u89D2\u663E\u793A&quot;\u53EF\u80FD\u8981\u53D1\u9001\u7684\u5C0F\u7A0B\u5E8F&quot;\u63D0\u793A\uFF0C\u7528\u6237\u70B9\u51FB\u540E\u53EF\u4EE5\u5FEB\u901F\u53D1\u9001\u5C0F\u7A0B\u5E8F\u6D88\u606F\uFF0CopenType=&quot;contact&quot;\u65F6\u6709\u6548</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>appParameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570\uFF0CopenType=launchApp \u65F6\u6709\u6548</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class <code>v1.10.7</code></td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>list-class <code>v1.10.7</code></td><td><code>actions</code>\u5BB9\u5668\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,15),M=[N],L={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",R,M))}},V={class:"van-doc-markdown-body"},U=d(`<h1>Area \u7701\u5E02\u533A\u9009\u62E9</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7701\u5E02\u533A\u9009\u62E9\u7EC4\u4EF6\u901A\u5E38\u4E0E <a href="#/popup" target="_blank">\u5F39\u51FA\u5C42</a> \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-area&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/area/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u521D\u59CB\u5316\u7701\u5E02\u533A\u7EC4\u4EF6\u65F6\uFF0C\u9700\u8981\u901A\u8FC7 <code>area-list</code> \u5C5E\u6027\u4F20\u5165\u7701\u5E02\u533A\u6570\u636E\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="arealist-ge-shi" tabindex="-1">areaList \u683C\u5F0F</h3><p>areaList \u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u5305\u542B <code>province_list</code>\u3001<code>city_list</code>\u3001<code>county_list</code> \u4E09\u4E2A key\u3002</p><p>\u6BCF\u9879\u4EE5\u5730\u533A\u7801\u4F5C\u4E3A key\uFF0C\u7701\u5E02\u533A\u540D\u5B57\u4F5C\u4E3A value\u3002\u5730\u533A\u7801\u4E3A 6 \u4F4D\u6570\u5B57\uFF0C\u524D\u4E24\u4F4D\u4EE3\u8868\u7701\u4EFD\uFF0C\u4E2D\u95F4\u4E24\u4F4D\u4EE3\u8868\u57CE\u5E02\uFF0C\u540E\u4E24\u4F4D\u4EE3\u8868\u533A\u53BF\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\u3002\u6BD4\u5982\u5317\u4EAC\u7684\u5730\u533A\u7801\u4E3A <code>11</code>\uFF0C\u4EE5 0 \u8865\u8DB3 6 \u4F4D\uFF0C\u4E3A <code>110000</code>\u3002</p><p>\u793A\u4F8B\u6570\u636E\u5982\u4E0B\uFF1A</p><pre><code class="language-js"><span class="hljs-keyword">const</span> areaList = {
<span class="hljs-attr">province_list</span>: {
<span class="hljs-number">110000</span>: <span class="hljs-string">&#39;\u5317\u4EAC\u5E02&#39;</span>,
<span class="hljs-number">120000</span>: <span class="hljs-string">&#39;\u5929\u6D25\u5E02&#39;</span>,
},
<span class="hljs-attr">city_list</span>: {
<span class="hljs-number">110100</span>: <span class="hljs-string">&#39;\u5317\u4EAC\u5E02&#39;</span>,
<span class="hljs-number">120100</span>: <span class="hljs-string">&#39;\u5929\u6D25\u5E02&#39;</span>,
},
<span class="hljs-attr">county_list</span>: {
<span class="hljs-number">110101</span>: <span class="hljs-string">&#39;\u4E1C\u57CE\u533A&#39;</span>,
<span class="hljs-number">110102</span>: <span class="hljs-string">&#39;\u897F\u57CE\u533A&#39;</span>,
<span class="hljs-comment">// ....</span>
},
};
</code></pre></div><div class="van-doc-card"><h3 id="vant-area-data" tabindex="-1">@vant/area-data</h3><p>Vant \u5B98\u65B9\u63D0\u4F9B\u4E86\u4E00\u4EFD\u9ED8\u8BA4\u7684\u7701\u5E02\u533A\u6570\u636E\uFF0C\u53EF\u4EE5\u901A\u8FC7 <a href="https://github.com/vant-ui/vant/tree/dev/packages/vant-area-data" target="_blank">@vant/area-data</a> \u5F15\u5165\u3002</p><pre><code class="language-bash">yarn add @vant/area-data
</code></pre><pre><code class="language-ts"><span class="hljs-keyword">import</span> { areaList } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/area-data&#39;</span>;
<span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
areaList,
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xuan-zhong-sheng-shi-qu" tabindex="-1">\u9009\u4E2D\u7701\u5E02\u533A</h3><p>\u5982\u679C\u60F3\u9009\u4E2D\u67D0\u4E2A\u7701\u5E02\u533A\uFF0C\u9700\u8981\u4F20\u5165\u4E00\u4E2A<code>value</code>\u5C5E\u6027\uFF0C\u7ED1\u5B9A\u5BF9\u5E94\u7684\u7701\u5E02\u533A<code>code</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;110101&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="pei-zhi-xian-shi-lie" tabindex="-1">\u914D\u7F6E\u663E\u793A\u5217</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>columns-num</code>\u5C5E\u6027\u914D\u7F6E\u7701\u5E02\u533A\u663E\u793A\u7684\u5217\u6570\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u4F1A\u663E\u793A\u7701\u5E02\u533A\uFF0C\u5F53\u4F60\u8BBE\u7F6E\u4E3A<code>2</code>\uFF0C\u5219\u53EA\u4F1A\u663E\u793A\u7701\u5E02\u9009\u62E9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-area</span> <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span> <span class="hljs-attr">columns-num</span>=<span class="hljs-string">&quot;{{ 2 }}&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="pei-zhi-lie-zhan-wei-ti-shi-wen-zi" tabindex="-1">\u914D\u7F6E\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>columns-placeholder</code>\u5C5E\u6027\u914D\u7F6E\u6BCF\u4E00\u5217\u7684\u5360\u4F4D\u63D0\u793A\u6587\u5B57\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-area</span>
<span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span>
<span class="hljs-attr">columns-placeholder</span>=<span class="hljs-string">&quot;{{ [&#39;\u8BF7\u9009\u62E9&#39;, &#39;\u8BF7\u9009\u62E9&#39;, &#39;\u8BF7\u9009\u62E9&#39;] }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>
/&gt;</span>
</code></pre></div><h2 id="yun-kai-fa-shi-li" tabindex="-1">\u4E91\u5F00\u53D1\u793A\u4F8B</h2><div class="van-doc-card"><h3 id="shi-yong-yun-kai-fa-huo-qu-sheng-shi-qu-shu-ju" tabindex="-1">\u4F7F\u7528\u4E91\u5F00\u53D1\u83B7\u53D6\u7701\u5E02\u533A\u6570\u636E</h3><p>\u5B9E\u9645\u9879\u76EE\u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html" target="_blank">\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1</a>\u7684\u80FD\u529B\uFF0C\u5C06\u7701\u5E02\u533A\u6570\u636E\u4FDD\u5B58\u5728\u4E91\u5F00\u53D1\u7684\u6570\u636E\u5E93\u4E2D\uFF0C\u5E76\u5728\u5C0F\u7A0B\u5E8F\u4E2D\u4F7F\u7528\u4E91\u5F00\u53D1\u7684\u63A5\u53E3\u5F02\u6B65\u83B7\u53D6\u6570\u636E\u3002</p><p>\u5728\u5C0F\u7A0B\u5E8F\u4E2D\u4F7F\u7528\u4E91\u80FD\u529B\u4E4B\u524D\u9700\u8981\u5148\u8C03\u7528<code>wx.could.init</code>\u65B9\u6CD5\u5B8C\u6210\u4E91\u80FD\u529B\u7684\u521D\u59CB\u5316\u3002</p><pre><code class="language-js"><span class="hljs-keyword">const</span> db = wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">database</span>();
db.<span class="hljs-title function_">collection</span>(<span class="hljs-string">&#39;region&#39;</span>)
.<span class="hljs-title function_">limit</span>(<span class="hljs-number">1</span>)
.<span class="hljs-title function_">get</span>()
.<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
<span class="hljs-keyword">if</span> (res.<span class="hljs-property">data</span> &amp;&amp; res.<span class="hljs-property">data</span>.<span class="hljs-property">length</span> &gt; <span class="hljs-number">0</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">areaList</span>: res.<span class="hljs-property">data</span>[<span class="hljs-number">0</span>],
});
}
})
.<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">err</span>) =&gt;</span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err);
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u7684\u7701\u5E02\u533A<code>code</code></td><td><em>string</em></td><td>-</td></tr><tr><td>title</td><td>\u9876\u90E8\u680F\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>area-list</td><td>\u7701\u5E02\u533A\u6570\u636E\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9</td><td><em>object</em></td><td>-</td></tr><tr><td>columns-num</td><td>\u7701\u5E02\u533A\u663E\u793A\u5217\u6570\uFF0C3-\u7701\u5E02\u533A\uFF0C2-\u7701\u5E02\uFF0C1-\u7701</td><td><em>number</em></td><td><code>3</code></td></tr><tr><td>columns-placeholder</td><td>\u5217\u5360\u4F4D\u63D0\u793A\u6587\u5B57</td><td><em>string[]</em></td><td><code>[]</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>item-height</td><td>\u9009\u9879\u9AD8\u5EA6</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>visible-item-count</td><td>\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570</td><td><em>number</em></td><td><code>6</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>show-toolbar <code>1.10.3</code></td><td>\u662F\u5426\u663E\u793A\u9876\u90E8\u680F</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:confirm</td><td>\u70B9\u51FB\u53F3\u4E0A\u65B9\u5B8C\u6210\u6309\u94AE</td><td>\u4E00\u4E2A\u6570\u7EC4\u53C2\u6570\uFF0C\u5177\u4F53\u683C\u5F0F\u770B\u4E0B\u65B9\u6570\u636E\u683C\u5F0F\u7AE0\u8282</td></tr><tr><td>bind:cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6</td><td>-</td></tr><tr><td>bind:change</td><td>\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1</td><td>Picker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Area \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>reset</td><td>code: string</td><td>-</td><td>\u6839\u636E code \u91CD\u7F6E\u6240\u6709\u9009\u9879\uFF0C\u82E5\u4E0D\u4F20 code\uFF0C\u5219\u91CD\u7F6E\u5230\u7B2C\u4E00\u9879</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dian-ji-wan-cheng-shi-fan-hui-de-shu-ju-ge-shi" tabindex="-1">\u70B9\u51FB\u5B8C\u6210\u65F6\u8FD4\u56DE\u7684\u6570\u636E\u683C\u5F0F</h3><p>\u8FD4\u56DE\u7684\u6570\u636E\u6574\u4F53\u4E3A\u4E00\u4E2A Object\uFF0C\u5305\u542B <code>values</code>, <code>index</code> \u4E24\u4E2A key\u3002</p><p><code>values</code> \u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B <code>columnsNum</code> \u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u7684\u6570\u636E\u3002</p><p><code>code</code> \u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u7F16\u7801\uFF0C <code>name</code> \u4EE3\u8868\u88AB\u9009\u4E2D\u7684\u5730\u533A\u540D\u79F0\u3002</p><pre><code class="language-javascript">[
{
<span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110000&#39;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5317\u4EAC\u5E02&#39;</span>,
},
{
<span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110100&#39;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5317\u4EAC\u5E02&#39;</span>,
},
{
<span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110101&#39;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E1C\u57CE\u533A&#39;</span>,
},
];
</code></pre><p><code>index</code> \u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B <code>columnsNum</code> \u4E2A\u6570\u636E\uFF0C \u6BCF\u4E2A\u6570\u636E\u5BF9\u5E94\u4E00\u5217\u9009\u9879\u4E2D\u88AB\u9009\u4E2D\u9879\u7684\u5E8F\u53F7\u3002</p></div>`,17),O=[U],G={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",V,O))}},W={class:"van-doc-markdown-body"},H=d(`<h1>Button \u6309\u94AE</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u6309\u94AE\u7528\u4E8E\u89E6\u53D1\u4E00\u4E2A\u64CD\u4F5C\uFF0C\u5982\u63D0\u4EA4\u8868\u5355\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/button/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="an-niu-lei-xing" tabindex="-1">\u6309\u94AE\u7C7B\u578B</h3><p>\u652F\u6301<code>default</code>\u3001<code>primary</code>\u3001<code>info</code>\u3001<code>warning</code>\u3001<code>danger</code>\u4E94\u79CD\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A<code>default</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;default&quot;</span>&gt;</span>\u9ED8\u8BA4\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E3B\u8981\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u4FE1\u606F\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u8B66\u544A\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u5371\u9669\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="po-su-an-niu" tabindex="-1">\u6734\u7D20\u6309\u94AE</h3><p>\u901A\u8FC7<code>plain</code>\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6734\u7D20\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u6734\u7D20\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xi-bian-kuang" tabindex="-1">\u7EC6\u8FB9\u6846</h3><p>\u8BBE\u7F6E<code>hairline</code>\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F 0.5px \u8FB9\u6846\uFF0C\u57FA\u4E8E\u4F2A\u7C7B\u5B9E\u73B0\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">hairline</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u7EC6\u8FB9\u6846\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">hairline</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u7EC6\u8FB9\u6846\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7<code>disabled</code>\u5C5E\u6027\u6765\u7981\u7528\u6309\u94AE\uFF0C\u6B64\u65F6\u6309\u94AE\u7684<code>bind:click</code>\u4E8B\u4EF6\u4E0D\u4F1A\u89E6\u53D1\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u7981\u7528\u72B6\u6001<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u7981\u7528\u72B6\u6001<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">loading-type</span>=<span class="hljs-string">&quot;spinner&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span> <span class="hljs-attr">loading-text</span>=<span class="hljs-string">&quot;\u52A0\u8F7D\u4E2D...&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="an-niu-xing-zhuang" tabindex="-1">\u6309\u94AE\u5F62\u72B6</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">square</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u65B9\u5F62\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u5706\u5F62\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-an-niu" tabindex="-1">\u56FE\u6807\u6309\u94AE</h3><p>\u901A\u8FC7<code>icon</code>\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u56FE\u6807\uFF0C\u652F\u6301 Icon \u7EC4\u4EF6\u91CC\u7684\u6240\u6709\u56FE\u6807\uFF0C\u4E5F\u53EF\u4EE5\u4F20\u5165\u56FE\u6807 URL\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;star-o&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;star-o&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/logo.png&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>
\u6309\u94AE
<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="an-niu-chi-cun" tabindex="-1">\u6309\u94AE\u5C3A\u5BF8</h3><p>\u652F\u6301<code>large</code>\u3001<code>normal</code>\u3001<code>small</code>\u3001<code>mini</code>\u56DB\u79CD\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u4E3A<code>normal</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span>&gt;</span>\u5927\u53F7\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;normal&quot;</span>&gt;</span>\u666E\u901A\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span>\u5C0F\u578B\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>\u8FF7\u4F60\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="kuai-ji-yuan-su" tabindex="-1">\u5757\u7EA7\u5143\u7D20</h3><p>\u901A\u8FC7<code>block</code>\u5C5E\u6027\u53EF\u4EE5\u5C06\u6309\u94AE\u7684\u5143\u7D20\u7C7B\u578B\u8BBE\u7F6E\u4E3A\u5757\u7EA7\u5143\u7D20\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">block</span>&gt;</span>\u5757\u7EA7\u5143\u7D20<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>color</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span>&gt;</span>\u5355\u8272\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">plain</span>&gt;</span>\u5355\u8272\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(to right, #4bb0ff, #6149f6)&quot;</span>&gt;</span>
\u6E10\u53D8\u8272\u6309\u94AE
<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>id</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>button-id <code>v1.10.25</code></td><td>\u6807\u8BC6\u7B26\uFF0C\u4F5C\u4E3A\u539F\u751Fbutton\u7EC4\u4EF6\u7684id\u503C</td><td><em>string</em></td><td>-</td></tr><tr><td>type</td><td>\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>info</code> <code>warning</code> <code>danger</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>size</td><td>\u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A <code>normal</code> <code>large</code> <code>small</code> <code>mini</code></td><td><em>string</em></td><td><code>normal</code></td></tr><tr><td>color <code>v1.0.0</code></td><td>\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165<code>linear-gradient</code>\u6E10\u53D8\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>class-prefix</td><td>\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 <a href="#/icon" target="_blank">class-prefix \u5C5E\u6027</a></td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>plain</td><td>\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>block</td><td>\u662F\u5426\u4E3A\u5757\u7EA7\u5143\u7D20</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>round</td><td>\u662F\u5426\u4E3A\u5706\u5F62\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>square</td><td>\u662F\u5426\u4E3A\u65B9\u5F62\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>hairline</td><td>\u662F\u5426\u4F7F\u7528 0.5px \u8FB9\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading-text</td><td>\u52A0\u8F7D\u72B6\u6001\u63D0\u793A\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>loading-type</td><td>\u52A0\u8F7D\u72B6\u6001\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>loading-size</td><td>\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F</td><td><em>string</em></td><td><code>20px</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html" target="_blank">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td></tr><tr><td>business-id</td><td>\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id</td><td><em>number</em></td><td>-</td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>dataset</td><td>\u6309\u94AE dataset\uFF0Copen-type \u4E3A <code>share</code> \u65F6\uFF0C\u53EF\u5728 onShareAppMessage \u4E8B\u4EF6\u7684 <code>event.target.dataset.detail</code> \u4E2D\u770B\u5230\u4F20\u5165\u7684\u503C</td><td><em>any</em></td><td>-</td></tr><tr><td>form-type</td><td>\u7528\u4E8E form \u7EC4\u4EF6\uFF0C\u53EF\u9009\u503C\u4E3A<code>submit</code> <code>reset</code>\uFF0C\u70B9\u51FB\u5206\u522B\u4F1A\u89E6\u53D1 form \u7EC4\u4EF6\u7684 submit/reset \u4E8B\u4EF6</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u6309\u94AE\uFF0C\u4E14\u6309\u94AE\u72B6\u6001\u4E0D\u4E3A\u52A0\u8F7D\u6216\u7981\u7528\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>\u7528\u6237\u70B9\u51FB\u8BE5\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C<br>\u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo</td><td>-</td></tr><tr><td>bind:contact</td><td>\u5BA2\u670D\u6D88\u606F\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:getrealtimephonenumber <code>v1.10.21</code></td><td>\u83B7\u53D6\u624B\u673A\u53F7\u5B9E\u65F6\u9A8C\u8BC1\u56DE\u8C03\uFF0Copen-type=getRealtimePhoneNumber \u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:agreeprivacyauthorization <code>v1.10.24</code></td><td>\u540C\u610F\u9690\u79C1\u534F\u8BAE\u56DE\u8C03\uFF0CopenType=&quot;agreePrivacyAuthorization&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:error</td><td>\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:opensetting</td><td>\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:chooseavatar</td><td>\u5F53 open-type \u7684\u503C\u4E3A chooseAvatar \u65F6\uFF0C\u9009\u62E9\u5934\u50CF\u4E4B\u540E\u7684\u56DE\u8C03</td><td></td></tr></tbody></table><blockquote><p>Button \u63D0\u4F9B\u7684\u662F click \u4E8B\u4EF6\u800C\u4E0D\u662F\u539F\u751F tap \u4E8B\u4EF6\uFF0C\u6309\u94AE\u7981\u7528\u65F6\uFF0Cclick \u4E8B\u4EF6\u4E0D\u4F1A\u89E6\u53D1\uFF0Ctap \u4E8B\u4EF6\u4F9D\u7136\u4F1A\u89E6\u53D1\u3002</p></blockquote></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>loading-class</td><td>\u52A0\u8F7D\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,18),K=[H],Q={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",W,K))}},J={class:"van-doc-markdown-body"},X=d(`<h1>Calendar \u65E5\u5386</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u65E5\u5386\u7EC4\u4EF6\u7528\u4E8E\u9009\u62E9\u65E5\u671F\u6216\u65E5\u671F\u533A\u95F4\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-calendar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/calendar/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="xuan-ze-dan-ge-ri-qi" tabindex="-1">\u9009\u62E9\u5355\u4E2A\u65E5\u671F</h3><p>\u4E0B\u9762\u6F14\u793A\u4E86\u7ED3\u5408\u5355\u5143\u683C\u6765\u4F7F\u7528\u65E5\u5386\u7EC4\u4EF6\u7684\u7528\u6CD5\uFF0C\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u89E6\u53D1<code>confirm</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u9009\u62E9\u5355\u4E2A\u65E5\u671F&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ date }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onDisplay&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span> <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">date</span>: <span class="hljs-string">&#39;&#39;</span>,
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
},
<span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
<span class="hljs-title function_">formatDate</span>(<span class="hljs-params">date</span>) {
date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(date);
<span class="hljs-keyword">return</span> <span class="hljs-string">\`<span class="hljs-subst">\${date.getMonth() + <span class="hljs-number">1</span>}</span>/<span class="hljs-subst">\${date.getDate()}</span>\`</span>;
},
<span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">date</span>: <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">formatDate</span>(event.<span class="hljs-property">detail</span>),
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-duo-ge-ri-qi" tabindex="-1">\u9009\u62E9\u591A\u4E2A\u65E5\u671F</h3><p>\u8BBE\u7F6E<code>type</code>\u4E3A<code>multiple</code>\u540E\u53EF\u4EE5\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C\u6B64\u65F6<code>confirm</code>\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u5305\u542B\u82E5\u5E72\u4E2A\u9009\u4E2D\u7684\u65E5\u671F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u9009\u62E9\u591A\u4E2A\u65E5\u671F&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ text }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onDisplay&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;multiple&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;&#39;</span>,
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
},
<span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
<span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">\`\u9009\u62E9\u4E86 <span class="hljs-subst">\${event.detail.length}</span> \u4E2A\u65E5\u671F\`</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-qu-jian" tabindex="-1">\u9009\u62E9\u65E5\u671F\u533A\u95F4</h3><p>\u8BBE\u7F6E<code>type</code>\u4E3A<code>range</code>\u540E\u53EF\u4EE5\u9009\u62E9\u65E5\u671F\u533A\u95F4\uFF0C\u6B64\u65F6<code>confirm</code>\u4E8B\u4EF6\u8FD4\u56DE\u7684 date \u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0C\u6570\u7EC4\u7B2C\u4E00\u9879\u4E3A\u5F00\u59CB\u65F6\u95F4\uFF0C\u7B2C\u4E8C\u9879\u4E3A\u7ED3\u675F\u65F6\u95F4\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u9009\u62E9\u65E5\u671F\u533A\u95F4&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ date }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onDisplay&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">date</span>: <span class="hljs-string">&#39;&#39;</span>,
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
},
<span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
<span class="hljs-title function_">formatDate</span>(<span class="hljs-params">date</span>) {
date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(date);
<span class="hljs-keyword">return</span> <span class="hljs-string">\`<span class="hljs-subst">\${date.getMonth() + <span class="hljs-number">1</span>}</span>/<span class="hljs-subst">\${date.getDate()}</span>\`</span>;
},
<span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> [start, end] = event.<span class="hljs-property">detail</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">date</span>: <span class="hljs-string">\`<span class="hljs-subst">\${<span class="hljs-variable language_">this</span>.formatDate(start)}</span> - <span class="hljs-subst">\${<span class="hljs-variable language_">this</span>.formatDate(end)}</span>\`</span>,
});
},
});
</code></pre><blockquote><p>Tips: \u9ED8\u8BA4\u60C5\u51B5\u4E0B\uFF0C\u65E5\u671F\u533A\u95F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E0D\u80FD\u4E3A\u540C\u4E00\u5929\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E allow-same-day \u5C5E\u6027\u6765\u5141\u8BB8\u9009\u62E9\u540C\u4E00\u5929\u3002</p></blockquote></div><div class="van-doc-card"><h3 id="kuai-jie-xuan-ze" tabindex="-1">\u5FEB\u6377\u9009\u62E9</h3><p>\u5C06<code>show-confirm</code>\u8BBE\u7F6E\u4E3A<code>false</code>\u53EF\u4EE5\u9690\u85CF\u786E\u8BA4\u6309\u94AE\uFF0C\u8FD9\u79CD\u60C5\u51B5\u4E0B\u9009\u62E9\u5B8C\u6210\u540E\u4F1A\u7ACB\u5373\u89E6\u53D1<code>confirm</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">show-confirm</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>color</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u65E5\u5386\u7684\u989C\u8272\uFF0C\u5BF9\u9009\u4E2D\u65E5\u671F\u548C\u5E95\u90E8\u6309\u94AE\u751F\u6548\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#07c160&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ri-qi-fan-wei" tabindex="-1">\u81EA\u5B9A\u4E49\u65E5\u671F\u8303\u56F4</h3><p>\u901A\u8FC7<code>min-date</code>\u548C<code>max-date</code>\u5B9A\u4E49\u65E5\u5386\u7684\u8303\u56F4\uFF0C\u9700\u8981\u6CE8\u610F\u7684\u662F<code>min-date</code>\u548C<code>max-date</code>\u7684\u533A\u95F4\u4E0D\u5B9C\u8FC7\u5927\uFF0C\u5426\u5219\u4F1A\u9020\u6210\u4E25\u91CD\u7684\u6027\u80FD\u95EE\u9898\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>
<span class="hljs-attr">max-date</span>=<span class="hljs-string">&quot;{{ maxDate }}&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2010</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>).<span class="hljs-title function_">getTime</span>(),
<span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2010</span>, <span class="hljs-number">0</span>, <span class="hljs-number">31</span>).<span class="hljs-title function_">getTime</span>(),
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu-wen-zi" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE\u6587\u5B57</h3><p>\u901A\u8FC7<code>confirm-text</code>\u8BBE\u7F6E\u6309\u94AE\u6587\u5B57\uFF0C\u901A\u8FC7<code>confirm-disabled-text</code>\u8BBE\u7F6E\u6309\u94AE\u7981\u7528\u65F6\u7684\u6587\u5B57\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span>
<span class="hljs-attr">confirm-text</span>=<span class="hljs-string">&quot;\u5B8C\u6210&quot;</span>
<span class="hljs-attr">confirm-disabled-text</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u7ED3\u675F\u65F6\u95F4&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ri-qi-wen-an" tabindex="-1">\u81EA\u5B9A\u4E49\u65E5\u671F\u6587\u6848</h3><p>\u901A\u8FC7\u4F20\u5165<code>formatter</code>\u51FD\u6570\u6765\u5BF9\u65E5\u5386\u4E0A\u6BCF\u4E00\u683C\u7684\u5185\u5BB9\u8FDB\u884C\u683C\u5F0F\u5316</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">formatter</span>=<span class="hljs-string">&quot;{{ formatter }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-title function_">formatter</span>(<span class="hljs-params">day</span>) {
<span class="hljs-keyword">const</span> month = day.<span class="hljs-property">date</span>.<span class="hljs-title function_">getMonth</span>() + <span class="hljs-number">1</span>;
<span class="hljs-keyword">const</span> date = day.<span class="hljs-property">date</span>.<span class="hljs-title function_">getDate</span>();
<span class="hljs-keyword">if</span> (month === <span class="hljs-number">5</span>) {
<span class="hljs-keyword">if</span> (date === <span class="hljs-number">1</span>) {
day.<span class="hljs-property">topInfo</span> = <span class="hljs-string">&#39;\u52B3\u52A8\u8282&#39;</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (date === <span class="hljs-number">4</span>) {
day.<span class="hljs-property">topInfo</span> = <span class="hljs-string">&#39;\u4E94\u56DB\u9752\u5E74\u8282&#39;</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (date === <span class="hljs-number">11</span>) {
day.<span class="hljs-property">text</span> = <span class="hljs-string">&#39;\u4ECA\u5929&#39;</span>;
}
}
<span class="hljs-keyword">if</span> (day.<span class="hljs-property">type</span> === <span class="hljs-string">&#39;start&#39;</span>) {
day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">&#39;\u5165\u4F4F&#39;</span>;
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (day.<span class="hljs-property">type</span> === <span class="hljs-string">&#39;end&#39;</span>) {
day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">&#39;\u79BB\u5E97&#39;</span>;
}
<span class="hljs-keyword">return</span> day;
},
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-dan-chu-wei-zhi" tabindex="-1">\u81EA\u5B9A\u4E49\u5F39\u51FA\u4F4D\u7F6E</h3><p>\u901A\u8FC7<code>position</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u7684\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A<code>top</code>\u3001<code>left</code>\u3001<code>right</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">round</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;right&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ri-qi-qu-jian-zui-da-fan-wei" tabindex="-1">\u65E5\u671F\u533A\u95F4\u6700\u5927\u8303\u56F4</h3><p>\u9009\u62E9\u65E5\u671F\u533A\u95F4\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>max-range</code>\u5C5E\u6027\u6765\u6307\u5B9A\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9009\u62E9\u7684\u8303\u56F4\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u4F1A\u5F39\u51FA\u76F8\u5E94\u7684\u63D0\u793A\u6587\u6848\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">max-range</span>=<span class="hljs-string">&quot;{{ 3 }}&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-zhou-qi-shi-ri" tabindex="-1">\u81EA\u5B9A\u4E49\u5468\u8D77\u59CB\u65E5</h3><p>\u901A\u8FC7 <code>first-day-of-week</code> \u5C5E\u6027\u8BBE\u7F6E\u4E00\u5468\u4ECE\u54EA\u5929\u5F00\u59CB\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span> <span class="hljs-attr">first-day-of-week</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ping-pu-zhan-shi" tabindex="-1">\u5E73\u94FA\u5C55\u793A</h3><p>\u5C06<code>poppable</code>\u8BBE\u7F6E\u4E3A<code>false</code>\uFF0C\u65E5\u5386\u4F1A\u76F4\u63A5\u5C55\u793A\u5728\u9875\u9762\u5185\uFF0C\u800C\u4E0D\u662F\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u51FA\u73B0\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u65E5\u5386&quot;</span>
<span class="hljs-attr">poppable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">show-confirm</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;calendar&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.calendar</span> {
<span class="hljs-attr">--calendar-height</span>: <span class="hljs-number">618px</span>;
}
</code></pre><blockquote><p>Tips: \u6CE8\u610F\uFF0C\u5728\u81EA\u5B9A\u4E49calendar\u7684\u9AD8\u5EA6\u65F6\uFF0C\u9700\u8981\u786E\u4FDD\uFF0C\u6EDA\u52A8\u5230\u5F53\u524D\u6708\u4EFD\u65F6\uFF0C\u6240\u6709\u7684\u65E5\u671F\u8981\u5C55\u73B0\u5728.van-calendar__body\u5185\uFF0C\u5426\u5219\u53EF\u80FD\u4F1A\u51FA\u73B0\u6EDA\u52A8\u65F6\u5934\u90E8\u6708\u4EFD\u4E0E\u5F53\u524D\u6708\u4EFD\u4E0D\u540C\u6B65\u7684\u60C5\u51B5\u3002\u76EE\u524D\u5E73\u94FA\u578B\u9884\u8BBE\u9AD8\u5EA6618px,\u5F39\u7A97\u578B\u9AD8\u5EA690%\u3002</p></blockquote></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u9009\u62E9\u7C7B\u578B:<br><code>single</code>\u8868\u793A\u9009\u62E9\u5355\u4E2A\u65E5\u671F\uFF0C<br><code>multiple</code>\u8868\u793A\u9009\u62E9\u591A\u4E2A\u65E5\u671F\uFF0C<br><code>range</code>\u8868\u793A\u9009\u62E9\u65E5\u671F\u533A\u95F4</td><td><em>string</em></td><td><code>single</code></td></tr><tr><td>title</td><td>\u65E5\u5386\u6807\u9898</td><td><em>string</em></td><td><code>\u65E5\u671F\u9009\u62E9</code></td></tr><tr><td>color</td><td>\u4E3B\u9898\u8272\uFF0C\u5BF9\u5E95\u90E8\u6309\u94AE\u548C\u9009\u4E2D\u65E5\u671F\u751F\u6548</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>min-date</td><td>\u53EF\u9009\u62E9\u7684\u6700\u5C0F\u65E5\u671F</td><td><em>timestamp</em></td><td>\u5F53\u524D\u65E5\u671F</td></tr><tr><td>max-date</td><td>\u53EF\u9009\u62E9\u7684\u6700\u5927\u65E5\u671F</td><td><em>timestamp</em></td><td>\u5F53\u524D\u65E5\u671F\u7684\u516D\u4E2A\u6708\u540E</td></tr><tr><td>default-date <code>v1.10.21</code></td><td>\u9ED8\u8BA4\u9009\u4E2D\u7684\u65E5\u671F\uFF0C<code>type</code>\u4E3A<code>multiple</code>\u6216<code>range</code>\u65F6\u4E3A\u6570\u7EC4\uFF0C\u4F20\u5165 <code>null</code> \u8868\u793A\u9ED8\u8BA4\u4E0D\u9009\u62E9</td><td><em>timestamp | timestamp[] | null</em></td><td>\u4ECA\u5929</td></tr><tr><td>row-height</td><td>\u65E5\u671F\u884C\u9AD8</td><td><em>number | string</em></td><td><code>64</code></td></tr><tr><td>formatter</td><td>\u65E5\u671F\u683C\u5F0F\u5316\u51FD\u6570</td><td><em>(day: Day) =&gt; Day</em></td><td>-</td></tr><tr><td>poppable</td><td>\u662F\u5426\u4EE5\u5F39\u5C42\u7684\u5F62\u5F0F\u5C55\u793A\u65E5\u5386</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-mark</td><td>\u662F\u5426\u663E\u793A\u6708\u4EFD\u80CC\u666F\u6C34\u5370</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-title</td><td>\u662F\u5426\u5C55\u793A\u65E5\u5386\u6807\u9898</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-subtitle</td><td>\u662F\u5426\u5C55\u793A\u65E5\u5386\u526F\u6807\u9898\uFF08\u5E74\u6708\uFF09</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-confirm</td><td>\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>confirm-text</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u5B9A</code></td></tr><tr><td>confirm-disabled-text</td><td>\u786E\u8BA4\u6309\u94AE\u5904\u4E8E\u7981\u7528\u72B6\u6001\u65F6\u7684\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u5B9A</code></td></tr><tr><td>first-day-of-week</td><td>\u8BBE\u7F6E\u5468\u8D77\u59CB\u65E5</td><td><em>0~6</em></td><td><code>0</code></td></tr><tr><td>readonly <code>v1.9.1</code></td><td>\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001\uFF0C\u53EA\u8BFB\u72B6\u6001\u4E0B\u4E0D\u80FD\u9009\u62E9\u65E5\u671F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>root-portal <code>v1.11.3</code></td><td>\u662F\u5426\u4ECE\u9875\u9762\u5B50\u6811\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 &gt;= <code>2.25.2 </code></td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="poppable-props" tabindex="-1">Poppable Props</h3><p>\u5F53 Calendar \u7684 <code>poppable</code> \u4E3A <code>true</code> \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u65E5\u5386\u5F39\u7A97</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>position</td><td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>top</code> <code>right</code> <code>left</code></td><td><em>string</em></td><td><code>bottom</code></td></tr><tr><td>round</td><td>\u662F\u5426\u663E\u793A\u5706\u89D2\u5F39\u7A97</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="range-props" tabindex="-1">Range Props</h3><p>\u5F53 Calendar \u7684 <code>type</code> \u4E3A <code>range</code> \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>max-range</td><td>\u65E5\u671F\u533A\u95F4\u6700\u591A\u53EF\u9009\u5929\u6570\uFF0C\u9ED8\u8BA4\u65E0\u9650\u5236</td><td><em>number | string</em></td><td>-</td></tr><tr><td>range-prompt</td><td>\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u7684\u63D0\u793A\u6587\u6848</td><td><em>string | null</em></td><td><code>\u9009\u62E9\u5929\u6570\u4E0D\u80FD\u8D85\u8FC7 xx \u5929</code></td></tr><tr><td>show-range-prompt</td><td>\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\uFF0C\u662F\u5426\u5C55\u793A\u63D0\u793A\u6587\u6848</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>allow-same-day</td><td>\u662F\u5426\u5141\u8BB8\u65E5\u671F\u8303\u56F4\u7684\u8D77\u6B62\u65F6\u95F4\u4E3A\u540C\u4E00\u5929</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="multiple-props" tabindex="-1">Multiple Props</h3><p>\u5F53 Calendar \u7684 <code>type</code> \u4E3A <code>multiple</code> \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B props:</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>min-range</td><td>\u65E5\u671F\u6700\u5C11\u53EF\u9009\u5929\u6570</td><td><em>number | string</em></td><td><code>1</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="day-shu-ju-jie-gou" tabindex="-1">Day \u6570\u636E\u7ED3\u6784</h3><p>\u65E5\u5386\u4E2D\u7684\u6BCF\u4E2A\u65E5\u671F\u90FD\u5BF9\u5E94\u4E00\u4E2A Day \u5BF9\u8C61\uFF0C\u901A\u8FC7<code>formatter</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 Day \u5BF9\u8C61\u7684\u5185\u5BB9\u3002</p><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>date</td><td>\u65E5\u671F\u5BF9\u5E94\u7684 Date \u5BF9\u8C61</td><td><em>Date</em></td></tr><tr><td>type</td><td>\u65E5\u671F\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A<code>selected</code>\u3001<code>start</code>\u3001<code>middle</code>\u3001<code>end</code>\u3001<code>disabled</code></td><td><em>string</em></td></tr><tr><td>text</td><td>\u4E2D\u95F4\u663E\u793A\u7684\u6587\u5B57</td><td><em>string</em></td></tr><tr><td>topInfo</td><td>\u4E0A\u65B9\u7684\u63D0\u793A\u4FE1\u606F</td><td><em>string</em></td></tr><tr><td>bottomInfo</td><td>\u4E0B\u65B9\u7684\u63D0\u793A\u4FE1\u606F</td><td><em>string</em></td></tr><tr><td>className</td><td>\u81EA\u5B9A\u4E49 className</td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:select</td><td>\u70B9\u51FB\u4EFB\u610F\u65E5\u671F\u65F6\u89E6\u53D1</td><td><em>value: Date | Date[]</em></td></tr><tr><td>bind:unselect</td><td>\u5F53 Calendar \u7684 <code>type</code> \u4E3A <code>multiple</code> \u65F6,\u70B9\u51FB\u5DF2\u9009\u4E2D\u7684\u65E5\u671F\u65F6\u89E6\u53D1</td><td><em>value: Date</em></td></tr><tr><td>bind:confirm</td><td>\u65E5\u671F\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1\uFF0C\u82E5<code>show-confirm</code>\u4E3A<code>true</code>\uFF0C\u5219\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u540E\u89E6\u53D1</td><td><em>value: Date | Date[]</em></td></tr><tr><td>bind:open</td><td>\u6253\u5F00\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:close</td><td>\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:opened</td><td>\u6253\u5F00\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:closed</td><td>\u5173\u95ED\u5F39\u51FA\u5C42\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:over-range</td><td>\u8303\u56F4\u9009\u62E9\u8D85\u8FC7\u6700\u591A\u53EF\u9009\u5929\u6570\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-subtitle <code>v1.8.1</code></td><td>\u70B9\u51FB\u65E5\u5386\u526F\u6807\u9898\u65F6\u89E6\u53D1</td><td><em>WechatMiniprogram.TouchEvent</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898</td></tr><tr><td>footer</td><td>\u81EA\u5B9A\u4E49\u5E95\u90E8\u533A\u57DF\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Calendar \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th></tr></thead><tbody><tr><td>reset</td><td>\u91CD\u7F6E\u9009\u4E2D\u7684\u65E5\u671F\u5230\u9ED8\u8BA4\u503C</td><td>-</td><td>-</td></tr></tbody></table></div>`,25),Z=[X],Y={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",J,Z))}},ss={class:"van-doc-markdown-body"},as=d(`<h1>Card \u5546\u54C1\u5361\u7247</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5546\u54C1\u5361\u7247\uFF0C\u7528\u4E8E\u5C55\u793A\u5546\u54C1\u7684\u56FE\u7247\u3001\u4EF7\u683C\u7B49\u4FE1\u606F\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-card&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/card/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-card</span>
<span class="hljs-attr">num</span>=<span class="hljs-string">&quot;2&quot;</span>
<span class="hljs-attr">price</span>=<span class="hljs-string">&quot;2.00&quot;</span>
<span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5546\u54C1\u6807\u9898&quot;</span>
<span class="hljs-attr">thumb</span>=<span class="hljs-string">&quot;{{ imageURL }}&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u53EF\u4EE5\u901A\u8FC7\u63D2\u69FD\u6DFB\u52A0\u5B9A\u5236\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-card</span>
<span class="hljs-attr">num</span>=<span class="hljs-string">&quot;2&quot;</span>
<span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;\u6807\u7B7E&quot;</span>
<span class="hljs-attr">price</span>=<span class="hljs-string">&quot;10.00&quot;</span>
<span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5546\u54C1\u6807\u9898&quot;</span>
<span class="hljs-attr">thumb</span>=<span class="hljs-string">&quot;{{ imageURL }}&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;mini&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-card</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>thumb</td><td>\u5DE6\u4FA7\u56FE\u7247</td><td><em>string</em></td><td>-</td></tr><tr><td>thumb-mode</td><td>\u5DE6\u4FA7\u56FE\u7247\u88C1\u526A\u3001\u7F29\u653E\u7684\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8F image \u7EC4\u4EF6 mode \u5C5E\u6027\u503C</td><td><em>string</em></td><td><code>aspectFit</code></td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>desc</td><td>\u63CF\u8FF0</td><td><em>string</em></td><td>-</td></tr><tr><td>tag</td><td>\u6807\u7B7E</td><td><em>string</em></td><td>-</td></tr><tr><td>num</td><td>\u5546\u54C1\u6570\u91CF</td><td><em>string | number</em></td><td>-</td></tr><tr><td>price</td><td>\u5546\u54C1\u4EF7\u683C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>origin-price</td><td>\u5546\u54C1\u5212\u7EBF\u539F\u4EF7</td><td><em>string | number</em></td><td>-</td></tr><tr><td>centered</td><td>\u5185\u5BB9\u662F\u5426\u5782\u76F4\u5C45\u4E2D</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>currency</td><td>\u8D27\u5E01\u7B26\u53F7</td><td><em>string</em></td><td><code>\xA5</code></td></tr><tr><td>thumb-link</td><td>\u70B9\u51FB\u5DE6\u4FA7\u56FE\u7247\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>lazy-load</td><td>\u662F\u5426\u5F00\u542F\u56FE\u7247\u61D2\u52A0\u8F7D</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>desc</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>desc</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>num</td><td>\u81EA\u5B9A\u4E49\u6570\u91CF</td></tr><tr><td>price</td><td>\u81EA\u5B9A\u4E49\u4EF7\u683C</td></tr><tr><td>origin-price</td><td>\u81EA\u5B9A\u4E49\u5546\u54C1\u539F\u4EF7\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>origin-price</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>price-top</td><td>\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0A\u65B9\u533A\u57DF</td></tr><tr><td>bottom</td><td>\u81EA\u5B9A\u4E49\u4EF7\u683C\u4E0B\u65B9\u533A\u57DF</td></tr><tr><td>thumb</td><td>\u81EA\u5B9A\u4E49\u56FE\u7247\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>thumb</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>tag</td><td>\u81EA\u5B9A\u4E49\u56FE\u7247\u89D2\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>tag</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>tags</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u4E0B\u65B9\u6807\u7B7E\u533A\u57DF</td></tr><tr><td>footer</td><td>\u81EA\u5B9A\u4E49\u53F3\u4E0B\u89D2\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>thumb-class</td><td>\u5DE6\u4FA7\u56FE\u7247\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class</td><td>\u6807\u9898\u6837\u5F0F\u7C7B</td></tr><tr><td>price-class</td><td>\u4EF7\u683C\u6837\u5F0F\u7C7B</td></tr><tr><td>origin-price-class</td><td>\u5212\u7EBF\u539F\u4EF7\u6837\u5F0F\u7C7B</td></tr><tr><td>desc-class</td><td>\u63CF\u8FF0\u6837\u5F0F\u7C7B</td></tr><tr><td>num-class</td><td>\u6570\u91CF\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,10),ts=[as],ns={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ss,ts))}},ls={class:"van-doc-markdown-body"},es=d(`<h1>Cascader \u7EA7\u8054\u9009\u62E9</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7EA7\u8054\u9009\u62E9\u6846\uFF0C\u7528\u4E8E\u591A\u5C42\u7EA7\u6570\u636E\u7684\u9009\u62E9\uFF0C\u5178\u578B\u573A\u666F\u4E3A\u7701\u5E02\u533A\u9009\u62E9\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-cascader&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/cascader/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u7EA7\u8054\u9009\u62E9\u7EC4\u4EF6\u53EF\u4EE5\u642D\u914D Field \u548C Popup \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u793A\u4F8B\u5982\u4E0B\uFF1A</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ fieldValue }}&quot;</span>
<span class="hljs-attr">is-link</span>
<span class="hljs-attr">readonly</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u5730\u533A&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A&quot;</span>
<span class="hljs-attr">bind:tap</span>=<span class="hljs-string">&quot;onClick&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">round</span> <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cascader</span>
<span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ cascaderValue }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A&quot;</span>
<span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:finish</span>=<span class="hljs-string">&quot;onFinish&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</span>
</code></pre><pre><code class="language-js">
<span class="hljs-keyword">const</span> options = [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6D59\u6C5F\u7701&#39;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;330000&#39;</span>,
<span class="hljs-attr">children</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u676D\u5DDE\u5E02&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;330100&#39;</span> }],
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6C5F\u82CF\u7701&#39;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;320000&#39;</span>,
<span class="hljs-attr">children</span>: [{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5357\u4EAC\u5E02&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;320100&#39;</span> }],
},
];
<span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
options,
<span class="hljs-attr">fieldValue</span>: <span class="hljs-string">&#39;&#39;</span>,
<span class="hljs-attr">cascaderValue</span>: <span class="hljs-string">&#39;&#39;</span>,
},
<span class="hljs-title function_">onClick</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">show</span>: <span class="hljs-literal">true</span>,
});
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
});
},
<span class="hljs-title function_">onFinish</span>(<span class="hljs-params">e</span>) {
<span class="hljs-keyword">const</span> { selectedOptions, value } = e.<span class="hljs-property">detail</span>;
<span class="hljs-keyword">const</span> fieldValue = selectedOptions
.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">option</span>) =&gt;</span> option.<span class="hljs-property">text</span> || option.<span class="hljs-property">name</span>)
.<span class="hljs-title function_">join</span>(<span class="hljs-string">&#39;/&#39;</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
fieldValue,
<span class="hljs-attr">cascaderValue</span>: value,
})
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7 <code>active-color</code> \u5C5E\u6027\u6765\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cascader</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ cascaderValue }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A&quot;</span>
<span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>
<span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:finish</span>=<span class="hljs-string">&quot;onFinish&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-jia-zai-xuan-xiang" tabindex="-1">\u5F02\u6B65\u52A0\u8F7D\u9009\u9879</h3><p>\u53EF\u4EE5\u76D1\u542C <code>change</code> \u4E8B\u4EF6\u5E76\u52A8\u6001\u8BBE\u7F6E <code>options</code>\uFF0C\u5B9E\u73B0\u5F02\u6B65\u52A0\u8F7D\u9009\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ fieldValue }}&quot;</span>
<span class="hljs-attr">is-link</span>
<span class="hljs-attr">readonly</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u5730\u533A&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A&quot;</span>
<span class="hljs-attr">bind:tap</span>=<span class="hljs-string">&quot;onClick&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">round</span> <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cascader</span>
<span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ cascaderValue }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A&quot;</span>
<span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
<span class="hljs-attr">bind:finish</span>=<span class="hljs-string">&quot;onFinish&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6D59\u6C5F\u7701&#39;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;330000&#39;</span>,
<span class="hljs-attr">children</span>: [],
}
];
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {
<span class="hljs-keyword">const</span> { value } = e.<span class="hljs-property">detail</span>;
<span class="hljs-keyword">if</span> (value === <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">options</span>[<span class="hljs-number">0</span>].<span class="hljs-property">value</span>) {
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-keyword">const</span> children = [
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u676D\u5DDE\u5E02&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;330100&#39;</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5B81\u6CE2\u5E02&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;330200&#39;</span> },
];
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-string">&#39;options[0].children&#39;</span>: children,
})
}, <span class="hljs-number">500</span>);
}
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-zi-duan-ming" tabindex="-1">\u81EA\u5B9A\u4E49\u5B57\u6BB5\u540D</h3><p>\u901A\u8FC7 <code>field-names</code> \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49 <code>options</code> \u91CC\u7684\u5B57\u6BB5\u540D\u79F0\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cascader</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ code }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u8BF7\u9009\u62E9\u6240\u5728\u5730\u533A&quot;</span>
<span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>
<span class="hljs-attr">field-names</span>=<span class="hljs-string">&quot;{{ fieldNames }}&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">code</span>: <span class="hljs-string">&#39;&#39;</span>,
<span class="hljs-attr">fieldNames</span>: {
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;name&#39;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;code&#39;</span>,
<span class="hljs-attr">children</span>: <span class="hljs-string">&#39;items&#39;</span>,
},
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u6D59\u6C5F\u7701&#39;</span>,
<span class="hljs-attr">code</span>: <span class="hljs-string">&#39;330000&#39;</span>,
<span class="hljs-attr">items</span>: [{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u676D\u5DDE\u5E02&#39;</span>, <span class="hljs-attr">code</span>: <span class="hljs-string">&#39;330100&#39;</span> }],
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u6C5F\u82CF\u7701&#39;</span>,
<span class="hljs-attr">code</span>: <span class="hljs-string">&#39;320000&#39;</span>,
<span class="hljs-attr">items</span>: [{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5357\u4EAC\u5E02&#39;</span>, <span class="hljs-attr">code</span>: <span class="hljs-string">&#39;320100&#39;</span> }],
},
],
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u9876\u90E8\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u9009\u4E2D\u9879\u7684\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>options</td><td>\u53EF\u9009\u9879\u6570\u636E\u6E90</td><td><em>CascaderOption[]</em></td><td><code>[]</code></td></tr><tr><td>placeholder</td><td>\u672A\u9009\u4E2D\u65F6\u7684\u63D0\u793A\u6587\u6848</td><td><em>string</em></td><td><code>\u8BF7\u9009\u62E9</code></td></tr><tr><td>active-color</td><td>\u9009\u4E2D\u72B6\u6001\u7684\u9AD8\u4EAE\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>swipeable</td><td>\u662F\u5426\u5F00\u542F\u624B\u52BF\u5DE6\u53F3\u6ED1\u52A8\u5207\u6362</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>closeable</td><td>\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-header</td><td>\u662F\u5426\u5C55\u793A\u6807\u9898\u680F</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-icon</td><td>\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u7B49\u540C\u4E8E Icon \u7EC4\u4EF6\u7684 <a href="#/icon" target="_blank">name \u5C5E\u6027</a></td><td><em>string</em></td><td><code>cross</code></td></tr><tr><td>field-names</td><td>\u81EA\u5B9A\u4E49 <code>options</code> \u7ED3\u6784\u4E2D\u7684\u5B57\u6BB5</td><td><em>CascaderFieldNames</em></td><td><code>{ text: &#39;text&#39;, value: &#39;value&#39;, children: &#39;children&#39; }</code></td></tr><tr><td>use-title-slot <code>v1.11.3</code></td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6807\u9898\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cascaderoption-shu-ju-jie-gou" tabindex="-1">CascaderOption \u6570\u636E\u7ED3\u6784</h3><p><code>options</code> \u5C5E\u6027\u662F\u4E00\u4E2A\u7531\u5BF9\u8C61\u6784\u6210\u7684\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u4E2A\u53EF\u9009\u9879\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A</p><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>text</td><td>\u9009\u9879\u6587\u5B57\uFF08\u5FC5\u586B\uFF09</td><td><em>string</em></td></tr><tr><td>value</td><td>\u9009\u9879\u5BF9\u5E94\u7684\u503C\uFF08\u5FC5\u586B\uFF09</td><td><em>string | number</em></td></tr><tr><td>color</td><td>\u9009\u9879\u6587\u5B57\u989C\u8272</td><td><em>string</em></td></tr><tr><td>children</td><td>\u5B50\u9009\u9879\u5217\u8868</td><td><em>CascaderOption[]</em></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u9009\u9879</td><td><em>boolean</em></td></tr><tr><td>className</td><td>\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684 class</td><td><em>string | Array | object</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u9009\u4E2D\u9879\u53D8\u5316\u65F6\u89E6\u53D1</td><td>event.detail\uFF1A<em>{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }</em></td></tr><tr><td>bind:finish</td><td>\u5168\u90E8\u9009\u9879\u9009\u62E9\u5B8C\u6210\u540E\u89E6\u53D1</td><td>event.detail\uFF1A<em>{ value: string | number, selectedOptions: CascaderOption[], tabIndex: number }</em></td></tr><tr><td>bind:close</td><td>\u70B9\u51FB\u5173\u95ED\u56FE\u6807\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-tab</td><td>\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>event.detail\uFF1A<em>{ tabIndex: number, title: string }</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898</td><td>-</td></tr></tbody></table></div>`,13),ps=[es],ds={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ls,ps))}},cs={class:"van-doc-markdown-body"},os=d(`<h1>Cell \u5355\u5143\u683C</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5355\u5143\u683C\u4E3A\u5217\u8868\u4E2D\u7684\u5355\u4E2A\u5C55\u793A\u9879\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-cell&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/cell/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-cell-group&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/cell-group/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>Cell</code>\u53EF\u4EE5\u5355\u72EC\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u4E0E<code>CellGroup</code>\u642D\u914D\u4F7F\u7528\u3002<code>CellGroup</code>\u53EF\u4EE5\u4E3A<code>Cell</code>\u63D0\u4F9B\u4E0A\u4E0B\u5916\u8FB9\u6846\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="qia-pian-feng-ge" tabindex="-1">\u5361\u7247\u98CE\u683C</h3><p>\u901A\u8FC7 <code>CellGroup</code> \u7684 <code>inset</code> \u5C5E\u6027\uFF0C\u53EF\u4EE5\u5C06\u5355\u5143\u683C\u8F6C\u6362\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C\uFF08\u4ECE 1.7.2 \u7248\u672C\u5F00\u59CB\u652F\u6301\uFF09\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">inset</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="dan-yuan-ge-da-xiao" tabindex="-1">\u5355\u5143\u683C\u5927\u5C0F</h3><p>\u901A\u8FC7<code>size</code>\u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u5355\u5143\u683C\u7684\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-tu-biao" tabindex="-1">\u5C55\u793A\u56FE\u6807</h3><p>\u901A\u8FC7<code>icon</code>\u5C5E\u6027\u5728\u6807\u9898\u5DE6\u4FA7\u5C55\u793A\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;location-o&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-jian-tou" tabindex="-1">\u5C55\u793A\u7BAD\u5934</h3><p>\u8BBE\u7F6E<code>is-link</code>\u5C5E\u6027\u540E\u4F1A\u5728\u5355\u5143\u683C\u53F3\u4FA7\u663E\u793A\u7BAD\u5934\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7<code>arrow-direction</code>\u5C5E\u6027\u63A7\u5236\u7BAD\u5934\u65B9\u5411\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">is-link</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">arrow-direction</span>=<span class="hljs-string">&quot;down&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ye-mian-tiao-zhuan" tabindex="-1">\u9875\u9762\u8DF3\u8F6C</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>url</code>\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7<code>link-type</code>\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span>
<span class="hljs-attr">is-link</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span>
<span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;navigateTo&quot;</span>
<span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="fen-zu-biao-ti" tabindex="-1">\u5206\u7EC4\u6807\u9898</h3><p>\u901A\u8FC7<code>CellGroup</code>\u7684<code>title</code>\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u5206\u7EC4\u6807\u9898\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5206\u7EC41&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5206\u7EC42&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-cha-cao" tabindex="-1">\u4F7F\u7528\u63D2\u69FD</h3><p>\u5982\u4EE5\u4E0A\u7528\u6CD5\u4E0D\u80FD\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u53EF\u4EE5\u4F7F\u7528\u63D2\u69FD\u6765\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">is-link</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;title&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-cell-text&quot;</span>&gt;</span>\u5355\u5143\u683C<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-icon&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-ju-zhong" tabindex="-1">\u5782\u76F4\u5C45\u4E2D</h3><p>\u901A\u8FC7<code>center</code>\u5C5E\u6027\u53EF\u4EE5\u8BA9<code>Cell</code>\u7684\u5DE6\u53F3\u5185\u5BB9\u90FD\u5782\u76F4\u5C45\u4E2D\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">center</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="cellgroup-props" tabindex="-1">CellGroup Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u5206\u7EC4\u6807\u9898</td><td><em>string</em></td><td><code>-</code></td></tr><tr><td>inset <code>v1.7.2</code></td><td>\u662F\u5426\u5C55\u793A\u4E3A\u5706\u89D2\u5361\u7247\u98CE\u683C</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cellgroup-wai-bu-yang-shi-lei" tabindex="-1">CellGroup \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-props" tabindex="-1">Cell Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>icon</td><td>\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>title</td><td>\u5DE6\u4FA7\u6807\u9898</td><td><em>string | number</em></td><td>-</td></tr><tr><td>title-width</td><td>\u6807\u9898\u5BBD\u5EA6\uFF0C\u987B\u5305\u542B\u5355\u4F4D</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u53F3\u4FA7\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>label</td><td>\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u4FE1\u606F</td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>large</code></td><td><em>string</em></td><td>-</td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>center</td><td>\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>is-link</td><td>\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>required</td><td>\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>arrow-direction</td><td>\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code> <code>up</code> <code>down</code></td><td><em>string</em></td><td>-</td></tr><tr><td>use-label-slot</td><td>\u662F\u5426\u4F7F\u7528 label slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-style <code>v1.4.0</code></td><td>\u6807\u9898\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-event" tabindex="-1">Cell Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u5355\u5143\u683C\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-slot" tabindex="-1">Cell Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49<code>value</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>value</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>title</td><td>\u81EA\u5B9A\u4E49<code>title</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>label</td><td>\u81EA\u5B9A\u4E49<code>label</code>\u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6E <code>use-label-slot</code>\u5C5E\u6027</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49<code>icon</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>icon</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662F<code>arrow</code>\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>is-link</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-wai-bu-yang-shi-lei" tabindex="-1">Cell \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class</td><td>\u6807\u9898\u6837\u5F0F\u7C7B</td></tr><tr><td>label-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr><tr><td>value-class</td><td>\u53F3\u4FA7\u5185\u5BB9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,20),rs=[os],is={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",cs,rs))}},hs={class:"van-doc-markdown-body"},us=d(`<h1>Checkbox \u590D\u9009\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u591A\u9009\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-checkbox&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/checkbox/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-checkbox-group&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/checkbox-group/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u7ED1\u5B9A\u590D\u9009\u6846\u7684\u52FE\u9009\u72B6\u6001\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>\u590D\u9009\u6846<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">checked</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>disabled</code>\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
\u590D\u9009\u6846
<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xing-zhuang" tabindex="-1">\u81EA\u5B9A\u4E49\u5F62\u72B6</h3><p>\u5C06<code>shape</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>square</code>\uFF0C\u590D\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
\u590D\u9009\u6846
<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>checked-color</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span>
<span class="hljs-attr">checked-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
&gt;</span>
\u590D\u9009\u6846
<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><p>\u901A\u8FC7<code>icon-size</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">&quot;25px&quot;</span>&gt;</span>\u590D\u9009\u6846<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u901A\u8FC7 icon \u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">use-icon-slot</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
\u81EA\u5B9A\u4E49\u56FE\u6807
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ checked ? activeIcon : inactiveIcon }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-active.png&#39;</span>,
<span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-normal.png&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">checked</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-wen-ben-dian-ji" tabindex="-1">\u7981\u7528\u6587\u672C\u70B9\u51FB</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>label-disabled</code>\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u590D\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">label-disabled</span>&gt;</span>\u590D\u9009\u6846<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="fu-xuan-kuang-zu" tabindex="-1">\u590D\u9009\u6846\u7EC4</h3><p>\u9700\u8981\u4E0E<code>van-checkbox-group</code>\u4E00\u8D77\u4F7F\u7528\uFF0C\u9009\u4E2D\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\uFF0C\u901A\u8FC7<code>value</code>\u7ED1\u5B9A\u5728<code>van-checkbox-group</code>\u4E0A\uFF0C\u6570\u7EC4\u4E2D\u7684\u9879\u5373\u4E3A\u9009\u4E2D\u7684<code>Checkbox</code>\u7684<code>name</code>\u5C5E\u6027\u8BBE\u7F6E\u7684\u503C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ result }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>\u590D\u9009\u6846 a<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>\u590D\u9009\u6846 b<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span>&gt;</span>\u590D\u9009\u6846 c<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">result</span>: [<span class="hljs-string">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</span>],
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">result</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-zui-da-ke-xuan-shu" tabindex="-1">\u9650\u5236\u6700\u5927\u53EF\u9009\u6570</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ result }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;{{ 2 }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>\u590D\u9009\u6846 a<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>\u590D\u9009\u6846 b<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span>&gt;</span>\u590D\u9009\u6846 c<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="da-pei-dan-yuan-ge-zu-jian-shi-yong" tabindex="-1">\u642D\u914D\u5355\u5143\u683C\u7EC4\u4EF6\u4F7F\u7528</h3><p>\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165<code>Cell</code>\u548C<code>CellGroup</code>\u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 checkbox \u7684 toggle \u65B9\u6CD5\u624B\u52A8\u89E6\u53D1\u5207\u6362\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ result }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span>
<span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ list }}&quot;</span>
<span class="hljs-attr">wx:key</span>=<span class="hljs-string">&quot;index&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u590D\u9009\u6846 {{ item }}&quot;</span>
<span class="hljs-attr">value-class</span>=<span class="hljs-string">&quot;value-class&quot;</span>
<span class="hljs-attr">clickable</span>
<span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;{{ index }}&quot;</span>
<span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;toggle&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span>
<span class="hljs-attr">catch:tap</span>=<span class="hljs-string">&quot;noop&quot;</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkboxes-{{ index }}&quot;</span>
<span class="hljs-attr">name</span>=<span class="hljs-string">&quot;{{ item }}&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">list</span>: [<span class="hljs-string">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</span>, <span class="hljs-string">&#39;c&#39;</span>],
<span class="hljs-attr">result</span>: [<span class="hljs-string">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</span>],
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">result</span>: event.<span class="hljs-property">detail</span>,
});
},
<span class="hljs-title function_">toggle</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { index } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;
<span class="hljs-keyword">const</span> checkbox = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">\`.checkboxes-<span class="hljs-subst">\${index}</span>\`</span>);
checkbox.<span class="hljs-title function_">toggle</span>();
},
<span class="hljs-title function_">noop</span>(<span class="hljs-params"></span>) {},
});
</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.value-class</span> {
<span class="hljs-attribute">flex</span>: none <span class="hljs-meta">!important</span>;
}
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="checkbox-props" tabindex="-1">Checkbox Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6 Checkbox \u540D\u79F0</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A <code>round</code> <code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>value</td><td>\u662F\u5426\u4E3A\u9009\u4E2D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u5355\u9009\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-disabled</td><td>\u662F\u5426\u7981\u7528\u5355\u9009\u6846\u5185\u5BB9\u70B9\u51FB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-position</td><td>\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code></td><td><em>string</em></td><td><code>right</code></td></tr><tr><td>use-icon-slot</td><td>\u662F\u5426\u4F7F\u7528 icon slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>checked-color</td><td>\u9009\u4E2D\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>icon-size</td><td>icon \u5927\u5C0F</td><td><em>string | number</em></td><td><code>20px</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkboxgroup-props" tabindex="-1">CheckboxGroup Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u6240\u6709\u9009\u4E2D\u9879\u7684 name</td><td><em>Array</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>max</td><td>\u8BBE\u7F6E\u6700\u5927\u53EF\u9009\u6570</td><td><em>number</em></td><td><code>0</code>\uFF08\u65E0\u9650\u5236\uFF09</td></tr><tr><td>direction <code>v1.7.0</code></td><td>\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code></td><td><em>string</em></td><td><code>vertical</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-event" tabindex="-1">Checkbox Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u7EC4\u4EF6\u7684\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-wai-bu-yang-shi-lei" tabindex="-1">Checkbox \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>label-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkboxgroup-event" tabindex="-1">CheckboxGroup Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u7EC4\u4EF6\u7684\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-slot" tabindex="-1">Checkbox Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u6587\u672C</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-fang-fa" tabindex="-1">Checkbox \u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 checkbox \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>toggle</td><td>-</td><td>-</td><td>\u5207\u6362\u9009\u4E2D\u72B6\u6001</td></tr></tbody></table></div>`,22),gs=[us],js={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",hs,gs))}},ms={class:"van-doc-markdown-body"},bs=d(`<h1>Circle \u73AF\u5F62\u8FDB\u5EA6\u6761</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5706\u73AF\u5F62\u7684\u8FDB\u5EA6\u6761\u7EC4\u4EF6\uFF0C\u652F\u6301\u8FDB\u5EA6\u6E10\u53D8\u52A8\u753B\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-circle&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/circle/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>value</code>\u5C5E\u6027\u8868\u793A\u8FDB\u5EA6\u6761\u7684\u76EE\u6807\u8FDB\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 30 }}&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;text&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="kuan-du-ding-zhi" tabindex="-1">\u5BBD\u5EA6\u5B9A\u5236</h3><p>\u901A\u8FC7<code>stroke-width</code>\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u5BBD\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">&quot;6&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BBD\u5EA6\u5B9A\u5236&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yan-se-ding-zhi" tabindex="-1">\u989C\u8272\u5B9A\u5236</h3><p>\u901A\u8FC7<code>color</code>\u5C5E\u6027\u6765\u63A7\u5236\u8FDB\u5EA6\u6761\u989C\u8272\uFF0C<code>layer-color</code>\u5C5E\u6027\u6765\u63A7\u5236\u8F68\u9053\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">layer-color</span>=<span class="hljs-string">&quot;#eeeeee&quot;</span>
<span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u989C\u8272\u5B9A\u5236&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jian-bian-se" tabindex="-1">\u6E10\u53D8\u8272</h3><p><code>color</code>\u5C5E\u6027\u652F\u6301\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u6765\u5B9A\u4E49\u6E10\u53D8\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;{{ gradientColor }}&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6E10\u53D8\u8272&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-number">25</span>,
<span class="hljs-attr">gradientColor</span>: {
<span class="hljs-string">&#39;0%&#39;</span>: <span class="hljs-string">&#39;#ffd01e&#39;</span>,
<span class="hljs-string">&#39;100%&#39;</span>: <span class="hljs-string">&#39;#ee0a24&#39;</span>,
},
},
});
</code></pre></div><div class="van-doc-card"><h3 id="ni-shi-zhen-fang-xiang" tabindex="-1">\u9006\u65F6\u9488\u65B9\u5411</h3><p>\u5C06<code>clockwise</code>\u8BBE\u7F6E\u4E3A<code>false</code>\uFF0C\u8FDB\u5EA6\u4F1A\u4ECE\u9006\u65F6\u9488\u65B9\u5411\u5F00\u59CB\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>
<span class="hljs-attr">clockwise</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u9006\u65F6\u9488&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="da-xiao-ding-zhi" tabindex="-1">\u5927\u5C0F\u5B9A\u5236</h3><p>\u901A\u8FC7<code>size</code>\u5C5E\u6027\u8BBE\u7F6E\u5706\u73AF\u76F4\u5F84\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;120&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5927\u5C0F\u5B9A\u5236&quot;</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u76EE\u6807\u8FDB\u5EA6</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>type</td><td>\u6307\u5B9A canvas \u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>2d</code></td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5706\u73AF\u76F4\u5F84\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>color</td><td>\u8FDB\u5EA6\u6761\u989C\u8272\uFF0C\u4F20\u5165\u5BF9\u8C61\u683C\u5F0F\u53EF\u4EE5\u5B9A\u4E49\u6E10\u53D8\u8272</td><td><em>string | object</em></td><td><code>#1989fa</code></td></tr><tr><td>layer-color</td><td>\u8F68\u9053\u989C\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>fill</td><td>\u586B\u5145\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>speed</td><td>\u52A8\u753B\u901F\u5EA6\uFF08\u5355\u4F4D\u4E3A value/s\uFF09</td><td><em>number</em></td><td><code>50</code></td></tr><tr><td>text</td><td>\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>stroke-width</td><td>\u8FDB\u5EA6\u6761\u5BBD\u5EA6</td><td><em>number</em></td><td><code>4</code></td></tr><tr><td>clockwise</td><td>\u662F\u5426\u987A\u65F6\u9488\u589E\u52A0</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u6587\u5B57\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>fill</code>\uFF0C\u63D2\u69FD\u5185\u5BB9\u4F1A\u88AB\u539F\u751F\u7EC4\u4EF6\u8986\u76D6</td></tr></tbody></table></div>`,13),vs=[bs],qs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ms,vs))}},fs={class:"van-doc-markdown-body"},ys=d(`<h1>Layout \u5E03\u5C40</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Layout \u63D0\u4F9B\u4E86<code>van-row</code>\u548C<code>van-col</code>\u4E24\u4E2A\u7EC4\u4EF6\u6765\u8FDB\u884C\u884C\u5217\u5E03\u5C40\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-row&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/row/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-col&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/col/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><p>Layout \u7EC4\u4EF6\u63D0\u4F9B\u4E86<code>24\u5217\u6805\u683C</code>\uFF0C\u901A\u8FC7\u5728<code>Col</code>\u4E0A\u6DFB\u52A0<code>span</code>\u5C5E\u6027\u8BBE\u7F6E\u5217\u6240\u5360\u7684\u5BBD\u5EA6\u767E\u5206\u6BD4\u3002\u6B64\u5916\uFF0C\u6DFB\u52A0<code>offset</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u7684\u504F\u79FB\u5BBD\u5EA6\uFF0C\u8BA1\u7B97\u65B9\u5F0F\u4E0E span \u76F8\u540C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;4&quot;</span>&gt;</span>span: 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">&quot;4&quot;</span>&gt;</span>offset: 4, span: 10<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">offset</span>=<span class="hljs-string">&quot;12&quot;</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;12&quot;</span>&gt;</span>offset: 12, span: 12<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="she-zhi-lie-yuan-su-jian-ju" tabindex="-1">\u8BBE\u7F6E\u5217\u5143\u7D20\u95F4\u8DDD</h3><p>\u901A\u8FC7<code>gutter</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u95F4\u8DDD\u4E3A 0\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-row</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">&quot;20&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-col</span> <span class="hljs-attr">span</span>=<span class="hljs-string">&quot;8&quot;</span>&gt;</span>span: 8<span class="hljs-tag">&lt;/<span class="hljs-name">van-col</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="row-props" tabindex="-1">Row Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>gutter</td><td>\u5217\u5143\u7D20\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF08\u5355\u4F4D\u4E3A px\uFF09</td><td><em>string | number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="col-props" tabindex="-1">Col Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>span</td><td>\u5217\u5143\u7D20\u5BBD\u5EA6</td><td><em>string | number</em></td><td>-</td></tr><tr><td>offset</td><td>\u5217\u5143\u7D20\u504F\u79FB\u8DDD\u79BB</td><td><em>string | number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,10),_s=[ys],xs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",fs,_s))}},ws={class:"van-doc-markdown-body"},ks=d(`<h1>Collapse \u6298\u53E0\u9762\u677F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5C06\u4E00\u7EC4\u5185\u5BB9\u653E\u7F6E\u5728\u591A\u4E2A\u6298\u53E0\u9762\u677F\u4E2D\uFF0C\u70B9\u51FB\u9762\u677F\u7684\u6807\u9898\u53EF\u4EE5\u5C55\u5F00\u6216\u6536\u7F29\u5176\u5185\u5BB9\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-collapse&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/collapse/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-collapse-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/collapse-item/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u63A7\u5236\u5C55\u5F00\u7684\u9762\u677F\u5217\u8868\uFF0C<code>activeNames</code>\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-collapse</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeNames }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98981&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98982&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98983&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">activeNames</span>: [<span class="hljs-string">&#39;1&#39;</span>],
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="shou-feng-qin" tabindex="-1">\u624B\u98CE\u7434</h3><p>\u901A\u8FC7<code>accordion</code>\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u624B\u98CE\u7434\u6A21\u5F0F\uFF0C\u6700\u591A\u5C55\u5F00\u4E00\u4E2A\u9762\u677F\uFF0C\u6B64\u65F6<code>activeName</code>\u4E3A\u5B57\u7B26\u4E32\u683C\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-collapse</span> <span class="hljs-attr">accordion</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeName }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98981&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98982&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98983&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">activeName</span>: <span class="hljs-string">&#39;1&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">activeName</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="shi-jian-jian-ting" tabindex="-1">\u4E8B\u4EF6\u76D1\u542C</h3><p><code>van-collapse</code> \u63D0\u4F9B\u4E86 <code>change</code>, <code>open</code> \u548C <code>close</code> \u4E8B\u4EF6\u3002<code>change</code> \u4E8B\u4EF6\u5728\u9762\u677F\u5207\u6362\u65F6\u89E6\u53D1\uFF0C<code>open</code> \u4E8B\u4EF6\u5728\u9762\u677F\u5C55\u5F00\u65F6\u89E6\u53D1\uFF0C<code>close</code> \u4E8B\u4EF6\u5728\u9762\u677F\u5173\u95ED\u65F6\u89E6\u53D1\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-collapse</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeNames }}&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
<span class="hljs-attr">bind:open</span>=<span class="hljs-string">&quot;onOpen&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98981&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98982&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98983&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">activeNames</span>: [<span class="hljs-string">&#39;1&#39;</span>],
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,
});
},
<span class="hljs-title function_">onOpen</span>(<span class="hljs-params">event</span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">\`\u5C55\u5F00: <span class="hljs-subst">\${event.detail}</span>\`</span>);
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">\`\u5173\u95ED: <span class="hljs-subst">\${event.detail}</span>\`</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-biao-ti-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-collapse</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeNames }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;title&quot;</span>&gt;</span>\u6807\u98981<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;question-o&quot;</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u98982&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span>&gt;</span>
\u4EE3\u7801\u662F\u5199\u51FA\u6765\u7ED9\u4EBA\u770B\u7684\uFF0C\u9644\u5E26\u80FD\u5728\u673A\u5668\u4E0A\u8FD0\u884C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">activeNames</span>: [<span class="hljs-string">&#39;1&#39;</span>],
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="collapse-props" tabindex="-1">Collapse Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u5C55\u5F00\u9762\u677F\u7684 name</td><td>\u975E\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A<em>(string | number)[]</em><br>\u624B\u98CE\u7434\u6A21\u5F0F\uFF1A<em>string | number</em></td><td>-</td></tr><tr><td>accordion</td><td>\u662F\u5426\u5F00\u542F\u624B\u98CE\u7434\u6A21\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5916\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapse-event" tabindex="-1">Collapse Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u5207\u6362\u9762\u677F\u65F6\u89E6\u53D1</td><td>activeNames: <em>string | Array</em></td></tr><tr><td>open</td><td>\u5C55\u5F00\u9762\u677F\u65F6\u89E6\u53D1</td><td>currentName: <em>string | number</em></td></tr><tr><td>close</td><td>\u5173\u95ED\u9762\u677F\u65F6\u89E6\u53D1</td><td>currentName: <em>string | number</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapseitem-props" tabindex="-1">CollapseItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u552F\u4E00\u6807\u8BC6\u7B26\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u503C</td><td><em>string | number</em></td><td><code>index</code></td></tr><tr><td>title</td><td>\u6807\u9898\u680F\u5DE6\u4FA7\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>size</td><td>\u6807\u9898\u680F\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A<code>large</code></td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>\u6807\u9898\u680F\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u6807\u9898\u680F\u53F3\u4FA7\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>label</td><td>\u6807\u9898\u680F\u63CF\u8FF0\u4FE1\u606F</td><td><em>string</em></td><td>-</td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>is-link</td><td>\u662F\u5426\u5C55\u793A\u6807\u9898\u680F\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u9762\u677F</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapseitem-slot" tabindex="-1">CollapseItem Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u9762\u677F\u5185\u5BB9</td></tr><tr><td>value</td><td>\u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49<code>icon</code></td></tr><tr><td>title</td><td>\u81EA\u5B9A\u4E49<code>title</code></td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6309\u94AE\uFF0C\u9ED8\u8BA4\u662F<code>arrow</code>, \u9700\u8981\u5C06 <code>is-link</code> \u8BBE\u7F6E\u4E3A <code>false</code>, \u624D\u4F1A\u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapse-wai-bu-yang-shi-lei" tabindex="-1">Collapse \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapseitem-wai-bu-yang-shi-lei" tabindex="-1">CollapseItem \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>content-class</td><td>\u5185\u5BB9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,15),zs=[ks],Cs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ws,zs))}},Ps={class:"van-doc-markdown-body"},Ss=d(`<h1>\u5185\u7F6E\u6837\u5F0F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Vant \u4E2D\u9ED8\u8BA4\u5305\u542B\u4E86\u4E00\u4E9B\u5E38\u7528\u6837\u5F0F\uFF0C\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7 className \u7684\u65B9\u5F0F\u4F7F\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728 app.wxss \u4E2D\u5F15\u5165\u5185\u7F6E\u6837\u5F0F\u3002</p><pre><code class="language-css"><span class="hljs-keyword">@import</span> <span class="hljs-string">&#39;@vant/weapp/common/index.wxss&#39;</span>;
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="wen-zi-sheng-lue" tabindex="-1">\u6587\u5B57\u7701\u7565</h3><p>\u5F53\u6587\u672C\u5185\u5BB9\u957F\u5EA6\u8D85\u8FC7\u5BB9\u5668\u6700\u5927\u5BBD\u5EA6\u65F6\uFF0C\u81EA\u52A8\u7701\u7565\u591A\u4F59\u7684\u6587\u672C\u3002</p><pre><code class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-ellipsis&quot;</span>&gt;</span>
\u8FD9\u662F\u4E00\u6BB5\u5BBD\u5EA6\u9650\u5236 250px \u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-comment">&lt;!-- \u6700\u591A\u663E\u793A\u4E24\u884C --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-multi-ellipsis--l2&quot;</span>&gt;</span>
\u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E24\u884C\u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-comment">&lt;!-- \u6700\u591A\u663E\u793A\u4E09\u884C --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-multi-ellipsis--l3&quot;</span>&gt;</span>
\u8FD9\u662F\u4E00\u6BB5\u6700\u591A\u663E\u793A\u4E09\u884C\u7684\u6587\u5B57\uFF0C\u540E\u9762\u7684\u5185\u5BB9\u4F1A\u7701\u7565\u3002
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="1px-bian-kuang" tabindex="-1">1px \u8FB9\u6846</h3><p>\u4E3A\u5143\u7D20\u6DFB\u52A0 Retina \u5C4F\u5E55\u4E0B\u7684 1px \u8FB9\u6846\uFF08\u5373 hairline\uFF09\uFF0C\u57FA\u4E8E\u4F2A\u7C7B transform \u5B9E\u73B0\u3002</p><pre><code class="language-xml"><span class="hljs-comment">&lt;!-- \u4E0A\u8FB9\u6846 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--top&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-comment">&lt;!-- \u4E0B\u8FB9\u6846 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--bottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-comment">&lt;!-- \u5DE6\u8FB9\u6846 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-comment">&lt;!-- \u53F3\u8FB9\u6846 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-comment">&lt;!-- \u4E0A\u4E0B\u8FB9\u6846 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--top-bottom&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-comment">&lt;!-- \u5168\u8FB9\u6846 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-hairline--surround&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="quan-ju-zi-ti" tabindex="-1">\u5168\u5C40\u5B57\u4F53</h3><p>\u63A8\u8350\u5728 app.wxss \u4E2D\u8BBE\u7F6E\u4EE5\u4E0B\u5168\u5C40\u5B57\u4F53\uFF0C\u4EE5\u4FDD\u8BC1\u5728\u4E0D\u540C\u8BBE\u5907\u4E0A\u63D0\u4F9B\u6700\u4F73\u7684\u89C6\u89C9\u4F53\u9A8C\u3002</p><pre><code class="language-css">page {
<span class="hljs-attribute">font-family</span>: -apple-system, BlinkMacSystemFont, <span class="hljs-string">&#39;Helvetica Neue&#39;</span>, Helvetica,
Segoe UI, Arial, Roboto, <span class="hljs-string">&#39;PingFang SC&#39;</span>, <span class="hljs-string">&#39;miui&#39;</span>, <span class="hljs-string">&#39;Hiragino Sans GB&#39;</span>, <span class="hljs-string">&#39;Microsoft Yahei&#39;</span>,
sans-serif;
}
</code></pre></div>`,7),Ds=[Ss],Is={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ps,Ds))}},Ts={class:"van-doc-markdown-body"},$s=d(`<h1>ConfigProvider \u5168\u5C40\u914D\u7F6E</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u914D\u7F6E Vant Weapp \u7EC4\u4EF6\u7684\u4E3B\u9898\u6837\u5F0F\uFF0C\u4ECE <code>v1.7.0</code> \u7248\u672C\u5F00\u59CB\u652F\u6301\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-config-provider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/config-provider/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="ding-zhi-zhu-ti" tabindex="-1">\u5B9A\u5236\u4E3B\u9898</h2><div class="van-doc-card"><h3 id="jie-shao-1" tabindex="-1">\u4ECB\u7ECD</h3><p>Vant Weapp \u7EC4\u4EF6\u901A\u8FC7\u4E30\u5BCC\u7684 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties" target="_blank">CSS \u53D8\u91CF</a> \u6765\u7EC4\u7EC7\u6837\u5F0F\uFF0C\u901A\u8FC7\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0C\u53EF\u4EE5\u5B9E\u73B0<strong>\u5B9A\u5236\u4E3B\u9898\u3001\u52A8\u6001\u5207\u6362\u4E3B\u9898</strong>\u7B49\u6548\u679C\u3002</p><h4 id="shi-li" tabindex="-1">\u793A\u4F8B</h4><p>\u4EE5 Button \u7EC4\u4EF6\u4E3A\u4F8B\uFF0C\u67E5\u770B\u7EC4\u4EF6\u7684\u6837\u5F0F\uFF0C\u53EF\u4EE5\u770B\u5230 <code>.van-button--primary</code> \u7C7B\u540D\u4E0A\u5B58\u5728\u4EE5\u4E0B\u53D8\u91CF\uFF1A</p><pre><code class="language-css"><span class="hljs-selector-class">.van-button--primary</span> {
<span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--button-primary-color, <span class="hljs-number">#fff</span>);
<span class="hljs-attribute">background</span>: <span class="hljs-built_in">var</span>(--button-primary-background-color, <span class="hljs-number">#07c160</span>);
<span class="hljs-attribute">border</span>: <span class="hljs-built_in">var</span>(--button-border-width, <span class="hljs-number">1px</span>) solid <span class="hljs-built_in">var</span>(
--button-primary-border-color,
<span class="hljs-number">#07c160</span>
);
}
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-css-bian-liang" tabindex="-1">\u81EA\u5B9A\u4E49 CSS \u53D8\u91CF</h3><h4 id="tong-guo-css-fu-gai" tabindex="-1">\u901A\u8FC7 CSS \u8986\u76D6</h4><p>\u4F60\u53EF\u4EE5\u76F4\u63A5\u5728\u4EE3\u7801\u4E2D\u8986\u76D6\u8FD9\u4E9B CSS \u53D8\u91CF\uFF0CButton \u7EC4\u4EF6\u7684\u6837\u5F0F\u4F1A\u968F\u4E4B\u53D1\u751F\u6539\u53D8\uFF1A</p><pre><code class="language-css"><span class="hljs-comment">/* \u6DFB\u52A0\u8FD9\u6BB5\u6837\u5F0F\u540E\uFF0CPrimary Button \u4F1A\u53D8\u6210\u7EA2\u8272 */</span>
page {
<span class="hljs-attr">--button-primary-background-color</span>: red;
}
</code></pre><h4 id="tong-guo-configprovider-fu-gai" tabindex="-1">\u901A\u8FC7 ConfigProvider \u8986\u76D6</h4><p><code>ConfigProvider</code> \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u8986\u76D6 CSS \u53D8\u91CF\u7684\u80FD\u529B\uFF0C\u4F60\u9700\u8981\u5728\u6839\u8282\u70B9\u5305\u88F9\u4E00\u4E2A <code>ConfigProvider</code> \u7EC4\u4EF6\uFF0C\u5E76\u901A\u8FC7 <code>theme-vars</code> \u5C5E\u6027\u6765\u914D\u7F6E\u4E00\u4E9B\u4E3B\u9898\u53D8\u91CF\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-config-provider</span> <span class="hljs-attr">theme-vars</span>=<span class="hljs-string">&quot;{{ themeVars }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u8BC4\u5206&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;input&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>
<span class="hljs-attr">model:value</span>=<span class="hljs-string">&quot;{{ rate }}&quot;</span>
<span class="hljs-attr">data-key</span>=<span class="hljs-string">&quot;rate&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u6ED1\u5757&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;input&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ slider }}&quot;</span>
<span class="hljs-attr">data-key</span>=<span class="hljs-string">&quot;slider&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin: 16px&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">block</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u63D0\u4EA4<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-config-provider</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Page</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;../../common/page&#39;</span>;
<span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">rate</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">slider</span>: <span class="hljs-number">50</span>,
<span class="hljs-attr">themeVars</span>: {
<span class="hljs-attr">rateIconFullColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,
<span class="hljs-attr">sliderBarHeight</span>: <span class="hljs-string">&#39;4px&#39;</span>,
<span class="hljs-attr">sliderButtonWidth</span>: <span class="hljs-string">&#39;20px&#39;</span>,
<span class="hljs-attr">sliderButtonHeight</span>: <span class="hljs-string">&#39;20px&#39;</span>,
<span class="hljs-attr">sliderActiveBackgroundColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,
<span class="hljs-attr">buttonPrimaryBorderColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,
<span class="hljs-attr">buttonPrimaryBackgroundColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,
},
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { key } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
[key]: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>theme-vars</td><td>\u81EA\u5B9A\u4E49\u4E3B\u9898\u53D8\u91CF</td><td><em>object</em></td><td>-</td></tr></tbody></table></div>`,8),As=[$s],Es={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ts,As))}},Fs={class:"van-doc-markdown-body"},Bs=d(`<h1>CountDown \u5012\u8BA1\u65F6</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5B9E\u65F6\u5C55\u793A\u5012\u8BA1\u65F6\u6570\u503C\uFF0C\u652F\u6301\u6BEB\u79D2\u7CBE\u5EA6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-count-down&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/count-down/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><p><code>time</code>\u5C5E\u6027\u8868\u793A\u5012\u8BA1\u65F6\u603B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-count-down</span> <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ time }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">time</span>: <span class="hljs-number">30</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span>,
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ge-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u683C\u5F0F</h3><p>\u901A\u8FC7<code>format</code>\u5C5E\u6027\u8BBE\u7F6E\u5012\u8BA1\u65F6\u6587\u672C\u7684\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-count-down</span> <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ time }}&quot;</span> <span class="hljs-attr">format</span>=<span class="hljs-string">&quot;DD \u5929 HH \u65F6 mm \u5206 ss \u79D2&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="hao-miao-ji-xuan-ran" tabindex="-1">\u6BEB\u79D2\u7EA7\u6E32\u67D3</h3><p>\u5012\u8BA1\u65F6\u9ED8\u8BA4\u6BCF\u79D2\u6E32\u67D3\u4E00\u6B21\uFF0C\u8BBE\u7F6E<code>millisecond</code>\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-count-down</span> <span class="hljs-attr">millisecond</span> <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ time }}&quot;</span> <span class="hljs-attr">format</span>=<span class="hljs-string">&quot;HH:mm:ss:SSS&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><p>\u8BBE\u7F6E<code>use-slot</code>\u5C5E\u6027\u540E\u53EF\u4EE5\u81EA\u5B9A\u4E49\u5012\u8BA1\u65F6\u6837\u5F0F\uFF0C\u9700\u8981\u901A\u8FC7<code>bind:change</code>\u4E8B\u4EF6\u83B7\u53D6<code>timeData</code>\u5BF9\u8C61\u5E76\u81EA\u884C\u6E32\u67D3\uFF0C\u683C\u5F0F\u89C1\u4E0B\u65B9\u8868\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-count-down</span> <span class="hljs-attr">use-slot</span> <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ time }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ timeData.hours }}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ timeData.minutes }}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span>{{ timeData.seconds }}<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-count-down</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">time</span>: <span class="hljs-number">30</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span> * <span class="hljs-number">1000</span>,
<span class="hljs-attr">timeData</span>: {},
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">timeData</span>: e.<span class="hljs-property">detail</span>,
});
},
});
</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.item</span> {
<span class="hljs-attribute">display</span>: inline-block;
<span class="hljs-attribute">width</span>: <span class="hljs-number">22px</span>;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">5px</span>;
<span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
<span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
<span class="hljs-attribute">text-align</span>: center;
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1989fa</span>;
<span class="hljs-attribute">border-radius</span>: <span class="hljs-number">2px</span>;
}
</code></pre></div><div class="van-doc-card"><h3 id="shou-dong-kong-zhi" tabindex="-1">\u624B\u52A8\u63A7\u5236</h3><p>\u901A\u8FC7 <code>selectComponent</code> \u9009\u62E9\u5668\u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u53EF\u4EE5\u8C03\u7528<code>start</code>\u3001<code>pause</code>\u3001<code>reset</code>\u65B9\u6CD5\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-count-down</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-count-down&quot;</span>
<span class="hljs-attr">millisecond</span>
<span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ 3000 }}&quot;</span>
<span class="hljs-attr">auto-start</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">format</span>=<span class="hljs-string">&quot;ss:SSS&quot;</span>
<span class="hljs-attr">bind:finish</span>=<span class="hljs-string">&quot;finished&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5F00\u59CB&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;play-circle-o&quot;</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">&quot;start&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6682\u505C&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;pause-circle-o&quot;</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">&quot;pause&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u91CD\u7F6E&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;replay&quot;</span> <span class="hljs-attr">bindclick</span>=<span class="hljs-string">&quot;reset&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">start</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> countDown = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">&#39;.control-count-down&#39;</span>);
countDown.<span class="hljs-title function_">start</span>();
},
<span class="hljs-title function_">pause</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> countDown = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">&#39;.control-count-down&#39;</span>);
countDown.<span class="hljs-title function_">pause</span>();
},
<span class="hljs-title function_">reset</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> countDown = <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">&#39;.control-count-down&#39;</span>);
countDown.<span class="hljs-title function_">reset</span>();
},
<span class="hljs-title function_">finished</span>(<span class="hljs-params"></span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u5012\u8BA1\u65F6\u7ED3\u675F&#39;</span>);
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>time</td><td>\u5012\u8BA1\u65F6\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2</td><td><em>number</em></td><td>-</td></tr><tr><td>format</td><td>\u65F6\u95F4\u683C\u5F0F\uFF0CDD-\u65E5\uFF0CHH-\u65F6\uFF0Cmm-\u5206\uFF0Css-\u79D2\uFF0CSSS-\u6BEB\u79D2</td><td><em>string</em></td><td><code>HH:mm:ss</code></td></tr><tr><td>auto-start</td><td>\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>millisecond</td><td>\u662F\u5426\u5F00\u542F\u6BEB\u79D2\u7EA7\u6E32\u67D3</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6837\u5F0F\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:finish</td><td>\u5012\u8BA1\u65F6\u7ED3\u675F\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:change</td><td>\u65F6\u95F4\u53D8\u5316\u65F6\u89E6\u53D1\uFF0C\u4EC5\u5728\u5F00\u542F<code>use-slot</code>\u540E\u624D\u4F1A\u89E6\u53D1</td><td>timeData</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="timedata-ge-shi" tabindex="-1">timeData \u683C\u5F0F</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>days</td><td>\u5269\u4F59\u5929\u6570</td><td><em>number</em></td></tr><tr><td>hours</td><td>\u5269\u4F59\u5C0F\u65F6</td><td><em>number</em></td></tr><tr><td>minutes</td><td>\u5269\u4F59\u5206\u949F</td><td><em>number</em></td></tr><tr><td>seconds</td><td>\u5269\u4F59\u79D2\u6570</td><td><em>number</em></td></tr><tr><td>milliseconds</td><td>\u5269\u4F59\u6BEB\u79D2</td><td><em>number</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 CountDown \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>start</td><td>-</td><td>-</td><td>\u5F00\u59CB\u5012\u8BA1\u65F6</td></tr><tr><td>pause</td><td>-</td><td>-</td><td>\u6682\u505C\u5012\u8BA1\u65F6</td></tr><tr><td>reset</td><td>-</td><td>-</td><td>\u91CD\u8BBE\u5012\u8BA1\u65F6\uFF0C\u82E5<code>auto-start</code>\u4E3A<code>true</code>\uFF0C\u91CD\u8BBE\u540E\u4F1A\u81EA\u52A8\u5F00\u59CB\u5012\u8BA1\u65F6</td></tr></tbody></table></div>`,14),Rs=[Bs],Ns={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Fs,Rs))}},Ms={class:"van-doc-markdown-body"},Ls=d(`<h1>DatetimePicker \u65F6\u95F4\u9009\u62E9</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u9009\u62E9\u65F6\u95F4\uFF0C\u652F\u6301\u65E5\u671F\u3001\u65F6\u5206\u7B49\u65F6\u95F4\u7EF4\u5EA6\uFF0C\u901A\u5E38\u4E0E <a href="#/popup" target="_blank">\u5F39\u51FA\u5C42</a> \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-datetime-picker&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/datetime-picker/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="xuan-ze-wan-zheng-shi-jian" tabindex="-1">\u9009\u62E9\u5B8C\u6574\u65F6\u95F4</h3><p><code>value</code> \u4E3A\u65F6\u95F4\u6233\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>
<span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>
<span class="hljs-attr">max-date</span>=<span class="hljs-string">&quot;{{ maxDate }}&quot;</span>
<span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">minHour</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">maxHour</span>: <span class="hljs-number">20</span>,
<span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),
<span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2019</span>, <span class="hljs-number">10</span>, <span class="hljs-number">1</span>).<span class="hljs-title function_">getTime</span>(),
<span class="hljs-attr">currentDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),
},
<span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-nian-yue-ri" tabindex="-1">\u9009\u62E9\u65E5\u671F\uFF08\u5E74\u6708\u65E5\uFF09</h3><p><code>value</code> \u4E3A\u65F6\u95F4\u6233\uFF0C\u901A\u8FC7\u4F20\u5165 <code>formatter</code> \u51FD\u6570\u5BF9\u9009\u9879\u6587\u5B57\u8FDB\u884C\u5904\u7406\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;date&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>
<span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>
<span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>
<span class="hljs-attr">formatter</span>=<span class="hljs-string">&quot;{{ formatter }}&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">currentDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),
<span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),
<span class="hljs-title function_">formatter</span>(<span class="hljs-params">type, value</span>) {
<span class="hljs-keyword">if</span> (type === <span class="hljs-string">&#39;year&#39;</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">\`<span class="hljs-subst">\${value}</span>\u5E74\`</span>;
}
<span class="hljs-keyword">if</span> (type === <span class="hljs-string">&#39;month&#39;</span>) {
<span class="hljs-keyword">return</span> <span class="hljs-string">\`<span class="hljs-subst">\${value}</span>\u6708\`</span>;
}
<span class="hljs-keyword">return</span> value;
},
},
<span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-nian-yue" tabindex="-1">\u9009\u62E9\u65E5\u671F\uFF08\u5E74\u6708\uFF09</h3><p><code>value</code> \u4E3A\u65F6\u95F4\u6233\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;year-month&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>
<span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>
<span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">currentDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),
<span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>().<span class="hljs-title function_">getTime</span>(),
},
<span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-shi-jian" tabindex="-1">\u9009\u62E9\u65F6\u95F4</h3><p><code>value</code> \u4E3A\u5B57\u7B26\u4E32\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>
<span class="hljs-attr">min-hour</span>=<span class="hljs-string">&quot;{{ minHour }}&quot;</span>
<span class="hljs-attr">max-hour</span>=<span class="hljs-string">&quot;{{ maxHour }}&quot;</span>
<span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">currentDate</span>: <span class="hljs-string">&#39;12:00&#39;</span>,
<span class="hljs-attr">minHour</span>: <span class="hljs-number">10</span>,
<span class="hljs-attr">maxHour</span>: <span class="hljs-number">20</span>,
},
<span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xuan-xiang-guo-lu-qi" tabindex="-1">\u9009\u9879\u8FC7\u6EE4\u5668</h3><p>\u901A\u8FC7\u4F20\u5165 <code>filter</code> \u51FD\u6570\uFF0C\u53EF\u4EE5\u5BF9\u9009\u9879\u6570\u7EC4\u8FDB\u884C\u8FC7\u6EE4\uFF0C\u5B9E\u73B0\u81EA\u5B9A\u4E49\u65F6\u95F4\u95F4\u9694\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>
<span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;{{ filter }}&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">currentDate</span>: <span class="hljs-string">&#39;12:00&#39;</span>,
<span class="hljs-title function_">filter</span>(<span class="hljs-params">type, options</span>) {
<span class="hljs-keyword">if</span> (type === <span class="hljs-string">&#39;minute&#39;</span>) {
<span class="hljs-keyword">return</span> options.<span class="hljs-title function_">filter</span>(<span class="hljs-function">(<span class="hljs-params">option</span>) =&gt;</span> option % <span class="hljs-number">5</span> === <span class="hljs-number">0</span>);
}
<span class="hljs-keyword">return</span> options;
},
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>type</td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>date</code> <code>time</code> <code>year-month</code> <br> <strong>\u4E0D\u5EFA\u8BAE\u52A8\u6001\u4FEE\u6539</strong></td><td><em>string</em></td><td><code>datetime</code></td></tr><tr><td>min-date</td><td>\u53EF\u9009\u7684\u6700\u5C0F\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949F</td><td><em>number</em></td><td>\u5341\u5E74\u524D</td></tr><tr><td>max-date</td><td>\u53EF\u9009\u7684\u6700\u5927\u65F6\u95F4\uFF0C\u7CBE\u786E\u5230\u5206\u949F</td><td><em>number</em></td><td>\u5341\u5E74\u540E</td></tr><tr><td>min-hour</td><td>\u53EF\u9009\u7684\u6700\u5C0F\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>max-hour</td><td>\u53EF\u9009\u7684\u6700\u5927\u5C0F\u65F6\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>23</code></td></tr><tr><td>min-minute</td><td>\u53EF\u9009\u7684\u6700\u5C0F\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>max-minute</td><td>\u53EF\u9009\u7684\u6700\u5927\u5206\u949F\uFF0C\u9488\u5BF9 time \u7C7B\u578B</td><td><em>number</em></td><td><code>59</code></td></tr><tr><td>filter</td><td>\u9009\u9879\u8FC7\u6EE4\u51FD\u6570(<code>type</code> \u53EF\u80FD\u503C\u4E3A <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>)</td><td><em>(type, values) =&gt; values</em></td><td>-</td></tr><tr><td>formatter</td><td>\u9009\u9879\u683C\u5F0F\u5316\u51FD\u6570(<code>type</code> \u53EF\u80FD\u503C\u4E3A <code>year</code>, <code>month</code>, <code>day</code>, <code>hour</code>, <code>minute</code>)</td><td><em>(type, value) =&gt; value</em></td><td>-</td></tr><tr><td>title</td><td>\u9876\u90E8\u680F\u6807\u9898</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>show-toolbar</td><td>\u662F\u5426\u663E\u793A\u9876\u90E8\u680F</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>item-height</td><td>\u9009\u9879\u9AD8\u5EA6</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>visible-item-count</td><td>\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570</td><td><em>number</em></td><td><code>6</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:input</td><td>\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D value</td></tr><tr><td>bind:change</td><td>\u5F53\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u7EC4\u4EF6\u5B9E\u4F8B</td></tr><tr><td>bind:confirm</td><td>\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D value</td></tr><tr><td>bind:cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="change-shi-jian" tabindex="-1">change \u4E8B\u4EF6</h3><p>\u5728<code>change</code>\u4E8B\u4EF6\u4E2D\uFF0C\u53EF\u4EE5\u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\uFF0C\u5BF9\u7EC4\u4EF6\u8FDB\u884C\u76F8\u5E94\u7684\u66F4\u65B0\u7B49\u64CD\u4F5C\uFF1A</p><table><thead><tr><th>\u51FD\u6570</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>getColumnValue(index)</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C</td></tr><tr><td>setColumnValue(index, value)</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u9009\u4E2D\u7684\u503C</td></tr><tr><td>getColumnValues(index)</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C</td></tr><tr><td>setColumnValues(index, values)</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u7684\u5907\u9009\u503C</td></tr><tr><td>getValues()</td><td>\u83B7\u53D6\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C\uFF0C\u8FD4\u56DE\u4E00\u4E2A\u6570\u7EC4</td></tr><tr><td>setValues(values)</td><td><code>values</code>\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u8BBE\u7F6E\u6240\u6709\u5217\u4E2D\u88AB\u9009\u4E2D\u7684\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>active-class</td><td>\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>toolbar-class</td><td>\u9876\u90E8\u680F\u6837\u5F0F\u7C7B</td></tr><tr><td>column-class</td><td>\u5217\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,14),Vs=[Ls],Us={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ms,Vs))}},Os={class:"van-doc-markdown-body"},Gs=d(`<h1>Dialog \u5F39\u51FA\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5F39\u51FA\u6A21\u6001\u6846\uFF0C\u5E38\u7528\u4E8E\u6D88\u606F\u63D0\u793A\u3001\u6D88\u606F\u786E\u8BA4\uFF0C\u6216\u5728\u5F53\u524D\u9875\u9762\u5185\u5B8C\u6210\u7279\u5B9A\u7684\u4EA4\u4E92\u64CD\u4F5C\uFF0C\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-dialog&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/dialog/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="xiao-xi-ti-shi" tabindex="-1">\u6D88\u606F\u63D0\u793A</h3><p>\u7528\u4E8E\u63D0\u793A\u4E00\u4E9B\u6D88\u606F\uFF0C\u53EA\u5305\u542B\u4E00\u4E2A\u786E\u8BA4\u6309\u94AE\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/dialog/dialog&#39;</span>;
<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u6807\u9898&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,
}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-comment">// on close</span>
});
<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,
}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-comment">// on close</span>
});
</code></pre></div><div class="van-doc-card"><h3 id="xiao-xi-que-ren" tabindex="-1">\u6D88\u606F\u786E\u8BA4</h3><p>\u7528\u4E8E\u786E\u8BA4\u6D88\u606F\uFF0C\u5305\u542B\u53D6\u6D88\u548C\u786E\u8BA4\u6309\u94AE\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/dialog/dialog&#39;</span>;
<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u6807\u9898&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,
})
.<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-comment">// on confirm</span>
})
.<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-comment">// on cancel</span>
});
</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-an-niu-feng-ge" tabindex="-1">\u5706\u89D2\u6309\u94AE\u98CE\u683C</h3><p>\u5C06 theme \u9009\u9879\u8BBE\u7F6E\u4E3A <code>round-button</code> \u53EF\u4EE5\u5C55\u793A\u5706\u89D2\u6309\u94AE\u98CE\u683C\u7684\u5F39\u7A97\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/dialog/dialog&#39;</span>;
<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u6807\u9898&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,
<span class="hljs-attr">theme</span>: <span class="hljs-string">&#39;round-button&#39;</span>,
}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-comment">// on close</span>
});
<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,
<span class="hljs-attr">theme</span>: <span class="hljs-string">&#39;round-button&#39;</span>,
}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-comment">// on close</span>
});
</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-guan-bi" tabindex="-1">\u5F02\u6B65\u5173\u95ED</h3><p>\u901A\u8FC7 <code>beforeClose</code> \u5C5E\u6027\u53EF\u4EE5\u4F20\u5165\u4E00\u4E2A\u56DE\u8C03\u51FD\u6570\uFF0C\u5728\u5F39\u7A97\u5173\u95ED\u524D\u8FDB\u884C\u7279\u5B9A\u64CD\u4F5C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Dialog</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/dialog/dialog&#39;</span>;
<span class="hljs-keyword">const</span> <span class="hljs-title function_">beforeClose</span> = (<span class="hljs-params">action</span>) =&gt;
<span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =&gt;</span> {
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-keyword">if</span> (action === <span class="hljs-string">&#39;confirm&#39;</span>) {
<span class="hljs-title function_">resolve</span>(<span class="hljs-literal">true</span>);
} <span class="hljs-keyword">else</span> {
<span class="hljs-comment">// \u62E6\u622A\u53D6\u6D88\u64CD\u4F5C</span>
<span class="hljs-title function_">resolve</span>(<span class="hljs-literal">false</span>);
}
}, <span class="hljs-number">1000</span>);
});
<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u6807\u9898&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5F39\u7A97\u5185\u5BB9&#39;</span>,
beforeClose,
});
</code></pre></div><div class="van-doc-card"><h3 id="zu-jian-diao-yong" tabindex="-1">\u7EC4\u4EF6\u8C03\u7528</h3><p>\u5982\u679C\u9700\u8981\u5728\u5F39\u7A97\u5185\u5D4C\u5165\u7EC4\u4EF6\u6216\u5176\u4ED6\u81EA\u5B9A\u4E49\u5185\u5BB9\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7EC4\u4EF6\u8C03\u7528\u7684\u65B9\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span>
<span class="hljs-attr">use-slot</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">show-cancel-button</span>
<span class="hljs-attr">confirm-button-open-type</span>=<span class="hljs-string">&quot;getUserInfo&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
<span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">&quot;getUserInfo&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/1.jpg&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dialog</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">true</span>,
},
<span class="hljs-title function_">getUserInfo</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><p>\u5982\u679C\u9700\u8981\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u5EFA\u8BAE\u4F7F\u7528 <code>custom-class</code> \u5B9E\u73B0\uFF0C\u4E0D\u5728\u63A8\u8350 <code>className</code> \u5C5E\u6027\uFF08\u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u4E2D\u4F7F\u7528\u5E76\u4E0D\u4F1A\u751F\u6548\uFF09\uFF0C\u4F7F\u7528\u65B9\u6CD5\u5982\u4E0B</p><h4 id="zu-jian-diao-yong-1" tabindex="-1">\u7EC4\u4EF6\u8C03\u7528</h4><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>
<span class="hljs-attr">message</span>=<span class="hljs-string">&quot;\u5F39\u7A97\u5185\u5BB9&quot;</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">custom-class</span>=<span class="hljs-string">&quot;my-custom-class&quot;</span>
/&gt;</span>
</code></pre><h4 id="api-diao-yong" tabindex="-1">API \u8C03\u7528</h4><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-dialog&quot;</span> <span class="hljs-attr">custom-class</span>=<span class="hljs-string">&quot;my-custom-class&quot;</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>Dialog</td><td><code>options</code></td><td><code>Promise</code></td><td>\u5C55\u793A\u5F39\u7A97</td></tr><tr><td>Dialog.alert</td><td><code>options</code></td><td><code>Promise</code></td><td>\u5C55\u793A\u6D88\u606F\u63D0\u793A\u5F39\u7A97</td></tr><tr><td>Dialog.confirm</td><td><code>options</code></td><td><code>Promise</code></td><td>\u5C55\u793A\u6D88\u606F\u786E\u8BA4\u5F39\u7A97</td></tr><tr><td>Dialog.setDefaultOptions</td><td><code>options</code></td><td><code>void</code></td><td>\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548</td></tr><tr><td>Dialog.resetDefaultOptions</td><td>-</td><td><code>void</code></td><td>\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Dialog \u751F\u6548</td></tr><tr><td>Dialog.close</td><td>-</td><td><code>void</code></td><td>\u5173\u95ED\u5F39\u7A97</td></tr><tr><td>Dialog.stopLoading</td><td>-</td><td><code>void</code></td><td>\u505C\u6B62\u6309\u94AE\u7684\u52A0\u8F7D\u72B6\u6001</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><p>\u901A\u8FC7\u51FD\u6570\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4F20\u5165\u4EE5\u4E0B\u9009\u9879\uFF1A</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>320px</code></td></tr><tr><td>message</td><td>\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7<code>\\n</code>\u6362\u884C</td><td><em>string</em></td><td>-</td></tr><tr><td>messageAlign</td><td>\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A<code>left</code> <code>right</code></td><td><em>string</em></td><td><code>center</code></td></tr><tr><td>theme</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A<code>round-button</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>zIndex</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>className</td><td>\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548\uFF0C\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 <code>custom-class</code> \u4EE3\u66FF\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664</td><td><em>string</em></td><td>&#39;&#39;</td></tr><tr><td>customStyle</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>&#39;&#39;</td></tr><tr><td>selector</td><td>\u81EA\u5B9A\u4E49\u9009\u62E9\u5668</td><td><em>string</em></td><td><code>van-dialog</code></td></tr><tr><td>showConfirmButton</td><td>\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>showCancelButton</td><td>\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>confirmButtonText</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancelButtonText</td><td>\u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>overlayStyle</td><td>\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F</td><td><em>object</em></td><td>-</td></tr><tr><td>closeOnClickOverlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>asyncClose</td><td>\u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 <code>beforeClose</code> \u5C5E\u6027\u4EE3\u66FF</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>beforeClose</td><td>\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE <code>false</code> \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise</td><td><em>(action) =&gt; boolean | Promise&lt;boolean&gt;</em></td><td>-</td></tr><tr><td>context</td><td>\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587</td><td><em>object</em></td><td>\u5F53\u524D\u9875\u9762</td></tr><tr><td>transition</td><td>\u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3A<code>fade</code> <code>none</code></td><td><em>string</em></td><td><code>scale</code></td></tr><tr><td>confirmButtonOpenType</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html" target="_blank">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="opentype-options" tabindex="-1">OpenType Options</h3><p>\u4F7F\u7528<code>confirmButtonOpenType</code>\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B\u9009\u9879\uFF1A</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>open-type</th></tr></thead><tbody><tr><td>appParameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td><td><code>launchApp</code></td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td><td><code>getUserInfo</code></td></tr><tr><td>sessionFrom</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>businessId</td><td>\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id</td><td><em>number</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>sendMessageTitle</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td><td><code>contact</code></td></tr><tr><td>sendMessagePath</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td><td><code>contact</code></td></tr><tr><td>sendMessageImg</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td><td><code>contact</code></td></tr><tr><td>showMessageCard</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td><td><code>contact</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><p>\u901A\u8FC7\u7EC4\u4EF6\u8C03\u7528 Dialog \u65F6\uFF0C\u652F\u6301\u4EE5\u4E0B Props:</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u5F39\u7A97</td><td><em>boolean</em></td><td>-</td></tr><tr><td>confirm-button-id <code>v1.10.25</code></td><td>\u786E\u8BA4\u6309\u94AE\u7684\u6807\u8BC6\u7B26\uFF0C\u4F5C\u4E3A\u5E95\u5C42\u539F\u751Fbutton\u7EC4\u4EF6\u7684id\u503C</td><td><em>string</em></td><td>-</td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>\u5F39\u7A97\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>320px</code></td></tr><tr><td>message</td><td>\u6587\u672C\u5185\u5BB9\uFF0C\u652F\u6301\u901A\u8FC7<code>\\n</code>\u6362\u884C</td><td><em>string</em></td><td>-</td></tr><tr><td>theme</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A<code>round-button</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>message-align</td><td>\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A<code>left</code> <code>right</code></td><td><em>string</em></td><td><code>center</code></td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>class-name</td><td>\u81EA\u5B9A\u4E49\u7C7B\u540D\uFF0Cdialog \u5728\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u5185\u65F6\u65E0\u6548\uFF0C\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 <code>custom-class</code> \u4EE3\u66FF\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664</td><td><em>string</em></td><td>&#39;&#39;</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>&#39;&#39;</td></tr><tr><td>show-confirm-button</td><td>\u662F\u5426\u5C55\u793A\u786E\u8BA4\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-cancel-button</td><td>\u662F\u5426\u5C55\u793A\u53D6\u6D88\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u7684\u6587\u6848</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>confirm-button-color</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>cancel-button-color</td><td>\u53D6\u6D88\u6309\u94AE\u7684\u5B57\u4F53\u989C\u8272</td><td><em>string</em></td><td><code>#333</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>overlay-style <code>v1.0.0</code></td><td>\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F</td><td><em>object</em></td><td>-</td></tr><tr><td>close-on-click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u662F\u5426\u5173\u95ED\u5F39\u7A97</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-title-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u6807\u9898\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-confirm-button-slot <code>1.10.23</code></td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-cancel-button-slot <code>1.10.23</code></td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>async-close</td><td>\u5DF2\u5E9F\u5F03\uFF0C\u5C06\u5728 2.0.0 \u79FB\u9664\uFF0C\u8BF7\u4F7F\u7528 <code>beforeClose</code> \u5C5E\u6027\u4EE3\u66FF</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>before-close</td><td>\u5173\u95ED\u524D\u7684\u56DE\u8C03\u51FD\u6570\uFF0C\u8FD4\u56DE <code>false</code> \u53EF\u963B\u6B62\u5173\u95ED\uFF0C\u652F\u6301\u8FD4\u56DE Promise</td><td><em>(action) =&gt; boolean | Promise&lt;boolean&gt;</em></td><td>-</td></tr><tr><td>transition</td><td>\u52A8\u753B\u540D\u79F0\uFF0C\u53EF\u9009\u503C\u4E3A<code>fade</code></td><td><em>string</em></td><td><code>scale</code></td></tr><tr><td>confirm-button-open-type</td><td>\u786E\u8BA4\u6309\u94AE\u7684\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html" target="_blank">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>root-portal <code>v1.11.3</code></td><td>\u662F\u5426\u4ECE\u9875\u9762\u5B50\u6811\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 &gt;= <code>2.25.2 </code></td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="opentype-props" tabindex="-1">OpenType Props</h3><p>\u4F7F\u7528<code>confirm-button-open-type</code>\u540E\uFF0C\u652F\u6301\u4EE5\u4E0B Props\uFF1A</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>open-type</th></tr></thead><tbody><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td><td><code>launchApp</code></td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td><td><code>getUserInfo</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>business-id</td><td>\u5BA2\u670D\u6D88\u606F\u5B50\u5546\u6237 id</td><td><em>number</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td><td><code>contact</code></td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td><td><code>contact</code></td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td><td><code>contact</code></td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td><td><code>contact</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:close</td><td>\u5F39\u7A97\u5173\u95ED\u65F6\u89E6\u53D1</td><td>event.detail: \u89E6\u53D1\u5173\u95ED\u4E8B\u4EF6\u7684\u6765\u6E90\uFF0C<br>\u679A\u4E3E\u4E3A<code>confirm</code>,<code>cancel</code>,<code>overlay</code></td></tr><tr><td>bind:confirm</td><td>\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u83B7\u53D6\u5230\u7684\u7528\u6237\u4FE1\u606F\uFF0C<br>\u4ECE\u8FD4\u56DE\u53C2\u6570\u7684 detail \u4E2D\u83B7\u53D6\u5230\u7684\u503C\u540C wx.getUserInfo</td><td>-</td></tr><tr><td>bind:contact</td><td>\u5BA2\u670D\u6D88\u606F\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>\u83B7\u53D6\u7528\u6237\u624B\u673A\u53F7\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:getrealtimephonenumber <code>v1.10.21</code></td><td>\u83B7\u53D6\u624B\u673A\u53F7\u5B9E\u65F6\u9A8C\u8BC1\u56DE\u8C03\uFF0Copen-type=getRealtimePhoneNumber \u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:agreeprivacyauthorization <code>v1.10.25</code></td><td>\u540C\u610F\u9690\u79C1\u534F\u8BAE\u56DE\u8C03\uFF0CopenType=&quot;agreePrivacyAuthorization&quot;\u65F6\u6709\u6548</td><td>-</td></tr><tr><td>bind:error</td><td>\u5F53\u4F7F\u7528\u5F00\u653E\u80FD\u529B\u65F6\uFF0C\u53D1\u751F\u9519\u8BEF\u7684\u56DE\u8C03</td><td>-</td></tr><tr><td>bind:opensetting</td><td>\u5728\u6253\u5F00\u6388\u6743\u8BBE\u7F6E\u9875\u540E\u56DE\u8C03</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49<code>title</code>\u663E\u793A\u5185\u5BB9\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>confirm-button <code>1.10.23</code></td><td>\u81EA\u5B9A\u4E49<code>confirm-button</code>\u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981 <code>use-confirm-button-slot</code> \u4E3A <code>true</code></td></tr><tr><td>cancel-button <code>1.10.23</code></td><td>\u81EA\u5B9A\u4E49<code>cancel-button</code>\u663E\u793A\u5185\u5BB9\uFF0C\u9700\u8981 <code>use-cancel-button-slot</code> \u4E3A <code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class <code>v1.10.8</code></td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>cancle-button-class <code>v1.10.21</code></td><td>\u53D6\u6D88\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr><tr><td>confirm-button-class <code>v1.10.21</code></td><td>\u786E\u8BA4\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,19),Ws=[Gs],Hs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Os,Ws))}},Ks={class:"van-doc-markdown-body"},Qs=d(`<h1>Divider \u5206\u5272\u7EBF</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C06\u5185\u5BB9\u5206\u9694\u4E3A\u591A\u4E2A\u533A\u57DF\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a></p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-divider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/divider/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-hairline" tabindex="-1">\u4F7F\u7528 hairline</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">hairline</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xu-xian" tabindex="-1">\u865A\u7EBF</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">dashed</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="wen-ben-wei-zhi" tabindex="-1">\u6587\u672C\u4F4D\u7F6E</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span>\u6587\u672C<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span>\u6587\u672C<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>\u6587\u672C<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shu-xing" tabindex="-1">\u81EA\u5B9A\u4E49\u5C5E\u6027</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">textColor</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>\u6587\u672C\u989C\u8272<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">borderColor</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>
border \u989C\u8272
<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">fontSize</span>=<span class="hljs-string">&quot;18&quot;</span>&gt;</span>\u5B57\u4F53\u5927\u5C0F<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span>
<span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span>
<span class="hljs-attr">customStyle</span>=<span class="hljs-string">&quot;color: #1989fa; border-color: #1989fa; font-size: 18px;&quot;</span>
&gt;</span>
\u6587\u672C
<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>dashed</td><td>\u865A\u7EBF</td><td><em>boolean</em></td><td>false</td></tr><tr><td>hairline</td><td>\u7EC6\u7EBF</td><td><em>boolean</em></td><td>false</td></tr><tr><td>content-position</td><td>\u6587\u672C\u4F4D\u7F6E\uFF0C<code>left</code> <code>center</code> <code>right</code></td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>\u9ED8\u8BA4</td><td>\u81EA\u5B9A\u4E49\u6587\u672C\u5185\u5BB9</td></tr></tbody></table></div>`,13),Js=[Qs],Xs={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ks,Js))}},Zs={class:"van-doc-markdown-body"},Ys=d(`<h1>DropdownMenu \u4E0B\u62C9\u83DC\u5355</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5411\u4E0B\u5F39\u51FA\u7684\u83DC\u5355\u5217\u8868\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-dropdown-menu&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/dropdown-menu/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-dropdown-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/dropdown-item/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">option1</span>: [
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5168\u90E8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u65B0\u6B3E\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6D3B\u52A8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">2</span> },
],
<span class="hljs-attr">option2</span>: [
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u9ED8\u8BA4\u6392\u5E8F&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;a&#39;</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u597D\u8BC4\u6392\u5E8F&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;b&#39;</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u9500\u91CF\u6392\u5E8F&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;c&#39;</span> },
],
<span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">value2</span>: <span class="hljs-string">&#39;a&#39;</span>,
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-cai-dan-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u83DC\u5355\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;item&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;{{ itemTitle }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;{{ switchTitle1 }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>
<span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span>
<span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 26px&quot;</span>
<span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ switch1 }}&quot;</span>
<span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onSwitch1Change&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;{{ switchTitle2 }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>
<span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span>
<span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 26px&quot;</span>
<span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ switch2 }}&quot;</span>
<span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onSwitch2Change&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;padding: 5px 16px;&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">block</span> <span class="hljs-attr">round</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>&gt;</span>
\u786E\u8BA4
<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">switchTitle1</span>: <span class="hljs-string">&#39;\u5305\u90AE&#39;</span>,
<span class="hljs-attr">switchTitle2</span>: <span class="hljs-string">&#39;\u56E2\u8D2D&#39;</span>,
<span class="hljs-attr">itemTitle</span>: <span class="hljs-string">&#39;\u7B5B\u9009&#39;</span>,
<span class="hljs-attr">option1</span>: [
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5168\u90E8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u65B0\u6B3E\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6D3B\u52A8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">2</span> },
],
<span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-title function_">onConfirm</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">&#39;#item&#39;</span>).<span class="hljs-title function_">toggle</span>();
},
<span class="hljs-title function_">onSwitch1Change</span>(<span class="hljs-params">{ detail }</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">switch1</span>: detail });
},
<span class="hljs-title function_">onSwitch2Change</span>(<span class="hljs-params">{ detail }</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">switch2</span>: detail });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xuan-zhong-zhuang-tai-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u9009\u4E2D\u72B6\u6001\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xiang-shang-zhan-kai" tabindex="-1">\u5411\u4E0A\u5C55\u5F00</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;up&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-cai-dan" tabindex="-1">\u7981\u7528\u83DC\u5355</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value2 }}&quot;</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option2 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-da-kai-guan-bi" tabindex="-1">\u5F02\u6B65\u6253\u5F00/\u5173\u95ED</h3><p>\u901A\u8FC7 <code>before-toggle</code> \u4E8B\u4EF6\u53EF\u4EE5\u5728\u4E0B\u62C9\u83DC\u5355\u6253\u5F00\u6216\u8005\u5173\u95ED\u524D\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\uFF0C\u5B9E\u73B0\u72B6\u6001\u53D8\u66F4\u524D\u6821\u9A8C\u3001\u5F02\u6B65\u6253\u5F00/\u5173\u95ED\u7684\u76EE\u7684</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-item</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value1 }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ option1 }}&quot;</span> <span class="hljs-attr">use-before-toggle</span> <span class="hljs-attr">bind:before-toggle</span>=<span class="hljs-string">&quot;onBeforeChange&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">option1</span>: [
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5168\u90E8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u65B0\u6B3E\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6D3B\u52A8\u5546\u54C1&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">2</span> },
],
},
<span class="hljs-title function_">onBeforeChange</span>(<span class="hljs-params">{ detail: { status, callback }}</span>) {
wx.<span class="hljs-title function_">showModal</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u5F02\u6B65\u6253\u5F00/\u5173\u95ED&#39;</span>,
<span class="hljs-attr">content</span>: <span class="hljs-string">\`\u786E\u5B9A\u8981<span class="hljs-subst">\${status ? <span class="hljs-string">&#39;\u6253\u5F00&#39;</span> : <span class="hljs-string">&#39;\u5173\u95ED&#39;</span>}</span>\u4E0B\u62C9\u83DC\u5355\u5417\uFF1F\`</span>,
<span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
<span class="hljs-keyword">if</span> (res.<span class="hljs-property">confirm</span>) {
<span class="hljs-title function_">callback</span>(<span class="hljs-literal">true</span>)
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (res.<span class="hljs-property">cancel</span>) {
<span class="hljs-title function_">callback</span>(<span class="hljs-literal">false</span>)
}
},
})
}
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="dropdownmenu-props" tabindex="-1">DropdownMenu Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>active-color</td><td>\u83DC\u5355\u6807\u9898\u548C\u9009\u9879\u7684\u9009\u4E2D\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>z-index</td><td>\u83DC\u5355\u680F z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>10</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2</td><td><em>number</em></td><td><code>200</code></td></tr><tr><td>direction</td><td>\u83DC\u5355\u5C55\u5F00\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A up</td><td><em>string</em></td><td><code>down</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-tab-bar <code>v1.10.14</code></td><td>\u662F\u5426\u7559\u51FA\u5E95\u90E8 tabbar \u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u83DC\u5355</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-outside</td><td>\u662F\u5426\u5728\u70B9\u51FB\u5916\u90E8 menu \u540E\u5173\u95ED\u83DC\u5355</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-props" tabindex="-1">DropdownItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u5BF9\u5E94\u7684 value</td><td><em>number | string</em></td><td>-</td></tr><tr><td>title</td><td>\u83DC\u5355\u9879\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u9009\u4E2D\u9879\u6587\u5B57</td></tr><tr><td>options</td><td>\u9009\u9879\u6570\u7EC4</td><td><em>Option[]</em></td><td><code>[]</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u83DC\u5355</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-class</td><td>\u6807\u9898\u989D\u5916\u7C7B\u540D\uFF0C\u5EFA\u8BAE\u4F7F\u7528\u81EA\u5B9A\u4E49\u6837\u5F0F item-title-class \u4EE3\u66FF</td><td><em>string</em></td><td>-</td></tr><tr><td>popup-style</td><td>\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>use-before-toggle <code>v1.10.12</code></td><td>\u662F\u5426\u5F00\u542F\u4E0B\u62C9\u83DC\u5355\u6253\u5F00\u6216\u8005\u5173\u95ED\u524D\u6821\u9A8C</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>root-portal <code>v1.10.14</code></td><td>\u662F\u5426\u4ECE\u9875\u9762\u5B50\u6811\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 &gt;= <code>2.25.2 </code></td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-events" tabindex="-1">DropdownItem Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u70B9\u51FB\u9009\u9879\u5BFC\u81F4 value \u53D8\u5316\u65F6\u89E6\u53D1</td><td>value</td></tr><tr><td>open</td><td>\u6253\u5F00\u83DC\u5355\u680F\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>close</td><td>\u5173\u95ED\u83DC\u5355\u680F\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>opened</td><td>\u6253\u5F00\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>closed</td><td>\u5173\u95ED\u83DC\u5355\u680F\u4E14\u52A8\u753B\u7ED3\u675F\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>before-toggle <code>v1.10.12</code></td><td>\u4E0B\u62C9\u83DC\u5355\u6253\u5F00\u6216\u8005\u5173\u95ED\u524D\u89E6\u53D1\uFF0C\u9700\u8981\u5C06<code>use-before-toggle</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code></td><td><code>event.detail.status</code>: <code>true</code> \u6253\u5F00\u4E0B\u62C9\u83DC\u5355\uFF0C<code>false</code> \u5173\u95ED\u4E0B\u62C9\u83DC\u5355 <br><code>event.detail.callback</code>: \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528<code>callback(false)</code>\u7EC8\u6B62\u4E0B\u62C9\u83DC\u5355\u72B6\u6001\u53D8\u66F4</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-fang-fa" tabindex="-1">DropdownItem \u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent(id) \u53EF\u8BBF\u95EE\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th></tr></thead><tbody><tr><td>toggle</td><td>\u5207\u6362\u83DC\u5355\u5C55\u793A\u72B6\u6001\uFF0C\u4F20<code>true</code>\u4E3A\u663E\u793A\uFF0C<code>false</code>\u4E3A\u9690\u85CF\uFF0C\u4E0D\u4F20\u53C2\u4E3A\u53D6\u53CD</td><td>show?: boolean</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="option-shu-ju-jie-gou" tabindex="-1">Option \u6570\u636E\u7ED3\u6784</h3><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>text</td><td>\u6587\u5B57</td><td><em>string</em></td></tr><tr><td>value</td><td>\u6807\u8BC6\u7B26</td><td><em>number | string</em></td></tr><tr><td>icon</td><td>\u5DE6\u4FA7<a href="#/icon" target="_blank">\u56FE\u6807\u540D\u79F0</a>\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownmenu-wai-bu-yang-shi-lei" tabindex="-1">DropdownMenu \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class <code>v1.10.7</code></td><td>\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-wai-bu-yang-shi-lei" tabindex="-1">DropdownItem \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class <code>v1.10.7</code></td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>item-title-class <code>v1.10.7</code></td><td>\u9009\u9879\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,18),sa=[Ys],aa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Zs,sa))}},ta={class:"van-doc-markdown-body"},na=d(`<h1>Empty \u7A7A\u72B6\u6001</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7A7A\u72B6\u6001\u65F6\u7684\u5360\u4F4D\u63D0\u793A\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-empty&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/empty/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-lei-xing" tabindex="-1">\u56FE\u7247\u7C7B\u578B</h3><p>Empty \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u5360\u4F4D\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u4EE5\u5728\u4E0D\u540C\u4E1A\u52A1\u573A\u666F\u4E0B\u4F7F\u7528\u3002</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u901A\u7528\u9519\u8BEF --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;error&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-comment">&lt;!-- \u7F51\u7EDC\u9519\u8BEF --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;network&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-comment">&lt;!-- \u641C\u7D22\u63D0\u793A --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-pian" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u7247</h3><p>\u9700\u8981\u81EA\u5B9A\u4E49\u56FE\u7247\u65F6\uFF0C\u53EF\u4EE5\u5728 image \u5C5E\u6027\u4E2D\u4F20\u5165\u4EFB\u610F\u56FE\u7247 URL\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span>
<span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-image&quot;</span>
<span class="hljs-attr">image</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/custom-empty-image.png&quot;</span>
<span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="di-bu-nei-rong" tabindex="-1">\u5E95\u90E8\u5185\u5BB9</h3><p>\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728 Empty \u7EC4\u4EF6\u7684\u4E0B\u65B9\u63D2\u5165\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span> <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u6587\u5B57&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bottom-button&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-empty</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">
<span class="hljs-selector-class">.bottom-button</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">160px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;
}
</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>image</td><td>\u56FE\u7247\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>error</code> <code>network</code> <code>search</code>\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL</td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>description</td><td>\u56FE\u7247\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5E95\u90E8\u5185\u5BB9</td></tr><tr><td>image</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807</td></tr><tr><td>description</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57</td></tr></tbody></table></div>`,11),la=[na],ea={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ta,la))}},pa={class:"van-doc-markdown-body"},da=d(`<h1>Field \u8F93\u5165\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u6237\u53EF\u4EE5\u5728\u6587\u672C\u6846\u5185\u8F93\u5165\u6216\u7F16\u8F91\u6587\u5B57\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-field&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/field/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-comment">// event.detail \u4E3A\u5F53\u524D\u8F93\u5165\u7684\u503C</span>
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="shuang-xiang-bang-ding" tabindex="-1">\u53CC\u5411\u7ED1\u5B9A</h3><p>\u6700\u4F4E\u57FA\u7840\u5E93\u7248\u672C\u5728 2.9.3 \u4EE5\u4E0A\u65F6\uFF0C\u53EF\u4EE5\u4F7F\u7528<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html" target="_blank">\u7B80\u6613\u53CC\u5411\u7ED1\u5B9A</a>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">model:value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;&#39;</span>,
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-lei-xing" tabindex="-1">\u81EA\u5B9A\u4E49\u7C7B\u578B</h3><p>\u6839\u636E<code>type</code>\u5C5E\u6027\u5B9A\u4E49\u4E0D\u540C\u7C7B\u578B\u7684\u8F93\u5165\u6846\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username }}&quot;</span>
<span class="hljs-attr">required</span>
<span class="hljs-attr">clearable</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;question-o&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">bind:click-icon</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ password }}&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u5BC6\u7801&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u5BC6\u7801&quot;</span>
<span class="hljs-attr">required</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-shu-ru-kuang" tabindex="-1">\u7981\u7528\u8F93\u5165\u6846</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u8F93\u5165\u6846\u5DF2\u7981\u7528&quot;</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;contact&quot;</span>
<span class="hljs-attr">disabled</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="cuo-wu-ti-shi" tabindex="-1">\u9519\u8BEF\u63D0\u793A</h3><p>\u901A\u8FC7<code>error</code>\u6216\u8005<code>error-message</code>\u5C5E\u6027\u589E\u52A0\u5BF9\u5E94\u7684\u9519\u8BEF\u63D0\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username }}&quot;</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">error</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ phone }}&quot;</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u624B\u673A\u53F7&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u624B\u673A\u53F7&quot;</span>
<span class="hljs-attr">error-message</span>=<span class="hljs-string">&quot;\u624B\u673A\u53F7\u683C\u5F0F\u9519\u8BEF&quot;</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="nei-rong-dui-qi-fang-shi" tabindex="-1">\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>input-align</code>\u5C5E\u6027\u8BBE\u7F6E\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username3 }}&quot;</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">input-align</span>=<span class="hljs-string">&quot;right&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="gao-du-zi-gua-ying" tabindex="-1">\u9AD8\u5EA6\u81EA\u9002\u5E94</h3><p>\u5BF9\u4E8E textarea\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>autosize</code>\u5C5E\u6027\u8BBE\u7F6E\u9AD8\u5EA6\u81EA\u9002\u5E94\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ message }}&quot;</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u7559\u8A00&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;textarea&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7559\u8A00&quot;</span>
<span class="hljs-attr">autosize</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="cha-ru-an-niu" tabindex="-1">\u63D2\u5165\u6309\u94AE</h3><p>\u901A\u8FC7 button slot \u53EF\u4EE5\u5728\u8F93\u5165\u6846\u5C3E\u90E8\u63D2\u5165\u6309\u94AE\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ sms }}&quot;</span>
<span class="hljs-attr">center</span>
<span class="hljs-attr">clearable</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u77ED\u4FE1\u9A8C\u8BC1\u7801&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u77ED\u4FE1\u9A8C\u8BC1\u7801&quot;</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">use-button-slot</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>
\u53D1\u9001\u9A8C\u8BC1\u7801
<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ti-huan-shu-ru-kuang-zhi" tabindex="-1">\u66FF\u6362\u8F93\u5165\u6846\u503C</h3><p>\u5728\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u4E2D\uFF0Cbind:input \u4E8B\u4EF6\u53EF\u4EE5\u901A\u8FC7\u8FD4\u56DE\u5B57\u7B26\u4E32\u6216\u8005\u4E00\u4E2A\u5BF9\u8C61\u6765\u66FF\u6362\u8F93\u5165\u6846\u7684\u503C\u4EE5\u53CA\u8C03\u6574\u5149\u6807\u7684\u4F4D\u7F6E\uFF0C\u5728 vant-weapp \u4E2D\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8C03\u7528 change \u6216 input \u53C2\u6570\u4E2D\u7684 callback \u51FD\u6570\uFF0C\u4F20\u5165\u53C2\u6570\u6765\u5B9E\u73B0</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u7528\u6237\u540D&quot;</span>
<span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">clearable</span>
<span class="hljs-attr">extra-event-params</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {
<span class="hljs-keyword">const</span> { value, callback } = e.<span class="hljs-property">detail</span>;
<span class="hljs-title function_">callback</span>({
<span class="hljs-attr">value</span>: value + <span class="hljs-number">1</span>,
<span class="hljs-attr">cursor</span>: <span class="hljs-number">0</span>,
});
},
});
</code></pre></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="zhen-ji-shang-wei-shi-me-hui-chu-xian-ju-jiao-shi-placeholder-jia-cu-shan-shuo-de-xian-xiang" tabindex="-1">\u771F\u673A\u4E0A\u4E3A\u4EC0\u4E48\u4F1A\u51FA\u73B0\u805A\u7126\u65F6 placeholder \u52A0\u7C97\u3001\u95EA\u70C1\u7684\u73B0\u8C61\uFF1F</h3><p>\u7531\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u548C textarea \u7EC4\u4EF6\u662F\u539F\u751F\u7EC4\u4EF6\uFF0C\u805A\u7126\u65F6\u4F1A\u5C06\u539F\u751F\u7684\u8F93\u5165\u6846\u8986\u76D6\u5728\u5BF9\u5E94\u4F4D\u7F6E\u4E0A\uFF0C\u5BFC\u81F4\u4E86\u8FD9\u4E2A\u73B0\u8C61\u7684\u4EA7\u751F\u3002</p><p>\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B<a href="https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97" target="_blank">\u5FAE\u4FE1\u5F00\u653E\u793E\u533A</a>\u3002</p></div><div class="van-doc-card"><h3 id="zhen-ji-shang-placeholder-wei-shi-me-hui-gai-guo-popup-deng-qi-ta-zu-jian" tabindex="-1">\u771F\u673A\u4E0A placeholder \u4E3A\u4EC0\u4E48\u4F1A\u76D6\u8FC7 popup \u7B49\u5176\u5B83\u7EC4\u4EF6\uFF1F</h3><p>\u7531\u4E8E\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u548C textarea \u7EC4\u4EF6\u662F\u539F\u751F\u7EC4\u4EF6\uFF0C\u9075\u5FAA\u539F\u751F\u7EC4\u4EF6\u7684\u9650\u5236\uFF0C\u8BE6\u60C5\u53EF\u4EE5\u67E5\u770B<a href="https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html" target="_blank">\u539F\u751F\u7EC4\u4EF6\u8BF4\u660E</a>\u3002</p></div><div class="van-doc-card"><h3 id="textarea-de-placeholder-zai-zhen-ji-shang-wei-shi-me-hui-pian-yi" tabindex="-1">textarea \u7684 placeholder \u5728\u771F\u673A\u4E0A\u4E3A\u4EC0\u4E48\u4F1A\u504F\u79FB\uFF1F</h3><p>\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 textarea \u7EC4\u4EF6\u5728 Android \u548C iOS \u4E2D\u9ED8\u8BA4\u6837\u5F0F\u4E0D\u540C\uFF0C\u5728 iOS \u4E2D\u4F1A\u6709\u9ED8\u8BA4\u7684 <code>padding</code>\uFF0C\u4E14\u65E0\u6CD5\u7F6E 0\u3002</p><p>\u540C\u65F6 <code>placeholder-style</code> \u5BF9 <code>vertical-align</code>\u3001<code>line-height</code> \u7B49\u5927\u91CF css \u5C5E\u6027\u90FD\u4E0D\u751F\u6548\u3002</p><p>\u8FD9\u4E00\u7CFB\u5217\u7684\u95EE\u9898\u5BFC\u81F4\u4E86 placeholder \u5728\u771F\u673A\u4E0A\u53EF\u80FD\u4F1A\u51FA\u73B0\u504F\u79FB\u3002</p><p>\u5FAE\u4FE1\u5DF2\u7ECF\u5728 <code>2.10.0</code> \u57FA\u7840\u5E93\u7248\u672C\u540E\u652F\u6301\u79FB\u9664\u9ED8\u8BA4\u7684 <code>padding</code>\uFF0C\u4F46\u4F4E\u7248\u672C\u4ECD\u6709\u95EE\u9898\u3002\u8BE6\u60C5\u53EF\u4EE5\u67E5\u770B <a href="https://developers.weixin.qq.com/community/develop/issue/96" target="_blank">\u5FAE\u4FE1\u5F00\u653E\u793E\u533A</a>\u3002</p></div><div class="van-doc-card"><h3 id="shou-xie-shu-ru-fa-wei-shi-me-hui-diu-shi-bu-fen-zi-fu-shou-xie-shu-ru-fa-wei-shi-me-bu-hui-chu-fa-input-shi-jian" tabindex="-1">\u624B\u5199\u8F93\u5165\u6CD5\u4E3A\u4EC0\u4E48\u4F1A\u4E22\u5931\u90E8\u5206\u5B57\u7B26 / \u624B\u5199\u8F93\u5165\u6CD5\u4E3A\u4EC0\u4E48\u4E0D\u4F1A\u89E6\u53D1 input \u4E8B\u4EF6\uFF1F</h3><p>\u8FD9\u662F\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u7684 input \u7EC4\u4EF6\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u5982\u679C\u9700\u8981\u517C\u5BB9\u624B\u5199\u8F93\u5165\u6CD5\u7684\u573A\u666F\uFF0C\u53EF\u4EE5\u5728 <code>blur</code> \u4E8B\u4EF6\u4E2D\u53D6\u5230\u8F93\u5165\u7684\u503C\u3002</p><p>\u76F8\u5173\u7684\u8BA8\u8BBA\u53EF\u4EE5\u67E5\u770B<a href="https://developers.weixin.qq.com/community/search?query=input%20%E6%89%8B%E5%86%99%E8%BE%93%E5%85%A5&amp;page=1&amp;block=1&amp;random=1567079239098" target="_blank">\u5FAE\u4FE1\u5F00\u653E\u793E\u533A</a>\u3002</p></div><div class="van-doc-card"><h3 id="ru-he-kuo-da-dian-ji-qu-yu-dian-ji-label-cuo-wu-xin-xi-du-neng-ju-jiao-huan-qi-jian-pan-ni" tabindex="-1">\u5982\u4F55\u6269\u5927\u70B9\u51FB\u533A\u57DF\uFF1F\u70B9\u51FB label\u3001\u9519\u8BEF\u4FE1\u606F \u90FD\u80FD\u805A\u7126\u5524\u8D77\u952E\u76D8\u5462\uFF1F</h3><p>\u5347\u7EA7\u81F3 1.10.21 \u7248\u672C\u53CA\u4EE5\u4E0A\uFF0C\u914D\u7F6E <code>name</code> \u5C5E\u6027\u5373\u53EF</p></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26\u3002\u53EF\u4EE5\u901A\u8FC7\u914D\u7F6E <code>name</code> \u6765\u6269\u5927\u70B9\u51FB\u533A\u57DF</td><td><em>string</em></td><td>-</td></tr><tr><td>label</td><td>\u8F93\u5165\u6846\u5DE6\u4FA7\u6587\u672C</td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5355\u5143\u683C\u5927\u5C0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>large</code></td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u5F53\u524D\u8F93\u5165\u7684\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>type</td><td>\u53EF\u8BBE\u7F6E\u4E3A\u4EFB\u610F\u539F\u751F\u7C7B\u578B, \u5982 <code>number</code> <code>idcard</code> <code>textarea</code> <code>digit</code></td><td><em>string</em></td><td><code>text</code></td></tr><tr><td>fixed</td><td>\u5982\u679C type \u4E3A <code>textarea</code> \u4E14\u5728\u4E00\u4E2A <code>position:fixed</code> \u7684\u533A\u57DF\uFF0C\u9700\u8981\u663E\u793A\u6307\u5B9A\u5C5E\u6027 fixed \u4E3A true</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>focus</td><td>\u83B7\u53D6\u7126\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u5185\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8F93\u5165\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>\u662F\u5426\u53EA\u8BFB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clearable</td><td>\u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>required</td><td>\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>center</td><td>\u662F\u5426\u4F7F\u5185\u5BB9\u5782\u76F4\u5C45\u4E2D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>password</td><td>\u662F\u5426\u662F\u5BC6\u7801\u7C7B\u578B</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-width</td><td>\u6807\u9898\u5BBD\u5EA6</td><td><em>string</em></td><td><code>6.2em</code></td></tr><tr><td>maxlength</td><td>\u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>placeholder</td><td>\u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>placeholder-style</td><td>\u6307\u5B9A placeholder \u7684\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>is-link</td><td>\u662F\u5426\u5C55\u793A\u53F3\u4FA7\u7BAD\u5934\u5E76\u5F00\u542F\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>arrow-direction</td><td>\u7BAD\u5934\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code> <code>up</code> <code>down</code></td><td><em>string</em></td><td>-</td></tr><tr><td>show-word-limit</td><td>\u662F\u5426\u663E\u793A\u5B57\u6570\u7EDF\u8BA1\uFF0C\u9700\u8981\u8BBE\u7F6E<code>maxlength</code>\u5C5E\u6027</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error</td><td>\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error-message</td><td>\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u4E3A\u7A7A\u65F6\u4E0D\u5C55\u793A</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>error-message-align</td><td>\u5E95\u90E8\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>input-align</td><td>\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td><td><em>string</em></td><td><code>left</code></td></tr><tr><td>autosize</td><td>\u662F\u5426\u81EA\u9002\u5E94\u5185\u5BB9\u9AD8\u5EA6\uFF0C\u53EA\u5BF9 textarea \u6709\u6548\uFF0C<br>\u53EF\u4F20\u5165\u5BF9\u8C61,\u5982 { maxHeight: 100, minHeight: 50 }\uFF0C<br>\u5355\u4F4D\u4E3A<code>px</code></td><td><em>boolean | object</em></td><td><code>false</code></td></tr><tr><td>left-icon</td><td>\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>right-icon</td><td>\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>confirm-type</td><td>\u8BBE\u7F6E\u952E\u76D8\u53F3\u4E0B\u89D2\u6309\u94AE\u7684\u6587\u5B57\uFF0C\u4EC5\u5728 type=&#39;text&#39; \u65F6\u751F\u6548</td><td><em>string</em></td><td><code>done</code></td></tr><tr><td>confirm-hold</td><td>\u70B9\u51FB\u952E\u76D8\u53F3\u4E0B\u89D2\u6309\u94AE\u65F6\u662F\u5426\u4FDD\u6301\u952E\u76D8\u4E0D\u6536\u8D77\uFF0C\u5728 type=&#39;textarea&#39; \u65F6\u65E0\u6548</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>hold-keyboard</td><td>focus \u65F6\uFF0C\u70B9\u51FB\u9875\u9762\u7684\u65F6\u5019\u4E0D\u6536\u8D77\u952E\u76D8</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>cursor-spacing</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u5E95\u90E8\u4E0E\u952E\u76D8\u7684\u8DDD\u79BB</td><td><em>number</em></td><td><code>50</code></td></tr><tr><td>adjust-position</td><td>\u952E\u76D8\u5F39\u8D77\u65F6\uFF0C\u662F\u5426\u81EA\u52A8\u4E0A\u63A8\u9875\u9762</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-confirm-bar</td><td>\u662F\u5426\u663E\u793A\u952E\u76D8\u4E0A\u65B9\u5E26\u6709\u201D\u5B8C\u6210\u201C\u6309\u94AE\u90A3\u4E00\u680F\uFF0C\u53EA\u5BF9 textarea \u6709\u6548</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>selection-start</td><td>\u5149\u6807\u8D77\u59CB\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-end \u642D\u914D\u4F7F\u7528</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>selection-end</td><td>\u5149\u6807\u7ED3\u675F\u4F4D\u7F6E\uFF0C\u81EA\u52A8\u805A\u96C6\u65F6\u6709\u6548\uFF0C\u9700\u4E0E selection-start \u642D\u914D\u4F7F\u7528</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>auto-focus</td><td>\u81EA\u52A8\u805A\u7126\uFF0C\u62C9\u8D77\u952E\u76D8</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disable-default-padding</td><td>\u662F\u5426\u53BB\u6389 iOS \u4E0B\u7684\u9ED8\u8BA4\u5185\u8FB9\u8DDD\uFF0C\u53EA\u5BF9 textarea \u6709\u6548</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>cursor</td><td>\u6307\u5B9A focus \u65F6\u7684\u5149\u6807\u4F4D\u7F6E</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>clear-trigger <code>v1.8.4</code></td><td>\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0C<code>always</code> \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C<br><code>focus</code> \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A</td><td><em>string</em></td><td><code>focus</code></td></tr><tr><td>always-embed <code>v1.9.2</code></td><td>\u5F3A\u5236 input \u5904\u4E8E\u540C\u5C42\u72B6\u6001\uFF0C\u9ED8\u8BA4 focus \u65F6 input \u4F1A\u5207\u5230\u975E\u540C\u5C42\u72B6\u6001 (\u4EC5\u5728 iOS \u4E0B\u751F\u6548)</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>extra-event-params <code>v1.10.12</code></td><td>\u5F00\u542F\u4E8B\u4EF6\u589E\u5F3A\u6A21\u5F0F\uFF0C\u4F1A\u5728 input \u548C change \u4E8B\u4EF6\u989D\u5916\u63D0\u4F9B <code>cursor</code> \u548C <code>keyCode</code> \u53C2\u6570\uFF0C\u8BA1\u5212\u5728\u4E0B\u4E00\u4E2A\u5927\u7248\u672C\u4F5C\u4E3A\u9ED8\u8BA4\u884C\u4E3A</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:input</td><td>\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C; \u5728 extra-event-params \u4E3A <code>true</code> \u65F6\u4E3A <a href="#/field#inputdetail" target="_blank">InputDetail</a></td></tr><tr><td>bind:change</td><td>\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C; \u5728 extra-event-params \u4E3A <code>true</code> \u65F6\u4E3A <a href="#/field#inputdetail" target="_blank">InputDetail</a></td></tr><tr><td>bind:confirm</td><td>\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:click-icon</td><td>\u70B9\u51FB\u5C3E\u90E8\u56FE\u6807\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:focus</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1</td><td>event.detail.value: \u5F53\u524D\u8F93\u5165\u503C; <br>event.detail.height: \u952E\u76D8\u9AD8\u5EA6</td></tr><tr><td>bind:blur</td><td>\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1</td><td>event.detail.value: \u5F53\u524D\u8F93\u5165\u503C; <br>event.detail.cursor: \u6E38\u6807\u4F4D\u7F6E(\u5982\u679C <code>type</code> \u4E0D\u4E3A <code>textarea</code>\uFF0C\u503C\u4E3A <code>0</code>)</td></tr><tr><td>bind:clear</td><td>\u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-input</td><td>\u70B9\u51FB\u8F93\u5165\u533A\u57DF\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:linechange</td><td>\u8F93\u5165\u6846\u884C\u6570\u53D8\u5316\u65F6\u8C03\u7528\uFF0C\u53EA\u5BF9 textarea \u6709\u6548</td><td>event.detail = { height: 0, heightRpx: 0, lineCount: 0 }</td></tr><tr><td>bind:keyboardheightchange</td><td>\u952E\u76D8\u9AD8\u5EA6\u53D1\u751F\u53D8\u5316\u7684\u65F6\u5019\u89E6\u53D1\u6B64\u4E8B\u4EF6</td><td>event.detail = { height: height, duration: duration }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="inputdetail" tabindex="-1">InputDetail</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u8F93\u5165\u503C</td><td><em>string</em></td><td>-</td></tr><tr><td>cursor</td><td>\u5149\u6807\u4F4D\u7F6E</td><td><em>number</em></td><td>-</td></tr><tr><td>keyCode</td><td>\u952E\u503C</td><td><em>number</em></td><td>-</td></tr><tr><td>callback</td><td>\u8C03\u7528\u8BE5\u51FD\u6570\u4F20 <code>{ value: string, cursor: number }</code> \u6765\u66FF\u6362\u8F93\u5165\u6846\u7684\u5185\u5BB9\uFF0C\u5177\u4F53\u7528\u6CD5\u53EF\u4EE5\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/input.html" target="_blank">wx-input</a></td><td><em>function</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>label</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u6807\u7B7E\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>label</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>left-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5934\u90E8\u56FE\u6807</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u56FE\u6807</td></tr><tr><td>button</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5C3E\u90E8\u6309\u94AE</td></tr><tr><td>input</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\uFF0C\u4F7F\u7528\u6B64\u63D2\u69FD\u540E\uFF0C\u4E0E\u8F93\u5165\u6846\u76F8\u5173\u7684\u5C5E\u6027\u548C\u4E8B\u4EF6\u5C06\u5931\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class <code>v1.10.21</code></td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>label-class</td><td>\u5DE6\u4FA7\u6587\u672C\u6837\u5F0F\u7C7B</td></tr><tr><td>input-class</td><td>\u8F93\u5165\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>right-icon-class</td><td>\u53F3\u4FA7\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,25),ca=[da],oa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",pa,ca))}},ra={class:"van-doc-markdown-body"},ia=d(`<h1>GoodsAction \u5546\u54C1\u5BFC\u822A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u4E3A\u5546\u54C1\u76F8\u5173\u64CD\u4F5C\u63D0\u4F9B\u4FBF\u6377\u4EA4\u4E92\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-goods-action&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/goods-action/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-goods-action-icon&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/goods-action-icon/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-goods-action-button&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/goods-action-button/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269\u8F66&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>
<span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickButton&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickButton&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onClickIcon</span>(<span class="hljs-params"></span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u70B9\u51FB\u56FE\u6807&#39;</span>);
},
<span class="hljs-title function_">onClickButton</span>(<span class="hljs-params"></span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u70B9\u51FB\u6309\u94AE&#39;</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">\u63D0\u793A\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>info</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5E97\u94FA&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE\u989C\u8272</h3><p>\u901A\u8FC7<code>color</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u6309\u94AE\u7684\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165<code>linear-gradient</code>\u6E10\u53D8\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5E97\u94FA&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#be99ff&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="po-su-an-niu" tabindex="-1">\u6734\u7D20\u6309\u94AE</h3><p>\u901A\u8FC7<code>plain</code>\u5C5E\u6027\u5C06\u6309\u94AE\u8BBE\u7F6E\u4E3A\u6734\u7D20\u6309\u94AE\uFF0C\u6734\u7D20\u6309\u94AE\u7684\u6587\u5B57\u4E3A\u6309\u94AE\u989C\u8272\uFF0C\u80CC\u666F\u4E3A\u767D\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;chat-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5BA2\u670D&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;cart-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u8D2D\u7269\u8F66&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-icon</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;shop-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5E97\u94FA&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u52A0\u5165\u8D2D\u7269&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u8D2D\u4E70&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="goodsaction-props" tabindex="-1">GoodsAction Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionicon-props" tabindex="-1">GoodsActionIcon Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>text</td><td>\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>\u56FE\u6807\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u89C1<code>icon</code>\u7EC4\u4EF6</td><td><em>string</em></td><td>-</td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F</td><td><em>string | number</em></td><td>-</td></tr><tr><td>color <code>v1.10.15</code></td><td>\u56FE\u6807\u989C\u8272</td><td><em>string</em></td><td><code>inherit</code></td></tr><tr><td>size</td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 20px\uFF0C2em\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3Apx</td><td><em>string | number</em></td><td>-</td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>id</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html" target="_blank">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>class-prefix <code>v1.10.1</code></td><td>\u7C7B\u540D\u524D\u7F00</td><td><em>string</em></td><td><code>van-icon</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-props" tabindex="-1">GoodsActionButton Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>text</td><td>\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>\u6309\u94AE\u989C\u8272\uFF0C\u652F\u6301\u4F20\u5165 <code>linear-gradient</code> \u6E10\u53D8\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr><tr><td>id</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>button-id <code>v1.10.25</code></td><td>\u6807\u8BC6\u7B26\uFF0C\u4F5C\u4E3A\u539F\u751Fbutton\u7EC4\u4EF6\u7684id\u503C</td><td><em>string</em></td><td>-</td></tr><tr><td>type</td><td>\u6309\u94AE\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>warning</code> <code>danger</code></td><td><em>string</em></td><td><code>danger</code></td></tr><tr><td>plain</td><td>\u662F\u5426\u4E3A\u6734\u7D20\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>size</td><td>\u6309\u94AE\u5C3A\u5BF8\uFF0C\u53EF\u9009\u503C\u4E3A <code>normal</code> <code>large</code> <code>small</code> <code>mini</code></td><td><em>string</em></td><td><code>normal</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B\uFF0C\u5177\u4F53\u652F\u6301\u53EF\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html" target="_blank">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>\u6253\u5F00 APP \u65F6\uFF0C\u5411 APP \u4F20\u9012\u7684\u53C2\u6570</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>\u6307\u5B9A\u8FD4\u56DE\u7528\u6237\u4FE1\u606F\u7684\u8BED\u8A00\uFF0Czh_CN \u7B80\u4F53\u4E2D\u6587\uFF0C<br>zh_TW \u7E41\u4F53\u4E2D\u6587\uFF0Cen \u82F1\u6587</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>\u4F1A\u8BDD\u6765\u6E90</td><td><em>string</em></td><td>-</td></tr><tr><td>send-message-title</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u6807\u9898</td><td><em>string</em></td><td>\u5F53\u524D\u6807\u9898</td></tr><tr><td>send-message-path</td><td>\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247\u70B9\u51FB\u8DF3\u8F6C\u5C0F\u7A0B\u5E8F\u8DEF\u5F84</td><td><em>string</em></td><td>\u5F53\u524D\u5206\u4EAB\u8DEF\u5F84</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>\u622A\u56FE</td></tr><tr><td>show-message-card</td><td>\u663E\u793A\u4F1A\u8BDD\u5185\u6D88\u606F\u5361\u7247</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>custom-style <code>v1.11.3</code></td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>&#39;&#39;</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionicon-slot" tabindex="-1">GoodsActionIcon Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>icon</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-slot" tabindex="-1">GoodsActionButton Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u6309\u94AE\u663E\u793A\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionicon-wai-bu-yang-shi-lei" tabindex="-1">GoodsActionIcon \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>text-class</td><td>\u6587\u5B57\u6837\u5F0F\u7C7B</td></tr><tr><td>info-class <code>v1.10.20</code></td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-wai-bu-yang-shi-lei" tabindex="-1">GoodsActionButton \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,17),ha=[ia],ua={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ra,ha))}},ga={class:"van-doc-markdown-body"},ja=d(`<h1>Grid \u5BAB\u683C</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5BAB\u683C\u53EF\u4EE5\u5728\u6C34\u5E73\u65B9\u5411\u4E0A\u628A\u9875\u9762\u5206\u9694\u6210\u7B49\u5BBD\u5EA6\u7684\u533A\u5757\uFF0C\u7528\u4E8E\u5C55\u793A\u5185\u5BB9\u6216\u8FDB\u884C\u9875\u9762\u5BFC\u822A\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-grid&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/grid/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-grid-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/grid-item/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><p>\u901A\u8FC7<code>icon</code>\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u5185\u7684\u56FE\u6807\uFF0C<code>text</code>\u5C5E\u6027\u8BBE\u7F6E\u6587\u5B57\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-lie-shu" tabindex="-1">\u81EA\u5B9A\u4E49\u5217\u6570</h3><p>\u9ED8\u8BA4\u4E00\u884C\u5C55\u793A\u56DB\u4E2A\u683C\u5B50\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>column-num</code>\u81EA\u5B9A\u4E49\u5217\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 6 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u5185\u5BB9</h3><p>\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u683C\u5B50\u5C55\u793A\u7684\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">use-slot</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 3 }}&quot;</span> <span class="hljs-attr">wx:for-item</span>=<span class="hljs-string">&quot;index&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%; height: 90px;&quot;</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zheng-fang-xing-ge-zi" tabindex="-1">\u6B63\u65B9\u5F62\u683C\u5B50</h3><p>\u8BBE\u7F6E<code>square</code>\u5C5E\u6027\u540E\uFF0C\u683C\u5B50\u7684\u9AD8\u5EA6\u4F1A\u548C\u5BBD\u5EA6\u4FDD\u6301\u4E00\u81F4\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">square</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 8 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ge-zi-jian-ju" tabindex="-1">\u683C\u5B50\u95F4\u8DDD</h3><p>\u901A\u8FC7<code>gutter</code>\u5C5E\u6027\u8BBE\u7F6E\u683C\u5B50\u4E4B\u95F4\u7684\u8DDD\u79BB\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">gutter</span>=<span class="hljs-string">&quot;{{ 10 }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 8 }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="nei-rong-heng-pai" tabindex="-1">\u5185\u5BB9\u6A2A\u6392</h3><p>\u5C06<code>direction</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>horizontal</code>\uFF0C\u53EF\u4EE5\u8BA9\u5BAB\u683C\u7684\u5185\u5BB9\u5448\u6A2A\u5411\u6392\u5217\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;horizontal&quot;</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ye-mian-tiao-zhuan" tabindex="-1">\u9875\u9762\u8DF3\u8F6C</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>url</code>\u5C5E\u6027\u8FDB\u884C\u9875\u9762\u8DF3\u8F6C\uFF0C\u901A\u8FC7<code>link-type</code>\u5C5E\u6027\u63A7\u5236\u8DF3\u8F6C\u7C7B\u578B\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span>
<span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>
<span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;navigateTo&quot;</span>
<span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;Navigate \u8DF3\u8F6C&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span>
<span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>
<span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;reLaunch&quot;</span>
<span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;ReLaunch \u8DF3\u8F6C&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">\u63D0\u793A\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>badge</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span> <span class="hljs-attr">column-num</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6587\u5B57&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="grid-props" tabindex="-1">Grid Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>column-num</td><td>\u5217\u6570</td><td><em>number</em></td><td><code>4</code></td></tr><tr><td>icon-size <code>v1.3.2</code></td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string</em></td><td><code>28px</code></td></tr><tr><td>gutter</td><td>\u683C\u5B50\u4E4B\u95F4\u7684\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>center</td><td>\u662F\u5426\u5C06\u683C\u5B50\u5185\u5BB9\u5C45\u4E2D\u663E\u793A</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>square</td><td>\u662F\u5426\u5C06\u683C\u5B50\u56FA\u5B9A\u4E3A\u6B63\u65B9\u5F62</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clickable</td><td>\u662F\u5426\u5F00\u542F\u683C\u5B50\u70B9\u51FB\u53CD\u9988</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>direction</td><td>\u683C\u5B50\u5185\u5BB9\u6392\u5217\u7684\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code></td><td><em>string</em></td><td><code>vertical</code></td></tr><tr><td>reverse <code>v1.7.0</code></td><td>\u662F\u5426\u8C03\u6362\u56FE\u6807\u548C\u6587\u672C\u7684\u4F4D\u7F6E</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="grid-wai-bu-yang-shi-lei" tabindex="-1">Grid \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-props" tabindex="-1">GridItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>text</td><td>\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>icon-color</td><td>\u56FE\u6807\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>icon-prefix <code>v1.7.0</code></td><td>\u7B2C\u4E09\u65B9\u56FE\u6807\u524D\u7F00</td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>badge</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9</td><td><em>string | number</em></td><td>-</td></tr><tr><td>url</td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code> <code>switchTab</code> <code>reLaunch</code></td><td><em>string</em></td><td><code>navigateTo</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-events" tabindex="-1">GridItem Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u683C\u5B50\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-slots" tabindex="-1">GridItem Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5BAB\u683C\u7684\u6240\u6709\u5185\u5BB9\uFF0C\u9700\u8981\u8BBE\u7F6E<code>use-slot</code>\u5C5E\u6027</td></tr><tr><td>icon</td><td>\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>use-slot</code>\u6216\u8005<code>icon</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>text</td><td>\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>use-slot</code>\u6216\u8005<code>text</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-wai-bu-yang-shi-lei" tabindex="-1">GridItem \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>content-class</td><td>\u5185\u5BB9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>text-class</td><td>\u6587\u672C\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,19),ma=[ja],ba={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ga,ma))}},va={class:"van-doc-markdown-body"},qa=d(`<h1>Icon \u56FE\u6807</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u57FA\u4E8E\u5B57\u4F53\u7684\u56FE\u6807\u96C6\uFF0C\u53EF\u4EE5\u901A\u8FC7 Icon \u7EC4\u4EF6\u4F7F\u7528\uFF0C\u4E5F\u53EF\u4EE5\u5728\u5176\u4ED6\u7EC4\u4EF6\u4E2D\u901A\u8FC7 icon \u5C5E\u6027\u5F15\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-icon&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/icon/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>Icon</code>\u7684<code>name</code>\u5C5E\u6027\u652F\u6301\u4F20\u5165\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;close&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;https://b.yzcdn.cn/vant/icon-demo-1126.png&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">\u63D0\u793A\u4FE1\u606F</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>info</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u56FE\u6807\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-yan-se" tabindex="-1">\u56FE\u6807\u989C\u8272</h3><p>\u8BBE\u7F6E<code>color</code>\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;red&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-da-xiao" tabindex="-1">\u56FE\u6807\u5927\u5C0F</h3><p>\u8BBE\u7F6E<code>size</code>\u5C5E\u6027\u6765\u63A7\u5236\u56FE\u6807\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;chat&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;50px&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u5982\u679C\u9700\u8981\u5728\u73B0\u6709 Icon \u7684\u57FA\u7840\u4E0A\u4F7F\u7528\u66F4\u591A\u56FE\u6807\uFF0C\u53EF\u4EE5\u5F15\u5165\u7B2C\u4E09\u65B9 iconfont \u5BF9\u5E94\u7684\u5B57\u4F53\u6587\u4EF6\u548C CSS \u6587\u4EF6\uFF0C\u4E4B\u540E\u5C31\u53EF\u4EE5\u5728 Icon \u7EC4\u4EF6\u4E2D\u76F4\u63A5\u4F7F\u7528\u3002\u4F8B\u5982\uFF0C\u53EF\u4EE5\u5728 <code>app.wxss</code> \u6587\u4EF6\u4E2D\u5F15\u5165\u3002</p><pre><code class="language-css"><span class="hljs-comment">/* \u5F15\u5165\u7B2C\u4E09\u65B9\u6216\u81EA\u5B9A\u4E49\u7684\u5B57\u4F53\u56FE\u6807\u6837\u5F0F */</span>
<span class="hljs-keyword">@font-face</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#39;my-icon&#39;</span>;
<span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">&#39;./my-icon.ttf&#39;</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">&#39;truetype&#39;</span>);
}
<span class="hljs-selector-class">.my-icon</span> {
<span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#39;my-icon&#39;</span>;
}
<span class="hljs-selector-class">.my-icon-extra</span><span class="hljs-selector-pseudo">::before</span> {
<span class="hljs-attribute">content</span>: <span class="hljs-string">&#39;\\e626&#39;</span>;
}
</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u901A\u8FC7 class-prefix \u6307\u5B9A\u7C7B\u540D\u4E3A my-icon --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">class-prefix</span>=<span class="hljs-string">&quot;my-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;extra&quot;</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td>-</td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u56FE\u6807\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u63D0\u793A</td><td><em>string | number</em></td><td>-</td></tr><tr><td>color</td><td>\u56FE\u6807\u989C\u8272</td><td><em>string</em></td><td><code>inherit</code></td></tr><tr><td>size <code>v1.10.20</code></td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u5982 <code>20px</code>\uFF0C<code>2em</code>\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>inherit</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>class-prefix</td><td>\u7C7B\u540D\u524D\u7F00</td><td><em>string</em></td><td><code>van-icon</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u56FE\u6807\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>info-class</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u6587\u5B57\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="kai-fa-zhe-gong-ju-shang-ti-shi-failed-to-load-font-shi-shi-me-qing-kuang" tabindex="-1">\u5F00\u53D1\u8005\u5DE5\u5177\u4E0A\u63D0\u793A Failed to load font \u662F\u4EC0\u4E48\u60C5\u51B5\uFF1F</h3><p>\u8FD9\u4E2A\u662F\u5F00\u53D1\u8005\u5DE5\u5177\u672C\u8EAB\u7684\u95EE\u9898\uFF0C\u53EF\u4EE5\u5FFD\u7565\uFF0C\u5177\u4F53\u53EF\u4EE5\u67E5\u770B<a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html" target="_blank">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a> - \u6CE8\u610F\u4E8B\u9879\u7B2C 5 \u6761\u3002</p></div>`,15),fa=[qa],ya={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",va,fa))}},_a={class:"van-doc-markdown-body"},xa=d(`<h1>Image \u56FE\u7247</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u589E\u5F3A\u7248\u7684 img \u6807\u7B7E\uFF0C\u63D0\u4F9B\u591A\u79CD\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u652F\u6301\u56FE\u7247\u61D2\u52A0\u8F7D\u3001\u52A0\u8F7D\u4E2D\u63D0\u793A\u3001\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-image&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/image/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u57FA\u7840\u7528\u6CD5\u4E0E\u539F\u751F <a href="(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)" target="_blank">image</a> \u6807\u7B7E\u4E00\u81F4\uFF0C\u53EF\u4EE5\u8BBE\u7F6E<code>src</code>\u3001<code>width</code>\u3001<code>height</code>\u7B49\u539F\u751F\u5C5E\u6027\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tian-chong-mo-shi" tabindex="-1">\u586B\u5145\u6A21\u5F0F</h3><p>\u901A\u8FC7<code>fit</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u586B\u5145\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u89C1\u4E0B\u65B9\u8868\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span>
<span class="hljs-attr">width</span>=<span class="hljs-string">&quot;10rem&quot;</span>
<span class="hljs-attr">height</span>=<span class="hljs-string">&quot;10rem&quot;</span>
<span class="hljs-attr">fit</span>=<span class="hljs-string">&quot;contain&quot;</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yuan-xing-tu-pian" tabindex="-1">\u5706\u5F62\u56FE\u7247</h3><p>\u901A\u8FC7<code>round</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u56FE\u7247\u53D8\u5706\uFF0C\u6CE8\u610F\u5F53\u56FE\u7247\u5BBD\u9AD8\u4E0D\u76F8\u7B49\u4E14<code>fit</code>\u4E3A<code>contain</code>\u6216<code>scale-down</code>\u65F6\uFF0C\u5C06\u65E0\u6CD5\u586B\u5145\u4E00\u4E2A\u5B8C\u6574\u7684\u5706\u5F62\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span>
<span class="hljs-attr">round</span>
<span class="hljs-attr">width</span>=<span class="hljs-string">&quot;10rem&quot;</span>
<span class="hljs-attr">height</span>=<span class="hljs-string">&quot;10rem&quot;</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-lan-jia-zai" tabindex="-1">\u56FE\u7247\u61D2\u52A0\u8F7D</h3><p>\u56FE\u7247\u61D2\u52A0\u8F7D\uFF0C\u5728\u5373\u5C06\u8FDB\u5165\u4E00\u5B9A\u8303\u56F4\uFF08\u4E0A\u4E0B\u4E09\u5C4F\uFF09\u65F6\u624D\u5F00\u59CB\u52A0\u8F7D\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span>
<span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100&quot;</span>
<span class="hljs-attr">height</span>=<span class="hljs-string">&quot;100&quot;</span>
<span class="hljs-attr">lazy-load</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhong-ti-shi" tabindex="-1">\u52A0\u8F7D\u4E2D\u63D0\u793A</h3><p><code>Image</code>\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u4E2D\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7<code>loading</code>\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span> <span class="hljs-attr">use-loading-slot</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;loading&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;spinner&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;20&quot;</span> <span class="hljs-attr">vertical</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-image</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-shi-bai-ti-shi" tabindex="-1">\u52A0\u8F7D\u5931\u8D25\u63D0\u793A</h3><p><code>Image</code>\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u9ED8\u8BA4\u7684\u52A0\u8F7D\u5931\u8D25\u63D0\u793A\uFF0C\u652F\u6301\u901A\u8FC7<code>error</code>\u63D2\u69FD\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span> <span class="hljs-attr">use-error-slot</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">text</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;error&quot;</span>&gt;</span>\u52A0\u8F7D\u5931\u8D25<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-image</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>src</td><td>\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td>-</td></tr><tr><td>fit</td><td>\u56FE\u7247\u586B\u5145\u6A21\u5F0F</td><td><em>string</em></td><td><em>fill</em></td></tr><tr><td>alt</td><td>\u66FF\u4EE3\u6587\u672C</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td>-</td></tr><tr><td>height</td><td>\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td>-</td></tr><tr><td>radius</td><td>\u5706\u89D2\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>round</td><td>\u662F\u5426\u663E\u793A\u4E3A\u5706\u5F62</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lazy-load</td><td>\u662F\u5426\u61D2\u52A0\u8F7D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>webp <code>v1.10.11</code></td><td>\u662F\u5426\u89E3\u6790 webp \u683C\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-error</td><td>\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u63D0\u793A</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-loading</td><td>\u662F\u5426\u5C55\u793A\u56FE\u7247\u52A0\u8F7D\u4E2D\u63D0\u793A</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>use-error-slot</td><td>\u662F\u5426\u4F7F\u7528 error \u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-loading-slot</td><td>\u662F\u5426\u4F7F\u7528 loading \u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-menu-by-longpress</td><td>\u662F\u5426\u5F00\u542F\u957F\u6309\u56FE\u7247\u663E\u793A\u8BC6\u522B\u5C0F\u7A0B\u5E8F\u7801\u83DC\u5355</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tu-pian-tian-chong-mo-shi" tabindex="-1">\u56FE\u7247\u586B\u5145\u6A21\u5F0F \b</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u542B\u4E49</th></tr></thead><tbody><tr><td>contain</td><td>\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u957F\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765</td></tr><tr><td>cover</td><td>\u4FDD\u6301\u5BBD\u9AD8\u7F29\u653E\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u7684\u77ED\u8FB9\u80FD\u5B8C\u5168\u663E\u793A\u51FA\u6765\uFF0C\u88C1\u526A\u957F\u8FB9</td></tr><tr><td>fill</td><td>\u62C9\u4F38\u56FE\u7247\uFF0C\u4F7F\u56FE\u7247\u586B\u6EE1\u5143\u7D20</td></tr><tr><td>widthFix</td><td>\u7F29\u653E\u6A21\u5F0F\uFF0C\u5BBD\u5EA6\u4E0D\u53D8\uFF0C\u9AD8\u5EA6\u81EA\u52A8\u53D8\u5316\uFF0C\u4FDD\u6301\u539F\u56FE\u5BBD\u9AD8\u6BD4\u4E0D\u53D8</td></tr><tr><td>heightFix</td><td>\u7F29\u653E\u6A21\u5F0F\uFF0C\u9AD8\u5EA6\u4E0D\u53D8\uFF0C\u5BBD\u5EA6\u81EA\u52A8\u53D8\u5316\uFF0C\u4FDD\u6301\u539F\u56FE\u5BBD\u9AD8\u6BD4\u4E0D\u53D8</td></tr><tr><td>none</td><td>\u4FDD\u6301\u56FE\u7247\u539F\u6709\u5C3A\u5BF8</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u56FE\u7247\u65F6\u89E6\u53D1</td><td>event: Event</td></tr><tr><td>bind:load</td><td>\u56FE\u7247\u52A0\u8F7D\u5B8C\u6BD5\u65F6\u89E6\u53D1</td><td>event: Event</td></tr><tr><td>bind:error</td><td>\u56FE\u7247\u52A0\u8F7D\u5931\u8D25\u65F6\u89E6\u53D1</td><td>event: Event</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>loading</td><td>\u81EA\u5B9A\u4E49\u52A0\u8F7D\u4E2D\u7684\u63D0\u793A\u5185\u5BB9</td></tr><tr><td>error</td><td>\u81EA\u5B9A\u4E49\u52A0\u8F7D\u5931\u8D25\u65F6\u7684\u63D0\u793A\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>image-class</td><td>\u56FE\u7247\u6837\u5F0F\u7C7B</td></tr><tr><td>loading-class</td><td>loading \u6837\u5F0F\u7C7B</td></tr><tr><td>error-class</td><td>error \u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,16),wa=[xa],ka={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",_a,wa))}},za={class:"van-doc-markdown-body"},Ca=d(`<h1>IndexBar \u7D22\u5F15\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5217\u8868\u7684\u7D22\u5F15\u5206\u7C7B\u663E\u793A\u548C\u5FEB\u901F\u5B9A\u4F4D\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-index-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/index-bar/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-index-anchor&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/index-anchor/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u70B9\u51FB\u7D22\u5F15\u680F\u65F6\uFF0C\u4F1A\u81EA\u52A8\u8DF3\u8F6C\u5230\u5BF9\u5E94\u7684<code>IndexAnchor</code>\u951A\u70B9\u4F4D\u7F6E\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-index-bar</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;A&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;B&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
...
<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-bar</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-suo-yin-lie-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u7D22\u5F15\u5217\u8868</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>index-list</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u5C55\u793A\u7684\u7D22\u5F15\u5B57\u7B26\u5217\u8868\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-index-bar</span> <span class="hljs-attr">index-list</span>=<span class="hljs-string">&quot;{{ indexList }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u6807\u98981<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-anchor</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-index-anchor</span> <span class="hljs-attr">index</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u6807\u98982<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-anchor</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6587\u672C&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
...
<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-bar</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">indexList</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">9</span>, <span class="hljs-number">10</span>],
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="indexbar-props" tabindex="-1">IndexBar Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>index-list</td><td>\u7D22\u5F15\u5B57\u7B26\u5217\u8868</td><td><em>string[] | number[]</em></td><td><code>A-Z</code></td><td>-</td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>1</code></td><td>-</td></tr><tr><td>sticky</td><td>\u662F\u5426\u5F00\u542F\u951A\u70B9\u81EA\u52A8\u5438\u9876</td><td><em>boolean</em></td><td><code>true</code></td><td>-</td></tr><tr><td>sticky-offset-top</td><td>\u951A\u70B9\u81EA\u52A8\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB</td><td><em>number</em></td><td><code>0</code></td><td>-</td></tr><tr><td>highlight-color</td><td>\u7D22\u5F15\u5B57\u7B26\u9AD8\u4EAE\u989C\u8272</td><td><em>string</em></td><td><code>#07c160</code></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="indexanchor-props" tabindex="-1">IndexAnchor Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>use-slot</td><td>\u662F\u5426\u4F7F\u7528\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td><td>-</td></tr><tr><td>index</td><td>\u7D22\u5F15\u5B57\u7B26</td><td><em>string | number</em></td><td>-</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="indexbar-events" tabindex="-1">IndexBar Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>select</td><td>\u9009\u4E2D\u5B57\u7B26\u65F6\u89E6\u53D1</td><td>index: \u7D22\u5F15\u5B57\u7B26</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="indexanchor-slots" tabindex="-1">IndexAnchor Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u951A\u70B9\u4F4D\u7F6E\u663E\u793A\u5185\u5BB9\uFF0C\u9ED8\u8BA4\u4E3A\u7D22\u5F15\u5B57\u7B26</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="qian-tao-zai-gun-dong-yuan-su-zhong-indexanchor-shi-xiao" tabindex="-1">\u5D4C\u5957\u5728\u6EDA\u52A8\u5143\u7D20\u4E2D IndexAnchor \u5931\u6548\uFF1F</h3><p>\u7531\u4E8E <code>&lt;IndexBar /&gt;</code> \u5185\u90E8\u4F7F\u7528 wx.pageScrollTo \u6EDA\u52A8\u5230\u6307\u5B9A\u4F4D\u7F6E\uFF0C\u56E0\u6B64\u53EA\u652F\u6301\u9875\u9762\u7EA7\u6EDA\u52A8\uFF0C\u65E0\u6CD5\u5728\u6EDA\u52A8\u5143\u7D20\u4E2D\u5D4C\u5957\u4F7F\u7528\uFF0C\u4F8B\u5982\uFF1A<code>view</code> \u4F7F\u7528 <code>overflow: scroll;</code> \u6216\u8005 <code>scroll-view</code>\uFF0C\u5177\u4F53\u53EF\u67E5\u770B<a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html" target="_blank">\u5FAE\u4FE1\u5C0F\u7A0B\u5E8F\u6587\u6863</a>\u3002\u5386\u53F2 issue: <a href="https://github.com/youzan/vant-weapp/issues/4252" target="_blank">#4252</a></p></div>`,13),Pa=[Ca],Sa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",za,Pa))}},Da={class:"van-doc-markdown-body"},Ia=d(`<h1>Loading \u52A0\u8F7D</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u52A0\u8F7D\u56FE\u6807\uFF0C\u7528\u4E8E\u8868\u793A\u52A0\u8F7D\u4E2D\u7684\u8FC7\u6E21\u72B6\u6001\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-loading&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/loading/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="jia-zai-lei-xing" tabindex="-1">\u52A0\u8F7D\u7C7B\u578B</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;spinner&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;spinner&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-wen-an" tabindex="-1">\u52A0\u8F7D\u6587\u6848</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>&gt;</span>\u52A0\u8F7D\u4E2D...<span class="hljs-tag">&lt;/<span class="hljs-name">van-loading</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-pai-lie" tabindex="-1">\u5782\u76F4\u6392\u5217</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-loading</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span> <span class="hljs-attr">vertical</span>&gt;</span>\u52A0\u8F7D\u4E2D...<span class="hljs-tag">&lt;/<span class="hljs-name">van-loading</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>color</td><td>\u989C\u8272</td><td><em>string</em></td><td><code>#c9c9c9</code></td></tr><tr><td>type</td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>size</td><td>\u52A0\u8F7D\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>30px</code></td></tr><tr><td>text-size <code>v1.0.0</code></td><td>\u6587\u5B57\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>14px</code></td></tr><tr><td>vertical <code>v1.0.0</code></td><td>\u662F\u5426\u5782\u76F4\u6392\u5217\u56FE\u6807\u548C\u6587\u5B57\u5185\u5BB9</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u52A0\u8F7D\u6587\u6848</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,12),Ta=[Ia],$a={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Da,Ta))}},Aa={class:"van-doc-markdown-body"},Ea=d(`<h1>NavBar \u5BFC\u822A\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u4E3A\u9875\u9762\u63D0\u4F9B\u5BFC\u822A\u529F\u80FD\uFF0C\u5E38\u7528\u4E8E\u9875\u9762\u9876\u90E8\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-nav-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/nav-bar/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-nav-bar</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>
<span class="hljs-attr">left-text</span>=<span class="hljs-string">&quot;\u8FD4\u56DE&quot;</span>
<span class="hljs-attr">right-text</span>=<span class="hljs-string">&quot;\u6309\u94AE&quot;</span>
<span class="hljs-attr">left-arrow</span>
<span class="hljs-attr">bind:click-left</span>=<span class="hljs-string">&quot;onClickLeft&quot;</span>
<span class="hljs-attr">bind:click-right</span>=<span class="hljs-string">&quot;onClickRight&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onClickLeft</span>(<span class="hljs-params"></span>) {
wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u70B9\u51FB\u8FD4\u56DE&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });
},
<span class="hljs-title function_">onClickRight</span>(<span class="hljs-params"></span>) {
wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u70B9\u51FB\u6309\u94AE&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u901A\u8FC7 slot \u5B9A\u5236\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-nav-bar</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> <span class="hljs-attr">left-text</span>=<span class="hljs-string">&quot;\u8FD4\u56DE&quot;</span> <span class="hljs-attr">left-arrow</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-icon</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-nav-bar</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>left-text</td><td>\u5DE6\u4FA7\u6587\u6848</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>right-text</td><td>\u53F3\u4FA7\u6587\u6848</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>left-arrow</td><td>\u662F\u5426\u663E\u793A\u5DE6\u4FA7\u7BAD\u5934</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>fixed</td><td>\u662F\u5426\u56FA\u5B9A\u5728\u9876\u90E8</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>placeholder</td><td>\u56FA\u5B9A\u5728\u9876\u90E8\u65F6\u662F\u5426\u5F00\u542F\u5360\u4F4D</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u663E\u793A\u4E0B\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>z-index</td><td>\u5143\u7D20 z-index</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>custom-style</td><td>\u6839\u8282\u70B9\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>safe-area-inset-top</td><td>\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898</td></tr><tr><td>left</td><td>\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u533A\u57DF\u5185\u5BB9</td></tr><tr><td>right</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click-left</td><td>\u70B9\u51FB\u5DE6\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-right</td><td>\u70B9\u51FB\u53F3\u4FA7\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class</td><td>\u6807\u9898\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,11),Fa=[Ea],Ba={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Aa,Fa))}},Ra={class:"van-doc-markdown-body"},Na=d(`<h1>NoticeBar \u901A\u77E5\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5FAA\u73AF\u64AD\u653E\u5C55\u793A\u4E00\u7EC4\u6D88\u606F\u901A\u77E5\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-notice-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/notice-bar/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>
<span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;volume-o&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="gun-dong-bo-fang" tabindex="-1">\u6EDA\u52A8\u64AD\u653E</h3><p>\u901A\u77E5\u680F\u7684\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u4F1A\u81EA\u52A8\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u901A\u8FC7 <code>scrollable</code> \u5C5E\u6027\u53EF\u4EE5\u63A7\u5236\u8BE5\u884C\u4E3A\u3002</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u6587\u5B57\u8F83\u77ED\u65F6\uFF0C\u901A\u8FC7\u8BBE\u7F6E scrollable \u5C5E\u6027\u5F00\u542F\u6EDA\u52A8\u64AD\u653E --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">scrollable</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span> /&gt;</span>
<span class="hljs-comment">&lt;!-- \u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u901A\u8FC7\u7981\u7528 scrollable \u5C5E\u6027\u5173\u95ED\u6EDA\u52A8\u64AD\u653E --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>
<span class="hljs-attr">scrollable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="duo-xing-zhan-shi" tabindex="-1">\u591A\u884C\u5C55\u793A</h3><p>\u6587\u5B57\u8F83\u957F\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E <code>wrapable</code> \u5C5E\u6027\u6765\u5F00\u542F\u591A\u884C\u5C55\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>
<span class="hljs-attr">wrapable</span>
<span class="hljs-attr">scrollable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u5728\u4EE3\u7801\u9605\u8BFB\u8FC7\u7A0B\u4E2D\u4EBA\u4EEC\u8BF4\u810F\u8BDD\u7684\u9891\u7387\u662F\u8861\u91CF\u4EE3\u7801\u8D28\u91CF\u7684\u552F\u4E00\u6807\u51C6\u3002&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tong-zhi-lan-mo-shi" tabindex="-1">\u901A\u77E5\u680F\u6A21\u5F0F</h3><p>\u901A\u77E5\u680F\u652F\u6301 <code>closeable</code> \u548C <code>link</code> \u4E24\u79CD\u6A21\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- closeable \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u5173\u95ED\u6309\u94AE --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;closeable&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span> /&gt;</span>
<span class="hljs-comment">&lt;!-- link \u6A21\u5F0F\uFF0C\u5728\u53F3\u4FA7\u663E\u793A\u94FE\u63A5\u7BAD\u5934 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;link&quot;</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><p>\u901A\u8FC7 <code>color</code> \u5C5E\u6027\u8BBE\u7F6E\u6587\u672C\u989C\u8272\uFF0C\u901A\u8FC7 <code>background</code> \u5C5E\u6027\u8BBE\u7F6E\u80CC\u666F\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>
<span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>
<span class="hljs-attr">background</span>=<span class="hljs-string">&quot;#ecf9ff&quot;</span>
<span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;info-o&quot;</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;\u6280\u672F\u662F\u5F00\u53D1\u5B83\u7684\u4EBA\u7684\u5171\u540C\u7075\u9B42\u3002&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-gun-dong-su-lu" tabindex="-1">\u81EA\u5B9A\u4E49\u6EDA\u52A8\u901F\u7387</h3><p>\u4F7F\u7528<code>speed</code>\u5C5E\u6027\u63A7\u5236\u6EDA\u52A8\u901F\u7387\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>
<span class="hljs-attr">text</span>=<span class="hljs-string">&quot;{{ text }}&quot;</span>
<span class="hljs-attr">speed</span>=<span class="hljs-string">&quot;{{speedValue}}&quot;</span>
<span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png&quot;</span>
/&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>mode</td><td>\u901A\u77E5\u680F\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>closeable</code> <code>link</code></td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>text</td><td>\u901A\u77E5\u6587\u672C\u5185\u5BB9</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>color</td><td>\u901A\u77E5\u6587\u672C\u989C\u8272</td><td><em>string</em></td><td><code>#ed6a0c</code></td></tr><tr><td>background</td><td>\u6EDA\u52A8\u6761\u80CC\u666F</td><td><em>string</em></td><td><code>#fffbe8</code></td></tr><tr><td>left-icon</td><td>\u5DE6\u4FA7<a href="#/icon" target="_blank">\u56FE\u6807\u540D\u79F0</a>\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td>-</td></tr><tr><td>delay</td><td>\u52A8\u753B\u5EF6\u8FDF\u65F6\u95F4 (ms)</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>speed</td><td>\u6EDA\u52A8\u901F\u7387 (px/s)</td><td><em>number</em></td><td><code>60</code></td></tr><tr><td>scrollable</td><td>\u662F\u5426\u5F00\u542F\u6EDA\u52A8\u64AD\u653E\uFF0C\u5185\u5BB9\u957F\u5EA6\u6EA2\u51FA\u65F6\u9ED8\u8BA4\u5F00\u542F</td><td><em>boolean</em></td><td>-</td></tr><tr><td>wrapable</td><td>\u662F\u5426\u5F00\u542F\u6587\u672C\u6362\u884C\uFF0C\u53EA\u5728\u7981\u7528\u6EDA\u52A8\u65F6\u751F\u6548</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>\u5FAE\u4FE1\u5F00\u653E\u80FD\u529B</td><td><em>string</em></td><td><code>navigate</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u901A\u77E5\u680F\u65F6\u89E6\u53D1</td><td><em>event: Event</em></td></tr><tr><td>bind:close</td><td>\u5173\u95ED\u901A\u77E5\u680F\u65F6\u89E6\u53D1</td><td><em>event: Event</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u901A\u77E5\u6587\u672C\u5185\u5BB9\uFF0C\u4EC5\u5728 <code>text</code> \u5C5E\u6027\u4E3A\u7A7A\u65F6\u6709\u6548</td></tr><tr><td>left-icon</td><td>\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u56FE\u6807</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u56FE\u6807</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">\u6837\u5F0F\u53D8\u91CF</h3><p>\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 <a href="#/config-provider" target="_blank">ConfigProvider \u7EC4\u4EF6</a>\u3002</p><table><thead><tr><th>\u540D\u79F0</th><th>\u9ED8\u8BA4\u503C</th><th>\u63CF\u8FF0</th></tr></thead><tbody><tr><td>--notice-bar-height</td><td><em>40px</em></td><td>-</td></tr><tr><td>--notice-bar-padding</td><td><em>0 var(--van-padding-md)</em></td><td>-</td></tr><tr><td>--notice-bar-wrapable-padding</td><td><em>var(--van-padding-xs) var(--van-padding-md)</em></td><td>-</td></tr><tr><td>--notice-bar-text-color</td><td><em>var(--van-orange-dark)</em></td><td>-</td></tr><tr><td>--notice-bar-font-size</td><td><em>var(--van-font-size-md)</em></td><td>-</td></tr><tr><td>--notice-bar-line-height</td><td><em>24px</em></td><td>-</td></tr><tr><td>--notice-bar-background-color</td><td><em>var(--van-orange-light)</em></td><td>-</td></tr><tr><td>--notice-bar-icon-size</td><td><em>16px</em></td><td>-</td></tr><tr><td>--notice-bar-icon-min-width</td><td><em>24px</em></td><td>-</td></tr></tbody></table></div>`,16),Ma=[Na],La={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ra,Ma))}},Va={class:"van-doc-markdown-body"},Ua=d(`<h1>Notify \u6D88\u606F\u63D0\u793A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A\u6D88\u606F\u63D0\u793A\uFF0C\u652F\u6301\u51FD\u6570\u8C03\u7528\u548C\u7EC4\u4EF6\u8C03\u7528\u4E24\u79CD\u65B9\u5F0F\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-notify&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/notify/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Notify</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/notify/notify&#39;</span>;
<span class="hljs-title class_">Notify</span>(<span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</span>);
</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u5BF9\u5E94\u7684\u8282\u70B9 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-notify&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="tong-zhi-lei-xing" tabindex="-1">\u901A\u77E5\u7C7B\u578B</h3><p>\u652F\u6301<code>primary</code>\u3001<code>success</code>\u3001<code>warning</code>\u3001<code>danger</code>\u56DB\u79CD\u901A\u77E5\u7C7B\u578B\uFF0C\u9ED8\u8BA4\u4E3A<code>danger</code>\u3002</p><pre><code class="language-js"><span class="hljs-comment">// \u4E3B\u8981\u901A\u77E5</span>
<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</span> });
<span class="hljs-comment">// \u6210\u529F\u901A\u77E5</span>
<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;success&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</span> });
<span class="hljs-comment">// \u5371\u9669\u901A\u77E5</span>
<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;danger&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</span> });
<span class="hljs-comment">// \u8B66\u544A\u901A\u77E5</span>
<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;warning&#39;</span>, <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u901A\u77E5\u5185\u5BB9&#39;</span> });
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tong-zhi" tabindex="-1">\u81EA\u5B9A\u4E49\u901A\u77E5</h3><p>\u81EA\u5B9A\u4E49\u6D88\u606F\u901A\u77E5\u7684\u989C\u8272\u548C\u5C55\u793A\u65F6\u957F\u3002</p><pre><code class="language-js"><span class="hljs-title class_">Notify</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u81EA\u5B9A\u4E49\u989C\u8272&#39;</span>,
<span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#ad0000&#39;</span>,
<span class="hljs-attr">background</span>: <span class="hljs-string">&#39;#ffe1e1&#39;</span>,
});
<span class="hljs-title class_">Notify</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u81EA\u5B9A\u4E49\u65F6\u957F&#39;</span>,
<span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>,
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xuan-ze-qi" tabindex="-1">\u81EA\u5B9A\u4E49\u9009\u62E9\u5668</h3><pre><code class="language-js"><span class="hljs-title class_">Notify</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668&#39;</span>,
<span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>,
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#39;#custom-selector&#39;</span>,
});
</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- \u5728\u9875\u9762\u5185\u6DFB\u52A0\u81EA\u5B9A\u4E49\u8282\u70B9 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;custom-selector&quot;</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th></tr></thead><tbody><tr><td>Notify</td><td>\u5C55\u793A\u63D0\u793A</td><td><code>options | message</code></td><td>notify \u5B9E\u4F8B</td></tr><tr><td>Notify.clear</td><td>\u5173\u95ED\u63D0\u793A</td><td><code>options</code></td><td><code>void</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type <code>v1.0.0</code></td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>success</code> <code>warning</code></td><td><em>string</em></td><td><code>danger</code></td></tr><tr><td>message <code>v1.0.0</code></td><td>\u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7<code>\\n</code>\u6362\u884C</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>duration</td><td>\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Cnotify \u4E0D\u4F1A\u6D88\u5931</td><td><em>number</em></td><td><code>3000</code></td></tr><tr><td>selector</td><td>\u81EA\u5B9A\u4E49\u8282\u70B9\u9009\u62E9\u5668</td><td><em>string</em></td><td><code>van-notify</code></td></tr><tr><td>color</td><td>\u5B57\u4F53\u989C\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>top</td><td>\u9876\u90E8\u8DDD\u79BB</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>background</td><td>\u80CC\u666F\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>context</td><td>\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587</td><td><em>object</em></td><td>\u5F53\u524D\u9875\u9762</td></tr><tr><td>onClick</td><td>\u70B9\u51FB\u65F6\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr><tr><td>onOpened</td><td>\u5B8C\u5168\u5C55\u793A\u540E\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr><tr><td>onClose</td><td>\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr><tr><td>safeAreaInsetTop</td><td>\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div>`,11),Oa=[Ua],Ga={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Va,Oa))}},Wa={class:"van-doc-markdown-body"},Ha=d(`<h1>Overlay \u906E\u7F69\u5C42</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u521B\u5EFA\u4E00\u4E2A\u906E\u7F69\u5C42\uFF0C\u7528\u4E8E\u5F3A\u8C03\u7279\u5B9A\u7684\u9875\u9762\u5143\u7D20\uFF0C\u5E76\u963B\u6B62\u7528\u6237\u8FDB\u884C\u5176\u4ED6\u64CD\u4F5C\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-overlay&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/overlay/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickShow&quot;</span>&gt;</span>\u663E\u793A\u906E\u7F69\u5C42<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-overlay</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickHide&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
},
<span class="hljs-title function_">onClickShow</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });
},
<span class="hljs-title function_">onClickHide</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="qian-ru-nei-rong" tabindex="-1">\u5D4C\u5165\u5185\u5BB9</h3><p>\u901A\u8FC7\u9ED8\u8BA4\u63D2\u69FD\u53EF\u4EE5\u5728\u906E\u7F69\u5C42\u4E0A\u5D4C\u5165\u4EFB\u610F\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickShow&quot;</span>&gt;</span>\u5D4C\u5165\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-overlay</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickHide&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;block&quot;</span> <span class="hljs-attr">catch:tap</span>=<span class="hljs-string">&quot;noop&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-overlay</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
},
<span class="hljs-title function_">onClickShow</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });
},
<span class="hljs-title function_">onClickHide</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
<span class="hljs-title function_">noop</span>(<span class="hljs-params"></span>) {},
});
</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.wrapper</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">align-items</span>: center;
<span class="hljs-attribute">justify-content</span>: center;
<span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
}
<span class="hljs-selector-class">.block</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">120px</span>;
<span class="hljs-attribute">height</span>: <span class="hljs-number">120px</span>;
<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>;
}
</code></pre></div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u5C55\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u79D2</td><td><em>string | number</em></td><td><code>0.3</code></td></tr><tr><td>class-name</td><td>\u81EA\u5B9A\u4E49\u7C7B\u540D</td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>lock-scroll <code>v1.7.3</code></td><td>\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8\uFF0C\u9501\u5B9A\u65F6\u8499\u5C42\u91CC\u7684\u5185\u5BB9\u4E5F\u5C06\u65E0\u6CD5\u6EDA\u52A8</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>root-portal <code>v1.10.14</code></td><td>\u662F\u5426\u4ECE\u9875\u9762\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 &gt;= <code>2.25.2 </code></td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u9ED8\u8BA4\u63D2\u69FD\uFF0C\u7528\u4E8E\u5728\u906E\u7F69\u5C42\u4E0A\u65B9\u5D4C\u5165\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,10),Ka=[Ha],Qa={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Wa,Ka))}},Ja={class:"van-doc-markdown-body"},Xa=d(`<h1>Panel \u9762\u677F</h1><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-panel&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/panel/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u9762\u677F\u53EA\u662F\u4E00\u4E2A\u5BB9\u5668\uFF0C\u91CC\u9762\u53EF\u4EE5\u653E\u5165\u81EA\u5B9A\u4E49\u7684\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-panel</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> <span class="hljs-attr">status</span>=<span class="hljs-string">&quot;\u72B6\u6001&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-panel</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u4F7F\u7528<code>slot</code>\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-panel</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span> <span class="hljs-attr">status</span>=<span class="hljs-string">&quot;\u72B6\u6001&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;small&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6309\u94AE<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-panel</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>desc</td><td>\u63CF\u8FF0</td><td><em>string</em></td><td>-</td></tr><tr><td>status</td><td>\u72B6\u6001</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5185\u5BB9</td></tr><tr><td>header</td><td>\u81EA\u5B9A\u4E49 header\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u3001<code>desc</code>\u3001<code>status</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr><tr><td>footer</td><td>\u81EA\u5B9A\u4E49 footer</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>header-class</td><td>\u5934\u90E8\u6837\u5F0F\u7C7B</td></tr><tr><td>footer-class</td><td>\u5E95\u90E8\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,9),Za=[Xa],Ya={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ja,Za))}},st={class:"van-doc-markdown-body"},at=d(`<h1>Picker \u9009\u62E9\u5668</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u63D0\u4F9B\u591A\u4E2A\u9009\u9879\u96C6\u5408\u4F9B\u7528\u6237\u9009\u62E9\uFF0C\u652F\u6301\u5355\u5217\u9009\u62E9\u548C\u591A\u5217\u7EA7\u8054\uFF0C\u901A\u5E38\u4E0E <a href="#/popup" target="_blank">\u5F39\u51FA\u5C42</a> \u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-picker&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/picker/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/toast/toast&#39;</span>;
<span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">columns</span>: [<span class="hljs-string">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span>, <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5609\u5174&#39;</span>, <span class="hljs-string">&#39;\u6E56\u5DDE&#39;</span>],
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">\`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">\${value}</span>, \u5F53\u524D\u7D22\u5F15\uFF1A<span class="hljs-subst">\${index}</span>\`</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="mo-ren-xuan-zhong-xiang" tabindex="-1">\u9ED8\u8BA4\u9009\u4E2D\u9879</h3><p>\u5355\u5217\u9009\u62E9\u5668\u53EF\u4EE5\u76F4\u63A5\u901A\u8FC7<code>default-index</code>\u5C5E\u6027\u8BBE\u7F6E\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\u503C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span>
<span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span>
<span class="hljs-attr">default-index</span>=<span class="hljs-string">&quot;{{ 2 }}&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-ding-bu-lan" tabindex="-1">\u5C55\u793A\u9876\u90E8\u680F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span>
<span class="hljs-attr">show-toolbar</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u9898&quot;</span>
<span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span>
<span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span>
<span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/toast/toast&#39;</span>;
<span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">columns</span>: [<span class="hljs-string">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span>, <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5609\u5174&#39;</span>, <span class="hljs-string">&#39;\u6E56\u5DDE&#39;</span>],
},
<span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">\`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">\${value}</span>, \u5F53\u524D\u7D22\u5F15\uFF1A<span class="hljs-subst">\${index}</span>\`</span>);
},
<span class="hljs-title function_">onCancel</span>(<span class="hljs-params"></span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u53D6\u6D88&#39;</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="duo-lie-lian-dong" tabindex="-1">\u591A\u5217\u8054\u52A8</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">const</span> citys = {
\u6D59\u6C5F: [<span class="hljs-string">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span>, <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u5609\u5174&#39;</span>, <span class="hljs-string">&#39;\u6E56\u5DDE&#39;</span>],
\u798F\u5EFA: [<span class="hljs-string">&#39;\u798F\u5DDE&#39;</span>, <span class="hljs-string">&#39;\u53A6\u95E8&#39;</span>, <span class="hljs-string">&#39;\u8386\u7530&#39;</span>, <span class="hljs-string">&#39;\u4E09\u660E&#39;</span>, <span class="hljs-string">&#39;\u6CC9\u5DDE&#39;</span>],
};
<span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">columns</span>: [
{
<span class="hljs-attr">values</span>: <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(citys),
<span class="hljs-attr">className</span>: <span class="hljs-string">&#39;column1&#39;</span>,
},
{
<span class="hljs-attr">values</span>: citys[<span class="hljs-string">&#39;\u6D59\u6C5F&#39;</span>],
<span class="hljs-attr">className</span>: <span class="hljs-string">&#39;column2&#39;</span>,
<span class="hljs-attr">defaultIndex</span>: <span class="hljs-number">2</span>,
},
],
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;
picker.<span class="hljs-title function_">setColumnValues</span>(<span class="hljs-number">1</span>, citys[value[<span class="hljs-number">0</span>]]);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-xuan-xiang" tabindex="-1">\u7981\u7528\u9009\u9879</h3><p>\u9009\u9879\u53EF\u4EE5\u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u901A\u8FC7\u8BBE\u7F6E disabled \u6765\u7981\u7528\u8BE5\u9009\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">columns</span>: [
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u676D\u5DDE&#39;</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u5B81\u6CE2&#39;</span> },
{ <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span> },
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><p>\u5F53 Picker \u6570\u636E\u662F\u901A\u8FC7\u5F02\u6B65\u83B7\u53D6\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 <code>loading</code> \u5C5E\u6027\u663E\u793A\u52A0\u8F7D\u63D0\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span> <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span> <span class="hljs-attr">loading</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>columns</td><td>\u5BF9\u8C61\u6570\u7EC4\uFF0C\u914D\u7F6E\u6BCF\u4E00\u5217\u663E\u793A\u7684\u6570\u636E</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>show-toolbar</td><td>\u662F\u5426\u663E\u793A\u9876\u90E8\u680F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>toolbar-position</td><td>\u9876\u90E8\u680F\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A<code>bottom</code></td><td><em>string</em></td><td><code>top</code></td></tr><tr><td>title</td><td>\u9876\u90E8\u680F\u6807\u9898</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>value-key</td><td>\u9009\u9879\u5BF9\u8C61\u4E2D\uFF0C\u6587\u5B57\u5BF9\u5E94\u7684 key</td><td><em>string</em></td><td><code>text</code></td></tr><tr><td>item-height</td><td>\u9009\u9879\u9AD8\u5EA6</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>confirm-button-text</td><td>\u786E\u8BA4\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u786E\u8BA4</code></td></tr><tr><td>cancel-button-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>visible-item-count</td><td>\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570</td><td><em>number</em></td><td><code>6</code></td></tr><tr><td>default-index</td><td>\u5355\u5217\u9009\u62E9\u5668\u7684\u9ED8\u8BA4\u9009\u4E2D\u9879\u7D22\u5F15\uFF0C<br>\u591A\u5217\u9009\u62E9\u5668\u8BF7\u53C2\u8003\u4E0B\u65B9\u7684 Columns \u914D\u7F6E</td><td><em>number</em></td><td><code>0</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><p>Picker \u7EC4\u4EF6\u7684\u4E8B\u4EF6\u4F1A\u6839\u636E columns \u662F\u5355\u5217\u6216\u591A\u5217\u8FD4\u56DE\u4E0D\u540C\u7684\u53C2\u6570\u3002</p><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:confirm</td><td>\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1</td><td>\u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15<br>\u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>bind:cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1</td><td>\u5355\u5217\uFF1A\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15<br>\u591A\u5217\uFF1A\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>bind:change</td><td>\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1</td><td>\u5355\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u9009\u4E2D\u503C\uFF0C\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15<br>\u591A\u5217\uFF1APicker \u5B9E\u4F8B\uFF0C\u6240\u6709\u5217\u9009\u4E2D\u503C\uFF0C\u5F53\u524D\u5217\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="columns-shu-ju-jie-gou" tabindex="-1">Columns \u6570\u636E\u7ED3\u6784</h3><p>\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0C<code>columns</code>\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u914D\u7F6E\u6BCF\u4E00\u5217\uFF0C\u6BCF\u4E00\u5217\u6709\u4EE5\u4E0B<code>key</code>\u3002</p><table><thead><tr><th>key</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>values</td><td>\u5217\u4E2D\u5BF9\u5E94\u7684\u5907\u9009\u503C</td></tr><tr><td>defaultIndex</td><td>\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\uFF0C\u9ED8\u8BA4\u4E3A 0</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>active-class</td><td>\u9009\u4E2D\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>toolbar-class</td><td>\u9876\u90E8\u680F\u6837\u5F0F\u7C7B</td></tr><tr><td>column-class</td><td>\u5217\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 picker \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>getValues</td><td>-</td><td>values</td><td>\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>setValues</td><td>values</td><td>-</td><td>\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>getIndexes</td><td>-</td><td>indexes</td><td>\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>setIndexes</td><td>indexes</td><td>-</td><td>\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15</td></tr><tr><td>getColumnValue</td><td>columnIndex</td><td>value</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>setColumnValue</td><td>columnIndex, value</td><td>-</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503C</td></tr><tr><td>getColumnIndex</td><td>columnIndex</td><td>optionIndex</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td></tr><tr><td>setColumnIndex</td><td>columnIndex, optionIndex</td><td>-</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td></tr><tr><td>getColumnValues</td><td>columnIndex</td><td>values</td><td>\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879</td></tr><tr><td>setColumnValues</td><td>columnIndex, values</td><td>-</td><td>\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879</td></tr></tbody></table></div>`,16),tt=[at],nt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",st,tt))}},lt={class:"van-doc-markdown-body"},et=d(`<h1>Popup \u5F39\u51FA\u5C42</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5F39\u51FA\u5C42\u5BB9\u5668\uFF0C\u7528\u4E8E\u5C55\u793A\u5F39\u7A97\u3001\u4FE1\u606F\u63D0\u793A\u7B49\u5185\u5BB9\uFF0C\u652F\u6301\u591A\u4E2A\u5F39\u51FA\u5C42\u53E0\u52A0\u5C55\u793A\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-popup&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/popup/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>show</code>\u5C5E\u6027\u63A7\u5236\u5F39\u51FA\u5C42\u662F\u5426\u5C55\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5C55\u793A\u5F39\u51FA\u5C42&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;showPopup&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,
},
<span class="hljs-title function_">showPopup</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span> });
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="dan-chu-wei-zhi" tabindex="-1">\u5F39\u51FA\u4F4D\u7F6E</h3><p>\u901A\u8FC7<code>position</code>\u5C5E\u6027\u8BBE\u7F6E\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u5C45\u4E2D\u5F39\u51FA\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A<code>top</code>\u3001<code>bottom</code>\u3001<code>left</code>\u3001<code>right</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">position</span>=<span class="hljs-string">&quot;top&quot;</span>
<span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%;&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="guan-bi-tu-biao" tabindex="-1">\u5173\u95ED\u56FE\u6807</h3><p>\u8BBE\u7F6E<code>closeable</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u5F39\u51FA\u5C42\u7684\u53F3\u4E0A\u89D2\u663E\u793A\u5173\u95ED\u56FE\u6807\uFF0C\u5E76\u4E14\u53EF\u4EE5\u901A\u8FC7<code>close-icon</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u4F7F\u7528<code>close-icon-position</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u4F4D\u7F6E\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">closeable</span>
<span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>
<span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
/&gt;</span>
<span class="hljs-comment">&lt;!-- \u81EA\u5B9A\u4E49\u56FE\u6807 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">closeable</span>
<span class="hljs-attr">close-icon</span>=<span class="hljs-string">&quot;close&quot;</span>
<span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>
<span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
/&gt;</span>
<span class="hljs-comment">&lt;!-- \u56FE\u6807\u4F4D\u7F6E --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">closeable</span>
<span class="hljs-attr">close-icon-position</span>=<span class="hljs-string">&quot;top-left&quot;</span>
<span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>
<span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-dan-chuang" tabindex="-1">\u5706\u89D2\u5F39\u7A97</h3><p>\u8BBE\u7F6E<code>round</code>\u5C5E\u6027\u540E\uFF0C\u5F39\u7A97\u4F1A\u6839\u636E\u5F39\u51FA\u4F4D\u7F6E\u6DFB\u52A0\u4E0D\u540C\u7684\u5706\u89D2\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">round</span>
<span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>
<span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-zhi-gun-dong-chuan-tou" tabindex="-1">\u7981\u6B62\u6EDA\u52A8\u7A7F\u900F</h3><p>\u4F7F\u7528\u7EC4\u4EF6\u65F6\uFF0C\u4F1A\u53D1\u73B0\u5185\u5BB9\u90E8\u5206\u6EDA\u52A8\u5230\u5E95\u65F6\uFF0C\u7EE7\u7EED\u5212\u52A8\u4F1A\u5BFC\u81F4\u5E95\u5C42\u9875\u9762\u7684\u6EDA\u52A8\uFF0C\u8FD9\u5C31\u662F\u6EDA\u52A8\u7A7F\u900F\u3002</p><p>\u76EE\u524D\uFF0C\u7EC4\u4EF6\u53EF\u4EE5\u901A\u8FC7 <code>lock-scroll</code> \u5C5E\u6027\u5904\u7406\u90E8\u5206\u6EDA\u52A8\u7A7F\u900F\u95EE\u9898\u3002 <strong>\u4F46\u7531\u4E8E\u5C0F\u7A0B\u5E8F\u81EA\u8EAB\u539F\u56E0\uFF0C\u5F39\u7A97\u5185\u5BB9\u533A\u57DF\u4ECD\u4F1A\u51FA\u73B0\u6EDA\u52A8\u7A7F\u900F\u3002</strong> \u4E0D\u8FC7\uFF0C\u6211\u4EEC\u4E3A\u5F00\u53D1\u8005\u63D0\u4F9B\u4E86\u4E00\u4E2A\u63A8\u8350\u65B9\u6848\u4EE5\u5B8C\u6574\u89E3\u51B3\u6EDA\u52A8\u7A7F\u900F\uFF1A</p><h4 id="page-meta" tabindex="-1"><a href="https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html" target="_blank">page-meta</a></h4><p>\u5F53\u5C0F\u7A0B\u5E8F\u57FA\u7840\u5E93\u6700\u4F4E\u7248\u672C\u5728 2.9.0 \u4EE5\u4E0A\u65F6\uFF0C\u5373\u53EF\u4F7F\u7528 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html" target="_blank">page-meta</a> \u7EC4\u4EF6\u52A8\u6001\u4FEE\u6539\u9875\u9762\u6837\u5F0F</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- page-meta \u53EA\u80FD\u662F\u9875\u9762\u5185\u7684\u7B2C\u4E00\u4E2A\u8282\u70B9 --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">page-meta</span> <span class="hljs-attr">page-style</span>=<span class="hljs-string">&quot;{{ show ? &#39;overflow: hidden;&#39; : &#39;&#39; }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">catch:touchstart</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u5F39\u51FA\u5C42</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>position</td><td>\u5F39\u51FA\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>top</code> <code>bottom</code> <code>right</code> <code>left</code></td><td><em>string</em></td><td><code>center</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2</td><td><em>number | object</em></td><td><code>300</code></td></tr><tr><td>round</td><td>\u662F\u5426\u663E\u793A\u5706\u89D2</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u5F39\u51FA\u5C42\u6837\u5F0F</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>overlay-style</td><td>\u81EA\u5B9A\u4E49\u906E\u7F69\u5C42\u6837\u5F0F</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>closeable</td><td>\u662F\u5426\u663E\u793A\u5173\u95ED\u56FE\u6807</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>close-icon</td><td>\u5173\u95ED\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td><code>cross</code></td></tr><tr><td>close-icon-position</td><td>\u5173\u95ED\u56FE\u6807\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>top-left</code><br><code>bottom-left</code> <code>bottom-right</code></td><td><em>string</em></td><td><code>top-right</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-top</td><td>\u662F\u5426\u7559\u51FA\u9876\u90E8\u5B89\u5168\u8DDD\u79BB\uFF08\u72B6\u6001\u680F\u9AD8\u5EA6\uFF09</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>safe-area-tab-bar</td><td>\u662F\u5426\u7559\u51FA\u5E95\u90E8 tabbar \u5B89\u5168\u8DDD\u79BB\uFF08\u5728\u4F7F\u7528 tabbar \u7EC4\u4EF6 &amp; \u5C0F\u7A0B\u5E8F\u81EA\u5B9A\u4E49 tabbar \u65F6\uFF0Cpopup \u7EC4\u4EF6\u5C42\u7EA7\u65E0\u6CD5\u76D6\u4F4F tabbar\uFF09</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lock-scroll <code>v1.7.3</code></td><td>\u662F\u5426\u9501\u5B9A\u80CC\u666F\u6EDA\u52A8</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>root-portal <code>v1.10.14</code></td><td>\u662F\u5426\u4ECE\u9875\u9762\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 &gt;= <code>2.25.2 </code></td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:close</td><td>\u5173\u95ED\u5F39\u51FA\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:before-enter</td><td>\u8FDB\u5165\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:enter</td><td>\u8FDB\u5165\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-enter</td><td>\u8FDB\u5165\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:before-leave</td><td>\u79BB\u5F00\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:leave</td><td>\u79BB\u5F00\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-leave</td><td>\u79BB\u5F00\u540E\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,13),pt=[et],dt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",lt,pt))}},ct={class:"van-doc-markdown-body"},ot=d(`<h1>Progress \u8FDB\u5EA6\u6761</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u7684\u5F53\u524D\u8FDB\u5EA6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-progress&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/progress/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u4E3A\u84DD\u8272\uFF0C\u4F7F\u7528<code>percentage</code>\u5C5E\u6027\u6765\u8BBE\u7F6E\u5F53\u524D\u8FDB\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xian-tiao-cu-xi" tabindex="-1">\u7EBF\u6761\u7C97\u7EC6</h3><p>\u901A\u8FC7<code>stroke-width</code>\u53EF\u4EE5\u8BBE\u7F6E\u8FDB\u5EA6\u6761\u7684\u7C97\u7EC6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">:percentage</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">stroke-width</span>=<span class="hljs-string">&quot;8&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhi-hui" tabindex="-1">\u7F6E\u7070</h3><p>\u8BBE\u7F6E<code>inactive</code>\u5C5E\u6027\u540E\u8FDB\u5EA6\u6761\u5C06\u7F6E\u7070\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">inactive</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yang-shi-ding-zhi" tabindex="-1">\u6837\u5F0F\u5B9A\u5236</h3><p>\u53EF\u4EE5\u4F7F\u7528<code>pivot-text</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u6587\u5B57\uFF0C<code>color</code>\u5C5E\u6027\u81EA\u5B9A\u4E49\u8FDB\u5EA6\u6761\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;\u6A59\u8272&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#f2826a&quot;</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;25&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;\u7EA2\u8272&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span> <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span>
<span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;75&quot;</span>
<span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;\u7D2B\u8272&quot;</span>
<span class="hljs-attr">pivot-color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span>
<span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(to right, #be99ff, #7232dd)&quot;</span>
/&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>inactive</td><td>\u662F\u5426\u7F6E\u7070</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>percentage</td><td>\u8FDB\u5EA6\u767E\u5206\u6BD4</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>stroke-width</td><td>\u8FDB\u5EA6\u6761\u7C97\u7EC6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>4px</code></td></tr><tr><td>show-pivot</td><td>\u662F\u5426\u663E\u793A\u8FDB\u5EA6\u6587\u5B57</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>color</td><td>\u8FDB\u5EA6\u6761\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>text-color</td><td>\u8FDB\u5EA6\u6587\u5B57\u989C\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>track-color</td><td>\u8F68\u9053\u989C\u8272</td><td><em>string</em></td><td><code>#e5e5e5</code></td></tr><tr><td>pivot-text</td><td>\u6587\u5B57\u663E\u793A</td><td><em>string</em></td><td>\u767E\u5206\u6BD4\u6587\u5B57</td></tr><tr><td>pivot-color</td><td>\u6587\u5B57\u80CC\u666F\u8272</td><td><em>string</em></td><td>\u4E0E\u8FDB\u5EA6\u6761\u989C\u8272\u4E00\u81F4</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,11),rt=[ot],it={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ct,rt))}},ht={class:"van-doc-markdown-body"},ut=d(`<h1>Radio \u5355\u9009\u6846</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5728\u4E00\u7EC4\u5907\u9009\u9879\u4E2D\u8FDB\u884C\u5355\u9009\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-radio&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/radio/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-radio-group&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/radio-group/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u7ED1\u5B9A\u503C\u5F53\u524D\u9009\u4E2D\u9879\u7684 name \u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">radio</span>: <span class="hljs-string">&#39;1&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="shui-ping-pai-lie" tabindex="-1">\u6C34\u5E73\u6392\u5217</h3><p>\u5C06<code>direction</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>horizontal</code>\u540E\uFF0C\u5355\u9009\u6846\u7EC4\u4F1A\u53D8\u6210\u6C34\u5E73\u6392\u5217\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
<span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;horizontal&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7<code>disabled</code>\u5C5E\u6027\u7981\u6B62\u9009\u9879\u5207\u6362\uFF0C\u5728<code>Radio</code>\u4E0A\u8BBE\u7F6E<code>diabled</code>\u53EF\u4EE5\u7981\u7528\u5355\u4E2A\u9009\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xing-zhuang" tabindex="-1">\u81EA\u5B9A\u4E49\u5F62\u72B6</h3><p>\u5C06<code>shape</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>square</code>\uFF0C\u5355\u9009\u6846\u7684\u5F62\u72B6\u4F1A\u53D8\u6210\u65B9\u5F62\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;square&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><p>\u901A\u8FC7<code>checked-color</code>\u5C5E\u6027\u8BBE\u7F6E\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">checked-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">checked-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><p>\u901A\u8FC7<code>icon-size</code>\u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u56FE\u6807\u7684\u5927\u5C0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">&quot;24px&quot;</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">icon-size</span>=<span class="hljs-string">&quot;24px&quot;</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u901A\u8FC7<code>icon</code>\u63D2\u69FD\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u9700\u8981\u8BBE\u7F6E<code>use-icon-slot</code>\u5C5E\u6027\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">use-icon-slot</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>
\u81EA\u5B9A\u4E49\u56FE\u6807
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ radio === &#39;1&#39; ? icon.active : icon.normal }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">use-icon-slot</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>
\u81EA\u5B9A\u4E49\u56FE\u6807
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ radio === &#39;2&#39; ? icon.active : icon.normal }}&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">radio</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">icon</span>: {
<span class="hljs-attr">normal</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-normal.png&#39;</span>,
<span class="hljs-attr">active</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-active.png&#39;</span>,
},
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-wen-ben-dian-ji" tabindex="-1">\u7981\u7528\u6587\u672C\u70B9\u51FB</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>label-disabled</code>\u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u5355\u9009\u6846\u6587\u672C\u70B9\u51FB\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">label-disabled</span>&gt;</span>\u5355\u9009\u6846 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">label-disabled</span>&gt;</span>\u5355\u9009\u6846 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yu-cell-zu-jian-yi-qi-shi-yong" tabindex="-1">\u4E0E Cell \u7EC4\u4EF6\u4E00\u8D77\u4F7F\u7528</h3><p>\u6B64\u65F6\u4F60\u9700\u8981\u518D\u5F15\u5165<code>Cell</code>\u548C<code>CellGroup</code>\u7EC4\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u9009\u6846 1&quot;</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u9009\u6846 2&quot;</span> <span class="hljs-attr">clickable</span> <span class="hljs-attr">data-name</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-radio</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">radio</span>: <span class="hljs-string">&#39;1&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,
});
},
<span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { name } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">radio</span>: name,
});
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="radiogroup-props" tabindex="-1">RadioGroup Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u7684\u6807\u8BC6\u7B26</td><td><em>any</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6240\u6709\u5355\u9009\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>direction <code>v1.6.7</code></td><td>\u6392\u5217\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code></td><td><em>string</em></td><td><code>vertical</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radio-props" tabindex="-1">Radio Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A <code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-disabled</td><td>\u662F\u5426\u7981\u7528\u6587\u672C\u5185\u5BB9\u70B9\u51FB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-position</td><td>\u6587\u672C\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>left</code></td><td><em>string</em></td><td><code>right</code></td></tr><tr><td>icon-size</td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>20px</code></td></tr><tr><td>checked-color</td><td>\u9009\u4E2D\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>use-icon-slot</td><td>\u662F\u5426\u4F7F\u7528 icon \u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radio-event" tabindex="-1">Radio Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u7684 name</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radio-wai-bu-yang-shi-lei" tabindex="-1">Radio \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr><tr><td>label-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radiogroup-event" tabindex="-1">RadioGroup Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>\u5F53\u524D\u9009\u4E2D\u9879\u7684 name</td></tr></tbody></table></div>`,19),gt=[ut],jt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ht,gt))}},mt={class:"van-doc-markdown-body"},bt=d(`<h1>Rate \u8BC4\u5206</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5BF9\u4E8B\u7269\u8FDB\u884C\u8BC4\u7EA7\u64CD\u4F5C\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-rate&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/rate/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-number">3</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">value</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;like&quot;</span>
<span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;like-o&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">size</span>=<span class="hljs-string">&quot;{{ 25 }}&quot;</span>
<span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffd21e&quot;</span>
<span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;star&quot;</span>
<span class="hljs-attr">void-color</span>=<span class="hljs-string">&quot;#eee&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ban-xing" tabindex="-1">\u534A\u661F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">allow-half</span>
<span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;star&quot;</span>
<span class="hljs-attr">void-color</span>=<span class="hljs-string">&quot;#eee&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-number">2.5</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">value</span>: event.<span class="hljs-property">detail</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shu-liang" tabindex="-1">\u81EA\u5B9A\u4E49\u6570\u91CF</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">count</span>=<span class="hljs-string">&quot;{{ 6 }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhi-du-zhuang-tai" tabindex="-1">\u53EA\u8BFB\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">readonly</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jian-ting-change-shi-jian" tabindex="-1">\u76D1\u542C change \u4E8B\u4EF6</h3><p>\u8BC4\u5206\u53D8\u5316\u65F6\uFF0C\u4F1A\u89E6\u53D1 <code>change</code> \u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u5F53\u524D\u503C\uFF1A&#39;</span> + event.<span class="hljs-property">detail</span>);
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u5F53\u524D\u5206\u503C</td><td><em>number</em></td><td>-</td></tr><tr><td>count</td><td>\u56FE\u6807\u603B\u6570</td><td><em>number</em></td><td><code>5</code></td></tr><tr><td>size</td><td>\u56FE\u6807\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>20px</code></td></tr><tr><td>gutter</td><td>\u56FE\u6807\u95F4\u8DDD\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>4px</code></td></tr><tr><td>color</td><td>\u9009\u4E2D\u65F6\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#ffd21e</code></td></tr><tr><td>void-color</td><td>\u672A\u9009\u4E2D\u65F6\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#c7c7c7</code></td></tr><tr><td>icon</td><td>\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>star</code></td></tr><tr><td>void-icon</td><td>\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>star-o</code></td></tr><tr><td>allow-half</td><td>\u662F\u5426\u5141\u8BB8\u534A\u9009</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>\u662F\u5426\u4E3A\u53EA\u8BFB\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8BC4\u5206</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled-color</td><td>\u7981\u7528\u65F6\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#bdbdbd</code></td></tr><tr><td>touchable</td><td>\u662F\u5426\u53EF\u4EE5\u901A\u8FC7\u6ED1\u52A8\u624B\u52BF\u9009\u62E9\u8BC4\u5206</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u524D\u5206\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail:\u5F53\u524D\u5206\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>icon-class</td><td>\u56FE\u6807\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,16),vt=[bt],qt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",mt,vt))}},ft={class:"van-doc-markdown-body"},yt=d(`<h1>Search \u641C\u7D22</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u641C\u7D22\u573A\u666F\u7684\u8F93\u5165\u6846\u7EC4\u4EF6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-search&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/search/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p><code>van-search</code> \u4E2D\uFF0Cvalue \u7528\u4E8E\u63A7\u5236\u641C\u7D22\u6846\u4E2D\u7684\u6587\u5B57\u3002background \u53EF\u4EE5\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5916\u90E8\u80CC\u666F\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="shi-jian-jian-ting" tabindex="-1">\u4E8B\u4EF6\u76D1\u542C</h3><p><code>van-search</code> \u63D0\u4F9B\u4E86 search \u548C cancel \u4E8B\u4EF6\u3002search \u4E8B\u4EF6\u5728\u7528\u6237\u70B9\u51FB\u952E\u76D8\u4E0A\u7684\u641C\u7D22\u6309\u94AE\u89E6\u53D1\u3002cancel \u4E8B\u4EF6\u5728\u7528\u6237\u70B9\u51FB\u641C\u7D22\u6846\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>
<span class="hljs-attr">show-action</span>
<span class="hljs-attr">bind:search</span>=<span class="hljs-string">&quot;onSearch&quot;</span>
<span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="sou-suo-kuang-nei-rong-dui-qi" tabindex="-1">\u641C\u7D22\u6846\u5185\u5BB9\u5BF9\u9F50</h3><p>\u901A\u8FC7 <code>input-align</code> \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5185\u5BB9\u7684\u5BF9\u9F50\u65B9\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">input-align</span>=<span class="hljs-string">&quot;center&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-sou-suo-kuang" tabindex="-1">\u7981\u7528\u641C\u7D22\u6846</h3><p>\u901A\u8FC7 <code>disabled</code> \u5C5E\u6027\u53EF\u4EE5\u5C06\u7EC4\u4EF6\u8BBE\u7F6E\u4E3A\u7981\u7528\u72B6\u6001\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-bei-jing-se" tabindex="-1">\u81EA\u5B9A\u4E49\u80CC\u666F\u8272</h3><p>\u901A\u8FC7<code>background</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u641C\u7D22\u6846\u5916\u90E8\u7684\u80CC\u666F\u8272\uFF0C\u901A\u8FC7<code>shape</code>\u5C5E\u6027\u8BBE\u7F6E\u641C\u7D22\u6846\u7684\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A<code>round</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;round&quot;</span>
<span class="hljs-attr">background</span>=<span class="hljs-string">&quot;#4fc08d&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE</h3><p><code>van-search</code> \u652F\u6301\u81EA\u5B9A\u4E49\u53F3\u4FA7\u53D6\u6D88\u6309\u94AE\uFF0C\u4F7F\u7528\u540D\u5B57\u4E3A action \u7684 slot\uFF0C\u5E76\u8BBE\u7F6E use-action-slot \u4E3A true \u5373\u53EF\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>
<span class="hljs-attr">label</span>=<span class="hljs-string">&quot;\u5730\u5740&quot;</span>
<span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD&quot;</span>
<span class="hljs-attr">use-action-slot</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
<span class="hljs-attr">bind:search</span>=<span class="hljs-string">&quot;onSearch&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;action&quot;</span> <span class="hljs-attr">bind:tap</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>\u641C\u7D22<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-search</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-string">&#39;&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">value</span>: e.<span class="hljs-property">detail</span>,
});
},
<span class="hljs-title function_">onSearch</span>(<span class="hljs-params"></span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u641C\u7D22&#39;</span> + <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">value</span>);
},
<span class="hljs-title function_">onClick</span>(<span class="hljs-params"></span>) {
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u641C\u7D22&#39;</span> + <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">value</span>);
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>label</td><td>\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A <code>round</code></td><td><em>string</em></td><td><code>square</code></td></tr><tr><td>value</td><td>\u5F53\u524D\u8F93\u5165\u7684\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>background</td><td>\u641C\u7D22\u6846\u80CC\u666F\u8272</td><td><em>string</em></td><td><code>#f2f2f2</code></td></tr><tr><td>show-action</td><td>\u662F\u5426\u5728\u641C\u7D22\u6846\u53F3\u4FA7\u663E\u793A\u53D6\u6D88\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>action-text <code>v1.0.0</code></td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>\u53D6\u6D88</code></td></tr><tr><td>focus</td><td>\u83B7\u53D6\u7126\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error</td><td>\u662F\u5426\u5C06\u8F93\u5165\u5185\u5BB9\u6807\u7EA2</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8F93\u5165\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>\u662F\u5426\u53EA\u8BFB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clearable</td><td>\u662F\u5426\u542F\u7528\u6E05\u9664\u63A7\u4EF6</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>clear-trigger <code>v1.8.4</code></td><td>\u663E\u793A\u6E05\u9664\u56FE\u6807\u7684\u65F6\u673A\uFF0C<code>always</code> \u8868\u793A\u8F93\u5165\u6846\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A\uFF0C<br><code>focus</code> \u8868\u793A\u8F93\u5165\u6846\u805A\u7126\u4E14\u4E0D\u4E3A\u7A7A\u65F6\u5C55\u793A</td><td><em>string</em></td><td><code>focus</code></td></tr><tr><td>clear-icon <code>v1.8.4</code></td><td>\u6E05\u9664<a href="#/icon" target="_blank">\u56FE\u6807\u540D\u79F0</a>\u6216\u56FE\u7247\u94FE\u63A5</td><td><em>string</em></td><td><code>clear</code></td></tr><tr><td>maxlength</td><td>\u6700\u5927\u8F93\u5165\u957F\u5EA6\uFF0C\u8BBE\u7F6E\u4E3A -1 \u7684\u65F6\u5019\u4E0D\u9650\u5236\u6700\u5927\u957F\u5EA6</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>use-action-slot</td><td>\u662F\u5426\u4F7F\u7528 action slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>placeholder</td><td>\u8F93\u5165\u6846\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>placeholder-style</td><td>\u6307\u5B9A\u5360\u4F4D\u7B26\u7684\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr><tr><td>input-align</td><td>\u8F93\u5165\u6846\u5185\u5BB9\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td><td><em>string</em></td><td><code>left</code></td></tr><tr><td>use-left-icon-slot</td><td>\u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807 slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-right-icon-slot</td><td>\u662F\u5426\u4F7F\u7528\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807 slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>left-icon</td><td>\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6\uFF08\u5982\u679C\u8BBE\u7F6E\u4E86 use-left-icon-slot\uFF0C\u5219\u8BE5\u5C5E\u6027\u65E0\u6548\uFF09</td><td><em>string</em></td><td><code>search</code></td></tr><tr><td>right-icon</td><td>\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 Icon \u7EC4\u4EF6\uFF08\u5982\u679C\u8BBE\u7F6E\u4E86 use-right-icon-slot\uFF0C\u5219\u8BE5\u5C5E\u6027\u65E0\u6548\uFF09</td><td><em>string</em></td><td>-</td></tr><tr><td>cursor-spacing</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u5E95\u90E8\u4E0E\u952E\u76D8\u7684\u8DDD\u79BB</td><td><em>number</em></td><td><code>0</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:search</td><td>\u786E\u5B9A\u641C\u7D22\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:change</td><td>\u8F93\u5165\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u503C</td></tr><tr><td>bind:cancel</td><td>\u53D6\u6D88\u641C\u7D22\u641C\u7D22\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:focus</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:blur</td><td>\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:clear</td><td>\u70B9\u51FB\u6E05\u7A7A\u63A7\u4EF6\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-input</td><td>\u70B9\u51FB\u641C\u7D22\u533A\u57DF\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>action</td><td>\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u53F3\u4FA7\u6309\u94AE\uFF0C\u9700\u8981\u5728<code>use-action-slot</code>\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A</td></tr><tr><td>label</td><td>\u81EA\u5B9A\u4E49\u641C\u7D22\u6846\u5DE6\u4FA7\u6587\u672C</td></tr><tr><td>left-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u5DE6\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728<code>use-left-icon-slot</code>\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A</td></tr><tr><td>right-icon</td><td>\u81EA\u5B9A\u4E49\u8F93\u5165\u6846\u53F3\u4FA7\u56FE\u6807\uFF0C\u9700\u8981\u5728<code>use-right-icon-slot</code>\u4E3A true \u65F6\u624D\u4F1A\u663E\u793A</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>field-class</td><td>\u641C\u7D22\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>input-class</td><td>\u8F93\u5165\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>cancel-class</td><td>\u53D6\u6D88\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,15),_t=[yt],xt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",ft,_t))}},wt={class:"van-doc-markdown-body"},kt=d(`<h1>ShareSheet \u5206\u4EAB\u9762\u677F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5E95\u90E8\u5F39\u8D77\u7684\u5206\u4EAB\u9762\u677F\uFF0C\u7528\u4E8E\u5C55\u793A\u5404\u5206\u4EAB\u6E20\u9053\u5BF9\u5E94\u7684\u64CD\u4F5C\u6309\u94AE\uFF0C\u4E0D\u542B\u5177\u4F53\u7684\u5206\u4EAB\u903B\u8F91\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-share-sheet&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/share-sheet/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u5206\u4EAB\u9762\u677F\u901A\u8FC7 <code>options</code> \u5C5E\u6027\u6765\u5B9A\u4E49\u5206\u4EAB\u9009\u9879\uFF0C\u6570\u7EC4\u7684\u6BCF\u4E00\u9879\u662F\u4E00\u4E2A\u5BF9\u8C61\uFF0C\u5BF9\u8C61\u683C\u5F0F\u89C1\u6587\u6863\u4E0B\u65B9\u8868\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u663E\u793A\u5206\u4EAB\u9762\u677F&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB&quot;</span>
<span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>
<span class="hljs-attr">bind:select</span>=<span class="hljs-string">&quot;onSelect&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">options</span>: [
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u4FE1&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span>, <span class="hljs-attr">openType</span>: <span class="hljs-string">&#39;share&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u535A&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u590D\u5236\u94FE\u63A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5206\u4EAB\u6D77\u62A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E8C\u7EF4\u7801&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</span> },
],
},
<span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">showShare</span>: <span class="hljs-literal">true</span> });
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span> });
},
<span class="hljs-title function_">onSelect</span>(<span class="hljs-params">event</span>) {
<span class="hljs-title class_">Toast</span>(event.<span class="hljs-property">detail</span>.<span class="hljs-property">name</span>);
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onClose</span>();
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-duo-xing-xuan-xiang" tabindex="-1">\u5C55\u793A\u591A\u884C\u9009\u9879</h3><p>\u5F53\u5206\u4EAB\u9009\u9879\u7684\u6570\u91CF\u8F83\u591A\u65F6\uFF0C\u53EF\u4EE5\u5C06 <code>options</code> \u5B9A\u4E49\u4E3A\u6570\u7EC4\u5D4C\u5957\u7684\u683C\u5F0F\uFF0C\u6BCF\u4E2A\u5B50\u6570\u7EC4\u4F1A\u4F5C\u4E3A\u4E00\u884C\u9009\u9879\u5C55\u793A\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB&quot;</span>
<span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">options</span>: [
[
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u4FE1&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u535A&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;QQ&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qq&#39;</span> },
],
[
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u590D\u5236\u94FE\u63A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5206\u4EAB\u6D77\u62A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E8C\u7EF4\u7801&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</span> },
],
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u9664\u4E86\u4F7F\u7528\u5185\u7F6E\u7684\u51E0\u79CD\u56FE\u6807\u5916\uFF0C\u53EF\u4EE5\u76F4\u63A5\u5728 <code>icon</code> \u4E2D\u4F20\u5165\u56FE\u7247 URL \u6765\u4F7F\u7528\u81EA\u5B9A\u4E49\u7684\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u540D\u79F0&#39;</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-fire.png&#39;</span>,
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u540D\u79F0&#39;</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-light.png&#39;</span>,
},
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u540D\u79F0&#39;</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-water.png&#39;</span>,
},
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-miao-shu-xin-xi" tabindex="-1">\u5C55\u793A\u63CF\u8FF0\u4FE1\u606F</h3><p>\u901A\u8FC7 <code>description</code> \u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u6807\u9898\u4E0B\u65B9\u7684\u63CF\u8FF0\u6587\u5B57, \u5728 <code>options</code> \u5185\u8BBE\u7F6E <code>description</code> \u5C5E\u6027\u53EF\u4EE5\u6DFB\u52A0\u5206\u4EAB\u9009\u9879\u63CF\u8FF0\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>
<span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>
<span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u7ACB\u5373\u5206\u4EAB\u7ED9\u597D\u53CB&quot;</span>
<span class="hljs-attr">description</span>=<span class="hljs-string">&quot;\u63CF\u8FF0\u4FE1\u606F&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">options</span>: [
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u4FE1&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5FAE\u535A&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },
{
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u590D\u5236\u94FE\u63A5&#39;</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span>,
<span class="hljs-attr">description</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
},
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u5206\u4EAB\u6D77\u62A5&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },
{ <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u4E8C\u7EF4\u7801&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</span> },
],
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>show</td><td>\u662F\u5426\u663E\u793A\u5206\u4EAB\u9762\u677F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>options</td><td>\u5206\u4EAB\u9009\u9879</td><td><em>Option[]</em></td><td><code>[]</code></td></tr><tr><td>title</td><td>\u9876\u90E8\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>cancel-text</td><td>\u53D6\u6D88\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td><code>&#39;\u53D6\u6D88&#39;</code></td></tr><tr><td>description</td><td>\u6807\u9898\u4E0B\u65B9\u7684\u8F85\u52A9\u63CF\u8FF0\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u6BEB\u79D2</td><td><em>number | string</em></td><td><code>300</code></td></tr><tr><td>overlay</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u5F00\u542F\u5E95\u90E8\u5B89\u5168\u533A\u9002\u914D</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>root-portal <code>v1.11.3</code></td><td>\u662F\u5426\u4ECE\u9875\u9762\u5B50\u6811\u4E2D\u8131\u79BB\u51FA\u6765\uFF0C\u7528\u4E8E\u89E3\u51B3\u5404\u79CD fixed \u5931\u6548\u95EE\u9898\uFF0C\u5FAE\u4FE1\u57FA\u7840\u5E93 &gt;= <code>2.25.2 </code></td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="option-shu-ju-jie-gou" tabindex="-1">Option \u6570\u636E\u7ED3\u6784</h3><p><code>options</code>\u5C5E\u6027\u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E2A\u5BF9\u8C61\u914D\u7F6E\u4E00\u5217\uFF0C\u5BF9\u8C61\u53EF\u4EE5\u5305\u542B\u4EE5\u4E0B\u503C\uFF1A</p><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>name</td><td>\u5206\u4EAB\u6E20\u9053\u540D\u79F0</td><td><em>string</em></td></tr><tr><td>description</td><td>\u5206\u4EAB\u9009\u9879\u63CF\u8FF0</td><td><em>string</em></td></tr><tr><td>icon</td><td>\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u4E3A <code>qq</code> <code>link</code> <code>weibo</code> <code>wechat</code> <code>poster</code> <code>qrcode</code> <code>weapp-qrcode</code> <code>wechat-moments</code>\uFF0C\u652F\u6301\u4F20\u5165\u56FE\u7247 URL</td><td><em>string</em></td></tr><tr><td>openType</td><td>\u6309\u94AE <code>open-type</code>\uFF0C\u53EF\u7528\u4E8E\u5B9E\u73B0\u5206\u4EAB\u529F\u80FD\uFF0C\u53EF\u9009\u503C\u4E3A <code>share</code></td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:select</td><td>\u70B9\u51FB\u5206\u4EAB\u9009\u9879\u65F6\u89E6\u53D1</td><td><em>option: Option, index: number</em></td></tr><tr><td>bind:close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:cancel</td><td>\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:click-overlay</td><td>\u70B9\u51FB\u906E\u7F69\u5C42\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u9876\u90E8\u6807\u9898</td></tr><tr><td>description</td><td>\u81EA\u5B9A\u4E49\u63CF\u8FF0\u6587\u5B57</td></tr></tbody></table></div>`,13),zt=[kt],Ct={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",wt,zt))}},Pt={class:"van-doc-markdown-body"},St=d(`<h1>Sidebar \u4FA7\u8FB9\u5BFC\u822A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5782\u76F4\u5C55\u793A\u7684\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-sidebar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/sidebar/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-sidebar-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/sidebar-item/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7\u5728<code>van-sidebar</code>\u4E0A\u8BBE\u7F6E<code>activeKey</code>\u5C5E\u6027\u6765\u63A7\u5236\u9009\u4E2D\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">activeKey</span>: <span class="hljs-number">0</span>,
},
});
</code></pre></div><div class="van-doc-card"><h3 id="hui-biao-ti-shi" tabindex="-1">\u5FBD\u6807\u63D0\u793A</h3><p>\u8BBE\u7F6E<code>dot</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u4E00\u4E2A\u5C0F\u7EA2\u70B9\u3002\u8BBE\u7F6E<code>badge</code>\u5C5E\u6027\u540E\uFF0C\u4F1A\u5728\u53F3\u4E0A\u89D2\u5C55\u793A\u76F8\u5E94\u7684\u5FBD\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-xuan-xiang" tabindex="-1">\u7981\u7528\u9009\u9879</h3><p>\u901A\u8FC7<code>disabled</code>\u5C5E\u6027\u7981\u7528\u9009\u9879\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jian-ting-qie-huan-shi-jian" tabindex="-1">\u76D1\u542C\u5207\u6362\u4E8B\u4EF6</h3><p>\u8BBE\u7F6E<code>change</code>\u65B9\u6CD5\u6765\u76D1\u542C\u5207\u6362\u5BFC\u822A\u9879\u65F6\u7684\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar</span> <span class="hljs-attr">active-key</span>=<span class="hljs-string">&quot;{{ activeKey }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D 1&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D 2&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E\u540D 3&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-notify</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-notify&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Notify</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/notify/notify&#39;</span>;
<span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">activeKey</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-title class_">Notify</span>({ <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>, <span class="hljs-attr">message</span>: event.<span class="hljs-property">detail</span> });
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="sidebar-props" tabindex="-1">Sidebar Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>activeKey</td><td>\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td><td><em>string | number</em></td><td><code>0</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebar-event" tabindex="-1">Sidebar Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>change</td><td>\u5207\u6362\u5FBD\u7AE0\u65F6\u89E6\u53D1</td><td>\u5F53\u524D\u9009\u4E2D\u5FBD\u7AE0\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebar-wai-bu-yang-shi-lei" tabindex="-1">Sidebar \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-props" tabindex="-1">SidebarItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u5185\u5BB9</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u53F3\u4E0A\u89D2\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9\uFF08\u5DF2\u5E9F\u5F03\uFF0C\u8BF7\u4F7F\u7528 badge \u5C5E\u6027\uFF09</td><td><em>string | number</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>badge <code>v1.5.0</code></td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u5FBD\u6807\u7684\u5185\u5BB9</td><td><em>string | number</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u8BE5\u9879</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-slot" tabindex="-1">SidebarItem Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>title</td><td>\u81EA\u5B9A\u4E49\u6807\u9898\u680F\uFF0C\u5982\u679C\u8BBE\u7F6E\u4E86<code>title</code>\u5C5E\u6027\u5219\u4E0D\u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-event" tabindex="-1">SidebarItem Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB\u5FBD\u7AE0\u65F6\u89E6\u53D1</td><td><code>event.detail</code> \u4E3A\u5F53\u524D\u5FBD\u7AE0\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-wai-bu-yang-shi-lei" tabindex="-1">SidebarItem \u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,16),Dt=[St],It={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Pt,Dt))}},Tt={class:"van-doc-markdown-body"},$t=d(`<h1>Skeleton \u9AA8\u67B6\u5C4F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5728\u5185\u5BB9\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u5C55\u793A\u4E00\u7EC4\u5360\u4F4D\u56FE\u5F62\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-skeleton&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/skeleton/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>title</code>\u5C5E\u6027\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE\uFF0C\u901A\u8FC7<code>row</code>\u5C5E\u6027\u914D\u7F6E\u5360\u4F4D\u6BB5\u843D\u884C\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">row</span>=<span class="hljs-string">&quot;3&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xian-shi-tou-xiang" tabindex="-1">\u663E\u793A\u5934\u50CF</h3><p>\u901A\u8FC7<code>avatar</code>\u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">avatar</span> <span class="hljs-attr">row</span>=<span class="hljs-string">&quot;3&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-zi-zu-jian" tabindex="-1">\u5C55\u793A\u5B50\u7EC4\u4EF6</h3><p>\u5C06<code>loading</code>\u5C5E\u6027\u8BBE\u7F6E\u6210<code>false</code>\u8868\u793A\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\uFF0C\u6B64\u65F6\u4F1A\u9690\u85CF\u5360\u4F4D\u56FE\uFF0C\u5E76\u663E\u793A<code>Skeleton</code>\u7684\u5B50\u7EC4\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-skeleton</span> <span class="hljs-attr">title</span> <span class="hljs-attr">avatar</span> <span class="hljs-attr">row</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">loading</span>=<span class="hljs-string">&quot;{{ loading }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\u5B9E\u9645\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-skeleton</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span>,
},
<span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span>,
});
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>row</td><td>\u6BB5\u843D\u5360\u4F4D\u56FE\u884C\u6570</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>row-width</td><td>\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6\uFF0C\u53EF\u4F20\u6570\u7EC4\u6765\u8BBE\u7F6E\u6BCF\u4E00\u884C\u7684\u5BBD\u5EA6</td><td><em>string | string[]</em></td><td><code>100%</code></td></tr><tr><td>title</td><td>\u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-width</td><td>\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6</td><td><em>string | number</em></td><td><code>40%</code></td></tr><tr><td>avatar</td><td>\u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>avatar-size</td><td>\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0F</td><td><em>string | number</em></td><td><code>32px</code></td></tr><tr><td>avatar-shape</td><td>\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A<code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u5360\u4F4D\u56FE\uFF0C\u4F20<code>false</code>\u65F6\u4F1A\u5C55\u793A\u5B50\u7EC4\u4EF6\u5185\u5BB9</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>animate</td><td>\u662F\u5426\u5F00\u542F\u52A8\u753B</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>row-class</td><td>\u6BB5\u843D\u5360\u4F4D\u6837\u5F0F\u7C7B</td></tr><tr><td>avatar-class</td><td>\u5934\u50CF\u5360\u4F4D\u6837\u5F0F\u7C7B</td></tr><tr><td>title-class</td><td>\u6807\u9898\u5360\u4F4D\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,10),At=[$t],Et={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Tt,At))}},Ft={class:"van-doc-markdown-body"},Bt=d(`<h1>Slider \u6ED1\u5757</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u6ED1\u52A8\u8F93\u5165\u6761\uFF0C\u7528\u4E8E\u5728\u7ED9\u5B9A\u7684\u8303\u56F4\u5185\u9009\u62E9\u4E00\u4E2A\u503C\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-slider&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/slider/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">\u57FA\u672C\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">\${event.detail}</span>\`</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="shuang-hua-kuai" tabindex="-1">\u53CC\u6ED1\u5757</h3><p>\u6DFB\u52A0 <code>range</code> \u5C5E\u6027\u5C31\u53EF\u4EE5\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F\uFF0C\u786E\u4FDD <code>value</code> \u7684\u503C\u662F\u4E00\u4E2A\u6570\u7EC4\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ [10, 50] }}&quot;</span> <span class="hljs-attr">range</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">\${event.detail}</span>\`</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-xuan-ze-fan-wei" tabindex="-1">\u6307\u5B9A\u9009\u62E9\u8303\u56F4</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;-50&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;50&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong" tabindex="-1">\u7981\u7528</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-bu-chang" tabindex="-1">\u6307\u5B9A\u6B65\u957F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;10&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">bar-height</span>=<span class="hljs-string">&quot;4px&quot;</span> <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu" tabindex="-1">\u81EA\u5B9A\u4E49\u6309\u94AE</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentValue }}&quot;</span> <span class="hljs-attr">use-button-slot</span> <span class="hljs-attr">bind:drag</span>=<span class="hljs-string">&quot;onDrag&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-button&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;button&quot;</span>&gt;</span>{{ currentValue }}/100<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-slider</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">currentValue</span>: <span class="hljs-number">50</span>,
},
<span class="hljs-title function_">onDrag</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">currentValue</span>: event.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-fang-xiang" tabindex="-1">\u5782\u76F4\u65B9\u5411</h3><p>\u8BBE\u7F6E <code>vertical</code> \u5C5E\u6027\u540E\uFF0C\u6ED1\u5757\u4F1A\u5782\u76F4\u5C55\u793A\uFF0C\u4E14\u9AD8\u5EA6\u4E3A 100% \u7236\u5143\u7D20\u9AD8\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 150px;&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span> <span class="hljs-attr">vertical</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span>
<span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ [10, 50] }}&quot;</span>
<span class="hljs-attr">range</span>
<span class="hljs-attr">vertical</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-left: 100px;&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u5F53\u524D\u503C\uFF1A<span class="hljs-subst">\${event.detail}</span>\`</span>,
});
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>value</td><td>\u5F53\u524D\u8FDB\u5EA6\u767E\u5206\u6BD4\uFF0C\u5728\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\u4E3A\u6570\u7EC4\u683C\u5F0F</td><td><em>number | number[]</em></td><td><code>0</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6ED1\u5757</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>max</td><td>\u6700\u5927\u503C</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>min</td><td>\u6700\u5C0F\u503C</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>step</td><td>\u6B65\u957F</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>bar-height</td><td>\u8FDB\u5EA6\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>2px</code></td></tr><tr><td>active-color</td><td>\u8FDB\u5EA6\u6761\u6FC0\u6D3B\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>\u8FDB\u5EA6\u6761\u9ED8\u8BA4\u989C\u8272</td><td><em>string</em></td><td><code>#e5e5e5</code></td></tr><tr><td>use-button-slot</td><td>\u662F\u5426\u4F7F\u7528\u6309\u94AE\u63D2\u69FD</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>range <code>v1.8.4</code></td><td>\u662F\u5426\u5F00\u542F\u53CC\u6ED1\u5757\u6A21\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>vertical <code>v1.8.5</code></td><td>\u662F\u5426\u5782\u76F4\u5C55\u793A</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:drag</td><td>\u62D6\u52A8\u8FDB\u5EA6\u6761\u65F6\u89E6\u53D1</td><td>event.detail.value: \u5F53\u524D\u8FDB\u5EA6</td></tr><tr><td>bind:change</td><td>\u8FDB\u5EA6\u503C\u6539\u53D8\u540E\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u8FDB\u5EA6</td></tr><tr><td>bind:drag-start</td><td>\u5F00\u59CB\u62D6\u52A8\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:drag-end</td><td>\u7ED3\u675F\u62D6\u52A8\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>button</td><td>\u81EA\u5B9A\u4E49\u6ED1\u5757\u6309\u94AE</td><td><em>{ value: number }</em></td></tr><tr><td>left-button <code>v1.8.4</code></td><td>\u81EA\u5B9A\u4E49\u5DE6\u4FA7\u6ED1\u5757\u6309\u94AE\uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09</td><td><em>{ value: number }</em></td></tr><tr><td>right-button <code>v1.8.4</code></td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u6ED1\u5757\u6309\u94AE \uFF08\u53CC\u6ED1\u5757\u6A21\u5F0F\u4E0B\uFF09</td><td><em>{ value: number }</em></td></tr></tbody></table></div>`,17),Rt=[Bt],Nt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ft,Rt))}},Mt={class:"van-doc-markdown-body"},Lt=d(`<h1>Stepper \u6B65\u8FDB\u5668</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u6B65\u8FDB\u5668\u7531\u589E\u52A0\u6309\u94AE\u3001\u51CF\u5C11\u6309\u94AE\u548C\u8F93\u5165\u6846\u7EC4\u6210\uFF0C\u7528\u4E8E\u5728\u4E00\u5B9A\u8303\u56F4\u5185\u8F93\u5165\u3001\u8C03\u6574\u6570\u5B57\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-stepper&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/stepper/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>value</code>\u8BBE\u7F6E\u8F93\u5165\u503C\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>change</code>\u4E8B\u4EF6\u76D1\u542C\u5230\u8F93\u5165\u503C\u7684\u53D8\u5316\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="bu-chang-she-zhi" tabindex="-1">\u6B65\u957F\u8BBE\u7F6E</h3><p>\u901A\u8FC7<code>step</code>\u5C5E\u6027\u8BBE\u7F6E\u6BCF\u6B21\u70B9\u51FB\u589E\u52A0\u6216\u51CF\u5C11\u6309\u94AE\u65F6\u53D8\u5316\u7684\u503C\uFF0C\u9ED8\u8BA4\u4E3A<code>1</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;2&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shu-ru-fan-wei" tabindex="-1">\u9650\u5236\u8F93\u5165\u8303\u56F4</h3><p>\u901A\u8FC7<code>min</code>\u548C<code>max</code>\u5C5E\u6027\u9650\u5236\u8F93\u5165\u503C\u7684\u8303\u56F4\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 5 }}&quot;</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;5&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;8&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shu-ru-zheng-shu" tabindex="-1">\u9650\u5236\u8F93\u5165\u6574\u6570</h3><p>\u8BBE\u7F6E<code>integer</code>\u5C5E\u6027\u540E\uFF0C\u8F93\u5165\u6846\u5C06\u9650\u5236\u53EA\u80FD\u8F93\u5165\u6574\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">integer</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>disabled</code>\u5C5E\u6027\u6765\u7981\u7528\u6B65\u8FDB\u5668\uFF0C\u7981\u7528\u72B6\u6001\u4E0B\u65E0\u6CD5\u70B9\u51FB\u6309\u94AE\u6216\u4FEE\u6539\u8F93\u5165\u6846\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="guan-bi-chang-an" tabindex="-1">\u5173\u95ED\u957F\u6309</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>long-press</code>\u5C5E\u6027\u51B3\u5B9A\u6B65\u8FDB\u5668\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">long-press</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="gu-ding-xiao-shu-wei-shu" tabindex="-1">\u56FA\u5B9A\u5C0F\u6570\u4F4D\u6570</h3><p>\u901A\u8FC7\u8BBE\u7F6E<code>decimal-length</code>\u5C5E\u6027\u53EF\u4EE5\u4FDD\u7559\u56FA\u5B9A\u7684\u5C0F\u6570\u4F4D\u6570\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;0.2&quot;</span> <span class="hljs-attr">decimal-length</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-bian-geng" tabindex="-1">\u5F02\u6B65\u53D8\u66F4</h3><p>\u5982\u679C\u9700\u8981\u5F02\u6B65\u5730\u4FEE\u6539\u8F93\u5165\u6846\u7684\u503C\uFF0C\u53EF\u4EE5\u8BBE\u7F6E<code>async-change</code>\u5C5E\u6027\uFF0C\u5E76\u5728<code>change</code>\u4E8B\u4EF6\u4E2D\u624B\u52A8\u4FEE\u6539<code>value</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span> <span class="hljs-attr">async-change</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">value</span>) {
<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({ <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span> });
<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {
<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">clear</span>();
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ value });
}, <span class="hljs-number">500</span>);
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><p>\u901A\u8FC7<code>input-width</code>\u5C5E\u6027\u8BBE\u7F6E\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u901A\u8FC7<code>button-size</code>\u5C5E\u6027\u8BBE\u7F6E\u6309\u94AE\u5927\u5C0F\u548C\u8F93\u5165\u6846\u9AD8\u5EA6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-stepper</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ 1 }}&quot;</span> <span class="hljs-attr">input-width</span>=<span class="hljs-string">&quot;40px&quot;</span> <span class="hljs-attr">button-size</span>=<span class="hljs-string">&quot;32px&quot;</span> /&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>\u8F93\u5165\u503C</td><td><em>string | number</em></td><td>\u6700\u5C0F\u503C</td></tr><tr><td>min</td><td>\u6700\u5C0F\u503C</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>max</td><td>\u6700\u5927\u503C</td><td><em>string | number</em></td><td>-</td></tr><tr><td>step</td><td>\u6B65\u957F</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>integer</td><td>\u662F\u5426\u53EA\u5141\u8BB8\u8F93\u5165\u6574\u6570</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disable-input</td><td>\u662F\u5426\u7981\u7528\u8F93\u5165\u6846</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>async-change</td><td>\u662F\u5426\u5F00\u542F\u5F02\u6B65\u53D8\u66F4\uFF0C\u5F00\u542F\u540E\u9700\u8981\u624B\u52A8\u63A7\u5236\u8F93\u5165\u503C</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>input-width</td><td>\u8F93\u5165\u6846\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code></td><td><em>string | number</em></td><td><code>32px</code></td></tr><tr><td>button-size</td><td>\u6309\u94AE\u5927\u5C0F\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A <code>px</code>\uFF0C\u8F93\u5165\u6846\u9AD8\u5EA6\u4F1A\u548C\u6309\u94AE\u5927\u5C0F\u4FDD\u6301\u4E00\u81F4</td><td><em>string | number</em></td><td><code>28px</code></td></tr><tr><td>show-plus</td><td>\u662F\u5426\u663E\u793A\u589E\u52A0\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-minus</td><td>\u662F\u5426\u663E\u793A\u51CF\u5C11\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>decimal-length</td><td>\u56FA\u5B9A\u663E\u793A\u7684\u5C0F\u6570\u4F4D\u6570</td><td><em>number</em></td><td>-</td></tr><tr><td>theme</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A <code>round</code></td><td><em>string</em></td><td>-</td></tr><tr><td>disable-plus</td><td>\u662F\u5426\u7981\u7528\u589E\u52A0\u6309\u94AE</td><td><em>boolean</em></td><td>-</td></tr><tr><td>disable-minus</td><td>\u662F\u5426\u7981\u7528\u51CF\u5C11\u6309\u94AE</td><td><em>boolean</em></td><td>-</td></tr><tr><td>long-press</td><td>\u662F\u5426\u5F00\u542F\u957F\u6309\u624B\u52BF</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>always-embed <code>v1.9.3</code></td><td>\u5F3A\u5236 input \u5904\u4E8E\u540C\u5C42\u72B6\u6001\uFF0C\u9ED8\u8BA4 focus \u65F6 input \u4F1A\u5207\u5230\u975E\u540C\u5C42\u72B6\u6001 (\u4EC5\u5728 iOS \u4E0B\u751F\u6548)</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F53\u7ED1\u5B9A\u503C\u53D8\u5316\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail: \u5F53\u524D\u8F93\u5165\u7684\u503C</td></tr><tr><td>bind:overlimit</td><td>\u70B9\u51FB\u4E0D\u53EF\u7528\u7684\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:plus</td><td>\u70B9\u51FB\u589E\u52A0\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:minus</td><td>\u70B9\u51FB\u51CF\u5C11\u6309\u94AE\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:focus</td><td>\u8F93\u5165\u6846\u805A\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:blur</td><td>\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>plus</td><td>\u52A0\u53F7\u6309\u94AE</td></tr><tr><td>minus</td><td>\u51CF\u53F7\u6309\u94AE</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>input-class</td><td>\u8F93\u5165\u6846\u6837\u5F0F\u7C7B</td></tr><tr><td>plus-class</td><td>\u52A0\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr><tr><td>minus-class</td><td>\u51CF\u53F7\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,18),Vt=[Lt],Ut={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Mt,Vt))}},Ot={class:"van-doc-markdown-body"},Gt=d(`<h1>Steps \u6B65\u9AA4\u6761</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C55\u793A\u64CD\u4F5C\u6D41\u7A0B\u7684\u5404\u4E2A\u73AF\u8282\uFF0C\u8BA9\u7528\u6237\u4E86\u89E3\u5F53\u524D\u7684\u64CD\u4F5C\u5728\u6574\u4F53\u6D41\u7A0B\u4E2D\u7684\u4F4D\u7F6E\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-steps&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/steps/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-steps</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">steps</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E00&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E8C&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E09&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u56DB&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
},
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u6837\u5F0F</h3><p>\u53EF\u4EE5\u901A\u8FC7 <code>active-icon</code> \u548C <code>active-color</code> \u5C5E\u6027\u8BBE\u7F6E\u6FC0\u6D3B\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u548C\u989C\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-steps</span>
<span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span>
<span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>
<span class="hljs-attr">active-icon</span>=<span class="hljs-string">&quot;success&quot;</span>
<span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#38f&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u53EF\u4EE5\u901A\u8FC7 <code>inactiveIcon</code> \u548C <code>activeIcon</code> \u5C5E\u6027\u5206\u522B\u8BBE\u7F6E\u6BCF\u4E00\u9879\u7684\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-steps</span> <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">steps</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E00&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
<span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;location-o&#39;</span>,
<span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;success&#39;</span>,
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E8C&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
<span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;like-o&#39;</span>,
<span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;plus&#39;</span>,
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u4E09&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
<span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;star-o&#39;</span>,
<span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;cross&#39;</span>,
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6B65\u9AA4\u56DB&#39;</span>,
<span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;\u63CF\u8FF0\u4FE1\u606F&#39;</span>,
<span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;phone-o&#39;</span>,
<span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;fail&#39;</span>,
},
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="shu-xiang-bu-zou-tiao" tabindex="-1">\u7AD6\u5411\u6B65\u9AA4\u6761</h3><p>\u53EF\u4EE5\u901A\u8FC7\u8BBE\u7F6E<code>direction</code>\u5C5E\u6027\u6765\u6539\u53D8\u6B65\u9AA4\u6761\u7684\u663E\u793A\u65B9\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-steps</span>
<span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span>
<span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>
<span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;vertical&quot;</span>
<span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>
/&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="steps-props" tabindex="-1">Steps Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>active</td><td>\u5F53\u524D\u6B65\u9AA4</td><td><em>number</em></td><td>0</td></tr><tr><td>steps</td><td>\u6B65\u9AA4\u914D\u7F6E\u96C6\u5408\uFF0C\u89C1\u4E0B\u9762\u914D\u7F6E\u9879</td><td><em>Step \u914D\u7F6E\u9879\u6570\u7EC4</em></td><td><code>[]</code></td></tr><tr><td>direction</td><td>\u663E\u793A\u65B9\u5411\uFF0C\u53EF\u9009\u503C\u4E3A <code>horizontal</code> <code>vertical</code></td><td><em>string</em></td><td><code>horizontal</code></td></tr><tr><td>active-color</td><td>\u6FC0\u6D3B\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#07c160</code></td></tr><tr><td>inactive-color</td><td>\u672A\u6FC0\u6D3B\u72B6\u6001\u989C\u8272</td><td><em>string</em></td><td><code>#969799</code></td></tr><tr><td>active-icon</td><td>\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>checked</code></td></tr><tr><td>inactive-icon</td><td>\u672A\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click-step</td><td>\u70B9\u51FB\u6B65\u9AA4\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail:\u5F53\u524D\u6B65\u9AA4\u7684\u7D22\u5F15</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>desc-class</td><td>\u63CF\u8FF0\u4FE1\u606F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="step-pei-zhi-xiang" tabindex="-1">Step \u914D\u7F6E\u9879</h3><table><thead><tr><th>\u952E\u540D</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th></tr></thead><tbody><tr><td>text</td><td>\u5F53\u524D\u6B65\u9AA4\u540D\u79F0</td><td><em>string</em></td></tr><tr><td>desc</td><td>\u5F53\u524D\u6B65\u9AA4\u63CF\u8FF0\u4FE1\u606F</td><td><em>string</em></td></tr><tr><td>activeIcon</td><td>\u5F53\u524D\u6B65\u9AA4\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807</td><td><em>string</em></td></tr><tr><td>inactiveIcon</td><td>\u5F53\u524D\u6B65\u9AA4\u672A\u6FC0\u6D3B\u72B6\u6001\u5E95\u90E8\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td></tr></tbody></table></div>`,13),Wt=[Gt],Ht={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Ot,Wt))}},Kt={class:"van-doc-markdown-body"},Qt=d(`<h1>Sticky \u7C98\u6027\u5E03\u5C40</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>Sticky \u7EC4\u4EF6\u4E0E CSS \u4E2D<code>position: sticky</code>\u5C5E\u6027\u5B9E\u73B0\u7684\u6548\u679C\u4E00\u81F4\uFF0C\u5F53\u7EC4\u4EF6\u5728\u5C4F\u5E55\u8303\u56F4\u5185\u65F6\uFF0C\u4F1A\u6309\u7167\u6B63\u5E38\u7684\u5E03\u5C40\u6392\u5217\uFF0C\u5F53\u7EC4\u4EF6\u6EDA\u51FA\u5C4F\u5E55\u8303\u56F4\u65F6\uFF0C\u59CB\u7EC8\u4F1A\u56FA\u5B9A\u5728\u5C4F\u5E55\u9876\u90E8\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-sticky&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/sticky/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u5C06\u5185\u5BB9\u5305\u88F9\u5728<code>Sticky</code>\u7EC4\u4EF6\u5185\u5373\u53EF\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-sticky</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u57FA\u7840\u7528\u6CD5<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="xi-ding-ju-chi" tabindex="-1">\u5438\u9876\u8DDD\u79BB</h3><p>\u901A\u8FC7<code>offset-top</code>\u5C5E\u6027\u53EF\u4EE5\u8BBE\u7F6E\u7EC4\u4EF6\u5728\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-sticky</span> <span class="hljs-attr">offset-top</span>=<span class="hljs-string">&quot;{{ 50 }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;info&quot;</span>&gt;</span>\u5438\u9876\u8DDD\u79BB<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-rong-qi" tabindex="-1">\u6307\u5B9A\u5BB9\u5668</h3><p>\u901A\u8FC7<code>container</code>\u5C5E\u6027\u53EF\u4EE5\u6307\u5B9A\u7EC4\u4EF6\u7684\u5BB9\u5668\uFF0C\u9875\u9762\u6EDA\u52A8\u65F6\uFF0C\u7EC4\u4EF6\u4F1A\u59CB\u7EC8\u4FDD\u6301\u5728\u5BB9\u5668\u8303\u56F4\u5185\uFF0C\u5F53\u7EC4\u4EF6\u5373\u5C06\u8D85\u51FA\u5BB9\u5668\u5E95\u90E8\u65F6\uFF0C\u4F1A\u8FD4\u56DE\u539F\u4F4D\u7F6E\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;container&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 150px;&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sticky</span> <span class="hljs-attr">container</span>=<span class="hljs-string">&quot;{{ container }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6307\u5B9A\u5BB9\u5668<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">container</span>: <span class="hljs-literal">null</span>,
},
<span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">container</span>: <span class="hljs-function">() =&gt;</span> wx.<span class="hljs-title function_">createSelectorQuery</span>().<span class="hljs-title function_">select</span>(<span class="hljs-string">&#39;#container&#39;</span>),
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="qian-tao-zai-scroll-view-nei-shi-yong" tabindex="-1">\u5D4C\u5957\u5728 scroll-view \u5185\u4F7F\u7528</h3><p>\u901A\u8FC7 <code>scroll-top</code> \u4E0E <code>offset-top</code> \u5C5E\u6027\u53EF\u4EE5\u5B9E\u73B0\u5728 scroll-view \u5185\u5D4C\u5957\u4F7F\u7528\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">scroll-view</span>
<span class="hljs-attr">bind:scroll</span>=<span class="hljs-string">&quot;onScroll&quot;</span>
<span class="hljs-attr">scroll-y</span>
<span class="hljs-attr">id</span>=<span class="hljs-string">&quot;scroller&quot;</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 200px;&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 400px; padding-top: 50px;&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-sticky</span> <span class="hljs-attr">scroll-top</span>=<span class="hljs-string">&quot;{{ scrollTop }}&quot;</span> <span class="hljs-attr">offset-top</span>=<span class="hljs-string">&quot;{{ offsetTop }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u5D4C\u5957\u5728 scroll-view \u5185<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">scrollTop</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">offsetTop</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-title function_">onScroll</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">createSelectorQuery</span>()
.<span class="hljs-title function_">select</span>(<span class="hljs-string">&#39;#scroller&#39;</span>)
.<span class="hljs-title function_">boundingClientRect</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">scrollTop</span>: event.<span class="hljs-property">detail</span>.<span class="hljs-property">scrollTop</span>,
<span class="hljs-attr">offsetTop</span>: res.<span class="hljs-property">top</span>,
});
})
.<span class="hljs-title function_">exec</span>();
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>offset-top</td><td>\u5438\u9876\u65F6\u4E0E\u9876\u90E8\u7684\u8DDD\u79BB\uFF0C\u5355\u4F4D<code>px</code></td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>z-index</td><td>\u5438\u9876\u65F6\u7684 z-index</td><td><em>number</em></td><td><code>99</code></td></tr><tr><td>container</td><td>\u4E00\u4E2A\u51FD\u6570\uFF0C\u8FD4\u56DE\u5BB9\u5668\u5BF9\u5E94\u7684 NodesRef \u8282\u70B9</td><td><em>function</em></td><td>-</td></tr><tr><td>scroll-top</td><td>\u5F53\u524D\u6EDA\u52A8\u533A\u57DF\u7684\u6EDA\u52A8\u4F4D\u7F6E\uFF0C\u975E <code>null</code> \u65F6\u4F1A\u7981\u7528\u9875\u9762\u6EDA\u52A8\u4E8B\u4EF6\u7684\u76D1\u542C</td><td><em>number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:scroll</td><td>\u6EDA\u52A8\u65F6\u89E6\u53D1</td><td>{ scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 }</td></tr></tbody></table></div>`,11),Jt=[Qt],Xt={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Kt,Jt))}},Zt={class:"van-doc-markdown-body"},Yt=d(`<h1>SubmitBar \u63D0\u4EA4\u8BA2\u5355\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C55\u793A\u8BA2\u5355\u91D1\u989D\u4E0E\u63D0\u4EA4\u8BA2\u5355\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-submit-bar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/submit-bar/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>
<span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>
<span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>
<span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><p>\u7981\u7528\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1<code>submit</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>
<span class="hljs-attr">disabled</span>
<span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>
<span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>
<span class="hljs-attr">tip</span>=<span class="hljs-string">&quot;\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, \u6211\u4EEC\u5DF2\u4E3A\u60A8\u63A8\u8350\u5FEB\u9012&quot;</span>
<span class="hljs-attr">tip-icon</span>=<span class="hljs-string">&quot;info-o&quot;</span>
<span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><p>\u52A0\u8F7D\u72B6\u6001\u4E0B\u4E0D\u4F1A\u89E6\u53D1<code>submit</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>
<span class="hljs-attr">loading</span>
<span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>
<span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>
<span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u901A\u8FC7\u63D2\u69FD\u63D2\u5165\u81EA\u5B9A\u4E49\u5185\u5BB9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>
<span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>
<span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;\u63D0\u4EA4\u8BA2\u5355&quot;</span>
<span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onClickButton&quot;</span>
<span class="hljs-attr">tip</span>=<span class="hljs-string">&quot;{{ true }}&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;tip&quot;</span>&gt;</span>\u60A8\u7684\u6536\u8D27\u5730\u5740\u4E0D\u652F\u6301\u540C\u57CE\u9001, <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>\u4FEE\u6539\u5730\u5740<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-submit-bar</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>price</td><td>\u4EF7\u683C\uFF08\u5355\u4F4D\u5206\uFF09</td><td><em>number</em></td><td>-</td></tr><tr><td>label</td><td>\u4EF7\u683C\u6587\u6848</td><td><em>string</em></td><td><code>\u5408\u8BA1\uFF1A</code></td></tr><tr><td>suffix-label</td><td>\u4EF7\u683C\u53F3\u4FA7\u6587\u6848</td><td><em>string</em></td><td>-</td></tr><tr><td>button-text</td><td>\u6309\u94AE\u6587\u5B57</td><td><em>string</em></td><td>-</td></tr><tr><td>button-type</td><td>\u6309\u94AE\u7C7B\u578B</td><td><em>string</em></td><td><code>danger</code></td></tr><tr><td>tip</td><td>\u63D0\u793A\u6587\u6848</td><td><em>string | boolean</em></td><td>-</td></tr><tr><td>tip-icon</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u663E\u793A\u52A0\u8F7D\u4E2D\u7684\u6309\u94AE</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>currency</td><td>\u8D27\u5E01\u7B26\u53F7</td><td><em>string</em></td><td><code>\xA5</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>decimal-length</td><td>\u4EF7\u683C\u5C0F\u6570\u70B9\u540E\u4F4D\u6570</td><td><em>number</em></td><td><code>2</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:submit</td><td>\u6309\u94AE\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u5DE6\u4FA7\u5185\u5BB9</td></tr><tr><td>top</td><td>\u81EA\u5B9A\u4E49\u8BA2\u5355\u680F\u4E0A\u65B9\u5185\u5BB9</td></tr><tr><td>tip</td><td>\u63D0\u793A\u6587\u6848\u4E2D\u7684\u989D\u5916\u64CD\u4F5C\u548C\u8BF4\u660E</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>price-class</td><td>\u4EF7\u683C\u6837\u5F0F\u7C7B</td></tr><tr><td>button-class</td><td>\u6309\u94AE\u6837\u5F0F\u7C7B</td></tr><tr><td>bar-class</td><td>\u8BA2\u5355\u680F\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,13),sn=[Yt],an={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Zt,sn))}},tn={class:"van-doc-markdown-body"},nn=d(`<h1>SwipeCell \u6ED1\u52A8\u5355\u5143\u683C</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u53EF\u4EE5\u5DE6\u53F3\u6ED1\u52A8\u6765\u5C55\u793A\u64CD\u4F5C\u6309\u94AE\u7684\u5355\u5143\u683C\u7EC4\u4EF6\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-swipe-cell&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/swipe-cell/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-swipe-cell</span> <span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span> <span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-swipe-cell__left&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-swipe-cell__right&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-guan-bi" tabindex="-1">\u5F02\u6B65\u5173\u95ED</h3><p>\u5F53\u5F00\u542F<code>async-close</code>\u65F6\uFF0C \u901A\u8FC7\u7ED1\u5B9A<code>close</code>\u4E8B\u4EF6\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E24\u4FA7\u6ED1\u52A8\u5185\u5BB9\u70B9\u51FB\u65F6\u7684\u5173\u95ED\u884C\u4E3A\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-swipe-cell</span>
<span class="hljs-attr">id</span>=<span class="hljs-string">&quot;swipe-cell&quot;</span>
<span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>
<span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>
<span class="hljs-attr">async-close</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { position, instance } = event.<span class="hljs-property">detail</span>;
<span class="hljs-keyword">switch</span> (position) {
<span class="hljs-keyword">case</span> <span class="hljs-string">&#39;left&#39;</span>:
<span class="hljs-keyword">case</span> <span class="hljs-string">&#39;cell&#39;</span>:
instance.<span class="hljs-title function_">close</span>();
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">&#39;right&#39;</span>:
<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u786E\u5B9A\u5220\u9664\u5417\uFF1F&#39;</span>,
}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {
instance.<span class="hljs-title function_">close</span>();
});
<span class="hljs-keyword">break</span>;
}
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zhu-dong-da-kai" tabindex="-1">\u4E3B\u52A8\u6253\u5F00</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-swipe-cell</span>
<span class="hljs-attr">id</span>=<span class="hljs-string">&quot;swipe-cell2&quot;</span>
<span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>
<span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>
<span class="hljs-attr">name</span>=<span class="hljs-string">&quot;\u793A\u4F8B&quot;</span>
<span class="hljs-attr">bind:open</span>=<span class="hljs-string">&quot;onOpen&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;left&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-swipe-cell__left&quot;</span>&gt;</span>\u9009\u62E9<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u5355\u5143\u683C&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;\u5185\u5BB9&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;van-swipe-cell__right&quot;</span>&gt;</span>\u5220\u9664<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onOpen</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { position, name } = event.<span class="hljs-property">detail</span>;
<span class="hljs-keyword">switch</span> (position) {
<span class="hljs-keyword">case</span> <span class="hljs-string">&#39;left&#39;</span>:
<span class="hljs-title class_">Notify</span>({
<span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">\`<span class="hljs-subst">\${name}</span><span class="hljs-subst">\${position}</span>\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1\`</span>,
});
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">&#39;right&#39;</span>:
<span class="hljs-title class_">Notify</span>({
<span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">\`<span class="hljs-subst">\${name}</span><span class="hljs-subst">\${position}</span>\u90E8\u5206\u5C55\u793Aopen\u4E8B\u4EF6\u88AB\u89E6\u53D1\`</span>,
});
<span class="hljs-keyword">break</span>;
}
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728 close \u4E8B\u4EF6\u7684\u53C2\u6570\u4E2D\u83B7\u53D6\u5230</td><td><em>string | number</em></td><td>-</td></tr><tr><td>left-width</td><td>\u5DE6\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>right-width</td><td>\u53F3\u4FA7\u6ED1\u52A8\u533A\u57DF\u5BBD\u5EA6</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>async-close</td><td>\u662F\u5426\u5F02\u6B65\u5173\u95ED</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled <code>v1.3.4</code></td><td>\u662F\u5426\u7981\u7528\u6ED1\u52A8</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u663E\u793A\u5185\u5BB9</td></tr><tr><td>left</td><td>\u5DE6\u4FA7\u6ED1\u52A8\u5185\u5BB9</td></tr><tr><td>right</td><td>\u53F3\u4FA7\u6ED1\u52A8\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u65F6\u89E6\u53D1</td><td>\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (<code>left</code> <code>right</code> <code>cell</code> <code>outside</code>)</td></tr><tr><td>bind:close</td><td>\u5173\u95ED\u65F6\u89E6\u53D1</td><td>{ position: &#39;left&#39; | &#39;right&#39; , instance , name: string }</td></tr><tr><td>bind:open</td><td>\u6253\u5F00\u65F6\u89E6\u53D1</td><td>{ position: &#39;left&#39; | &#39;right&#39; , name: string }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="close-can-shu" tabindex="-1">close \u53C2\u6570</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u7C7B\u578B</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>position</td><td><em>string</em></td><td>\u5173\u95ED\u65F6\u7684\u70B9\u51FB\u4F4D\u7F6E (<code>left</code> <code>right</code> <code>cell</code> <code>outside</code>)</td></tr><tr><td>instance</td><td><em>object</em></td><td>SwipeCell \u5B9E\u4F8B</td></tr><tr><td>name</td><td>\u6807\u8BC6\u7B26</td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 SwipeCell \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>open</td><td>position: <code>left | right</code></td><td>-</td><td>\u6253\u5F00\u5355\u5143\u683C\u4FA7\u8FB9\u680F</td></tr><tr><td>close</td><td>-</td><td>-</td><td>\u6536\u8D77\u5355\u5143\u683C\u4FA7\u8FB9\u680F</td></tr></tbody></table></div>`,13),ln=[nn],en={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",tn,ln))}},pn={class:"van-doc-markdown-body"},dn=d(`<h1>Switch \u5F00\u5173</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5728\u6253\u5F00\u548C\u5173\u95ED\u72B6\u6001\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-switch&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/switch/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">{ detail }</span>) {
<span class="hljs-comment">// \u9700\u8981\u624B\u52A8\u5BF9 checked \u72B6\u6001\u8FDB\u884C\u66F4\u65B0</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">checked</span>: detail });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">\u7981\u7528\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">\u52A0\u8F7D\u72B6\u6001</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">loading</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">\u81EA\u5B9A\u4E49\u5927\u5C0F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>
<span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span>
<span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>
<span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-kong-zhi" tabindex="-1">\u5F02\u6B65\u63A7\u5236</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">{ detail }</span>) {
wx.<span class="hljs-title function_">showModal</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u63D0\u793A&#39;</span>,
<span class="hljs-attr">content</span>: <span class="hljs-string">&#39;\u662F\u5426\u5207\u6362\u5F00\u5173\uFF1F&#39;</span>,
<span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
<span class="hljs-keyword">if</span> (res.<span class="hljs-property">confirm</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">checked2</span>: detail });
}
},
});
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u5728\u8868\u5355\u5185\u63D0\u4EA4\u65F6\u7684\u6807\u8BC6\u7B26</td><td><em>string</em></td><td>-</td></tr><tr><td>checked</td><td>\u5F00\u5173\u9009\u4E2D\u72B6\u6001</td><td><em>any</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>\u662F\u5426\u4E3A\u52A0\u8F7D\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u4E3A\u7981\u7528\u72B6\u6001</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>size</td><td>\u5F00\u5173\u5C3A\u5BF8</td><td><em>string</em></td><td><code>30px</code></td></tr><tr><td>active-color</td><td>\u6253\u5F00\u65F6\u7684\u80CC\u666F\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>\u5173\u95ED\u65F6\u7684\u80CC\u666F\u8272</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>active-value</td><td>\u6253\u5F00\u65F6\u7684\u503C</td><td><em>any</em></td><td><code>true</code></td></tr><tr><td>inactive-value</td><td>\u5173\u95ED\u65F6\u7684\u503C</td><td><em>any</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5F00\u5173\u72B6\u6001\u5207\u6362\u56DE\u8C03</td><td>event.detail: \u662F\u5426\u9009\u4E2D\u5F00\u5173</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>node-class</td><td>\u5706\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,14),cn=[dn],on={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",pn,cn))}},rn={class:"van-doc-markdown-body"},hn=d(`<h1>Tab \u6807\u7B7E\u9875</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u9009\u9879\u5361\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u7684\u5185\u5BB9\u533A\u57DF\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-tab&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tab/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-tabs&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tabs/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7<code>active</code>\u8BBE\u5B9A\u5F53\u524D\u6FC0\u6D3B\u6807\u7B7E\u5BF9\u5E94\u7684\u7D22\u5F15\u503C\uFF0C\u9ED8\u8BA4\u60C5\u51B5\u4E0B\u542F\u7528\u7B2C\u4E00\u4E2A\u6807\u7B7E\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">active</span>: <span class="hljs-number">1</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u5207\u6362\u5230\u6807\u7B7E <span class="hljs-subst">\${event.detail.name}</span>\`</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="tong-guo-ming-cheng-pi-pei" tabindex="-1">\u901A\u8FC7\u540D\u79F0\u5339\u914D</h3><p>\u5728\u6807\u7B7E\u6307\u5B9A<code>name</code>\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0C<code>active</code>\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684<code>name</code>\uFF08\u6B64\u65F6\u65E0\u6CD5\u901A\u8FC7\u7D22\u5F15\u503C\u6765\u5339\u914D\u6807\u7B7E\uFF09\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="heng-xiang-gun-dong" tabindex="-1">\u6A2A\u5411\u6EDA\u52A8</h3><p>\u591A\u4E8E 5 \u4E2A\u6807\u7B7E\u65F6\uFF0CTab \u53EF\u4EE5\u6A2A\u5411\u6EDA\u52A8\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 5&quot;</span>&gt;</span>\u5185\u5BB9 5<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 6&quot;</span>&gt;</span>\u5185\u5BB9 6<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-biao-qian" tabindex="-1">\u7981\u7528\u6807\u7B7E</h3><p>\u8BBE\u7F6E<code>disabled</code>\u5C5E\u6027\u5373\u53EF\u7981\u7528\u6807\u7B7E\u3002\u5982\u679C\u9700\u8981\u76D1\u542C\u7981\u7528\u6807\u7B7E\u7684\u70B9\u51FB\u4E8B\u4EF6\uFF0C\u53EF\u4EE5\u5728<code>van-tabs</code>\u4E0A\u76D1\u542C<code>disabled</code>\u4E8B\u4EF6\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">bind:disabled</span>=<span class="hljs-string">&quot;onClickDisabled&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onClickDisabled</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u6807\u7B7E <span class="hljs-subst">\${event.detail.name}</span> \u5DF2\u88AB\u7981\u7528\`</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="yang-shi-feng-ge" tabindex="-1">\u6837\u5F0F\u98CE\u683C</h3><p><code>Tab</code>\u652F\u6301\u4E24\u79CD\u6837\u5F0F\u98CE\u683C\uFF1A<code>line</code>\u548C<code>card</code>\uFF0C\u9ED8\u8BA4\u4E3A<code>line</code>\u6837\u5F0F\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>type</code>\u5C5E\u6027\u4FEE\u6539\u6837\u5F0F\u98CE\u683C\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;card&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="dian-ji-shi-jian" tabindex="-1">\u70B9\u51FB\u4E8B\u4EF6</h3><p>\u53EF\u4EE5\u5728<code>van-tabs</code>\u4E0A\u7ED1\u5B9A<code>click</code>\u4E8B\u4EF6\uFF0C\u5728\u56DE\u8C03\u53C2\u6570\u7684<code>event.detail</code>\u4E2D\u53EF\u4EE5\u53D6\u5F97\u88AB\u70B9\u51FB\u6807\u7B7E\u7684\u6807\u9898\u548C\u6807\u8BC6\u7B26\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u70B9\u51FB\u6807\u7B7E <span class="hljs-subst">\${event.detail.name}</span>\`</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="nian-xing-bu-ju" tabindex="-1">\u7C98\u6027\u5E03\u5C40</h3><p>\u901A\u8FC7<code>sticky</code>\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u7C98\u6027\u5E03\u5C40\uFF0C\u7C98\u6027\u5E03\u5C40\u4E0B\uFF0C\u5F53 Tab \u6EDA\u52A8\u5230\u9876\u90E8\u65F6\u4F1A\u81EA\u52A8\u5438\u9876\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">sticky</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="qie-huan-dong-hua" tabindex="-1">\u5207\u6362\u52A8\u753B</h3><p>\u53EF\u4EE5\u901A\u8FC7<code>animated</code>\u6765\u8BBE\u7F6E\u662F\u5426\u542F\u7528\u5207\u6362 tab \u65F6\u7684\u52A8\u753B\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">animated</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="hua-dong-qie-huan" tabindex="-1">\u6ED1\u52A8\u5207\u6362</h3><p>\u901A\u8FC7<code>swipeable</code>\u5C5E\u6027\u53EF\u4EE5\u5F00\u542F\u6ED1\u52A8\u5207\u6362\u6807\u7B7E\u9875\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">swipeable</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="qian-tao-popup" tabindex="-1">\u5D4C\u5957 popup</h3><p>\u5982\u679C\u5C06 van-tabs \u5D4C\u5957\u5728 van-popup \u7B49\u4F1A\u9690\u85CF\u5185\u5BB9\u7684\u7EC4\u4EF6\u6216\u8282\u70B9\u5185\uFF0C\u5F53 van-tabs \u663E\u793A\u65F6\u4E0B\u5212\u7EBF\u5C06\u4E0D\u4F1A\u6B63\u5E38\u663E\u793A\u3002</p><p>\u6B64\u65F6\u53EF\u4EE5\u901A\u8FC7\u4F7F\u7528 <code>wx:if</code> \u624B\u52A8\u63A7\u5236 van-tabs \u7684\u6E32\u67D3\u6765\u89C4\u907F\u8FD9\u79CD\u573A\u666F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-qie-huan" tabindex="-1">\u5F02\u6B65\u5207\u6362</h3><p>\u901A\u8FC7 <code>before-change</code> \u4E8B\u4EF6\u53EF\u4EE5\u5728\u5207\u6362\u6807\u7B7E\u524D\u6267\u884C\u7279\u5B9A\u7684\u903B\u8F91\uFF0C\u5B9E\u73B0\u5207\u6362\u524D\u6821\u9A8C\u3001\u5F02\u6B65\u5207\u6362\u7684\u76EE\u7684</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">use-before-change</span>=<span class="hljs-string">&quot;{{ true }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span> <span class="hljs-attr">bind:before-change</span>=<span class="hljs-string">&quot;onBeforeChange&quot;</span> &gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 1&quot;</span>&gt;</span>\u5185\u5BB9 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 2&quot;</span>&gt;</span>\u5185\u5BB9 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 3&quot;</span>&gt;</span>\u5185\u5BB9 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;\u6807\u7B7E 4&quot;</span>&gt;</span>\u5185\u5BB9 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">active</span>: <span class="hljs-number">1</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u5207\u6362\u5230\u6807\u7B7E <span class="hljs-subst">\${event.detail.name}</span>\`</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
});
},
<span class="hljs-title function_">onBeforeChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { callback, title } = event.<span class="hljs-property">detail</span>;
wx.<span class="hljs-title function_">showModal</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u5F02\u6B65\u5207\u6362&#39;</span>,
<span class="hljs-attr">content</span>: <span class="hljs-string">\`\u786E\u5B9A\u8981\u5207\u6362\u81F3 <span class="hljs-subst">\${title}</span> tab\u5417\uFF1F\`</span>,
<span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {
<span class="hljs-keyword">if</span> (res.<span class="hljs-property">confirm</span>) {
<span class="hljs-title function_">callback</span>(<span class="hljs-literal">true</span>)
} <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (res.<span class="hljs-property">cancel</span>) {
<span class="hljs-title function_">callback</span>(<span class="hljs-literal">false</span>)
}
},
})
}
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="tabs-props" tabindex="-1">Tabs Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u6837\u5F0F\u98CE\u683C\uFF0C\u53EF\u9009\u503C\u4E3A<code>card</code></td><td><em>string</em></td><td><code>line</code></td></tr><tr><td>color</td><td>\u6807\u7B7E\u4E3B\u9898\u8272</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>active</td><td>\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u6807\u8BC6\u7B26</td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2</td><td><em>number</em></td><td><code>0.3</code></td></tr><tr><td>line-width</td><td>\u5E95\u90E8\u6761\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D<code>px</code></td><td><em>string | number</em></td><td><code>40px</code></td></tr><tr><td>line-height</td><td>\u5E95\u90E8\u6761\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D<code>px</code></td><td><em>string | number</em></td><td><code>3px</code></td></tr><tr><td>animated</td><td>\u662F\u5426\u5F00\u542F\u5207\u6362\u6807\u7B7E\u5185\u5BB9\u65F6\u7684\u8F6C\u573A\u52A8\u753B</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846\uFF0C\u4EC5\u5728 <code>line</code> \u98CE\u683C\u4E0B\u751F\u6548</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>ellipsis</td><td>\u662F\u5426\u7701\u7565\u8FC7\u957F\u7684\u6807\u9898\u6587\u5B57</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>sticky</td><td>\u662F\u5426\u4F7F\u7528\u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>swipeable</td><td>\u662F\u5426\u5F00\u542F\u624B\u52BF\u6ED1\u52A8\u5207\u6362</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lazy-render</td><td>\u662F\u5426\u5F00\u542F\u6807\u7B7E\u9875\u5185\u5BB9\u5EF6\u8FDF\u6E32\u67D3</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>offset-top</td><td>\u7C98\u6027\u5B9A\u4F4D\u5E03\u5C40\u4E0B\u4E0E\u9876\u90E8\u7684\u6700\u5C0F\u8DDD\u79BB\uFF0C\u5355\u4F4D<code>px</code></td><td><em>number</em></td><td>-</td></tr><tr><td>swipe-threshold</td><td>\u6EDA\u52A8\u9608\u503C\uFF0C\u6807\u7B7E\u6570\u91CF\u8D85\u8FC7\u9608\u503C\u4E14\u603B\u5BBD\u5EA6\u8D85\u8FC7\u6807\u7B7E\u680F\u5BBD\u5EA6\u65F6\u5F00\u59CB\u6A2A\u5411\u6EDA\u52A8</td><td><em>number</em></td><td><code>5</code></td></tr><tr><td>title-active-color</td><td>\u6807\u9898\u9009\u4E2D\u6001\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>title-inactive-color</td><td>\u6807\u9898\u9ED8\u8BA4\u6001\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>z-index</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>use-before-change <code>v1.10.10</code></td><td>\u662F\u5426\u5F00\u542F\u5207\u6362\u524D\u6821\u9A8C</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tab-props" tabindex="-1">Tab Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26</td><td><em>string | number</em></td><td>\u6807\u7B7E\u7684\u7D22\u5F15\u503C</td></tr><tr><td>title</td><td>\u6807\u9898</td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6807\u7B7E</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td>-</td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F</td><td><em>string | number</em></td><td>-</td></tr><tr><td>title-style</td><td>\u81EA\u5B9A\u4E49\u6807\u9898\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabs-slot" tabindex="-1">Tabs Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>nav-left</td><td>\u6807\u9898\u5DE6\u4FA7\u5185\u5BB9</td></tr><tr><td>nav-right</td><td>\u6807\u9898\u53F3\u4FA7\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tab-slot" tabindex="-1">Tab Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u6807\u7B7E\u9875\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabs-event" tabindex="-1">Tabs Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click</td><td>\u70B9\u51FB\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898</td></tr><tr><td>bind:before-change <code>v1.10.10</code></td><td>tab \u5207\u6362\u524D\u4F1A\u89E6\u53D1\uFF0C\u5728\u56DE\u8C03\u51FD\u6570\u4E2D\u8FD4\u56DE <code>false</code> \u53EF\u7EC8\u6B62 tab \u5207\u6362\uFF0C\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u540C\u65F6\u9700\u8981\u5C06<code>use-before-change</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code></td><td><code>event.detail.name</code>: \u5F53\u524D\u5207\u6362\u7684 tab \u6807\u8BC6\u7B26\uFF0C <code>event.detail.title</code>: \u5F53\u524D\u5207\u6362\u7684 tab \u6807\u9898\uFF0C <code>event.detail.index</code>: \u5F53\u524D\u5207\u6362\u7684 tab \u4E0B\u6807\uFF0C<code>event.detail.callback</code>: \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528<code>callback(false)</code>\u7EC8\u6B62 tab \u5207\u6362</td></tr><tr><td>bind:change</td><td>\u5F53\u524D\u6FC0\u6D3B\u7684\u6807\u7B7E\u6539\u53D8\u65F6\u89E6\u53D1</td><td>name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898</td></tr><tr><td>bind:disabled</td><td>\u70B9\u51FB\u88AB\u7981\u7528\u7684\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>name\uFF1A\u6807\u7B7E\u6807\u8BC6\u7B26\uFF0Ctitle\uFF1A\u6807\u9898</td></tr><tr><td>bind:scroll</td><td>\u6EDA\u52A8\u65F6\u89E6\u53D1</td><td>{ scrollTop: \u8DDD\u79BB\u9876\u90E8\u4F4D\u7F6E, isFixed: \u662F\u5426\u5438\u9876 }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>nav-class</td><td>\u6807\u7B7E\u680F\u6837\u5F0F\u7C7B</td></tr><tr><td>tab-class</td><td>\u6807\u7B7E\u6837\u5F0F\u7C7B</td></tr><tr><td>tab-active-class</td><td>\u6807\u7B7E\u6FC0\u6D3B\u6001\u6837\u5F0F\u7C7B</td></tr><tr><td>wrap-class</td><td>\u6807\u7B7E\u680F\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><p>\u901A\u8FC7 selectComponent \u53EF\u4EE5\u83B7\u53D6\u5230 Tabs \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\u3002</p><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>resize</td><td>-</td><td>-</td><td>\u5916\u5C42\u5143\u7D20\u5927\u5C0F\u6216\u7EC4\u4EF6\u663E\u793A\u72B6\u6001\u53D8\u5316\u65F6\uFF0C\u53EF\u4EE5\u8C03\u7528\u6B64\u65B9\u6CD5\u6765\u89E6\u53D1\u91CD\u7ED8</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2><div class="van-doc-card"><h3 id="zu-jian-cong-yin-cang-zhuang-tai-qie-huan-dao-xian-shi-zhuang-tai-shi-di-bu-tiao-wei-zhi-cuo-wu" tabindex="-1">\u7EC4\u4EF6\u4ECE\u9690\u85CF\u72B6\u6001\u5207\u6362\u5230\u663E\u793A\u72B6\u6001\u65F6\uFF0C\u5E95\u90E8\u6761\u4F4D\u7F6E\u9519\u8BEF\uFF1F</h3><p>Tabs \u7EC4\u4EF6\u5728\u6302\u8F7D\u65F6\uFF0C\u4F1A\u83B7\u53D6\u81EA\u8EAB\u7684\u5BBD\u5EA6\uFF0C\u5E76\u8BA1\u7B97\u51FA\u5E95\u90E8\u6761\u7684\u4F4D\u7F6E\u3002\u5982\u679C\u7EC4\u4EF6\u4E00\u5F00\u59CB\u5904\u4E8E\u9690\u85CF\u72B6\u6001\uFF0C\u5219\u83B7\u53D6\u5230\u7684\u5BBD\u5EA6\u6C38\u8FDC\u4E3A 0\uFF0C\u56E0\u6B64\u65E0\u6CD5\u5C55\u793A\u5E95\u90E8\u6761\u4F4D\u7F6E\u3002</p><h4 id="jie-jue-fang-fa" tabindex="-1">\u89E3\u51B3\u65B9\u6CD5</h4><p>\u65B9\u6CD5\u4E00\uFF0C\u4F7F\u7528 <code>wx:if</code> \u6765\u63A7\u5236\u7EC4\u4EF6\u5C55\u793A\uFF0C\u4F7F\u7EC4\u4EF6\u91CD\u65B0\u521D\u59CB\u5316\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;show&quot;</span> /&gt;</span>
</code></pre><p>\u65B9\u6CD5\u4E8C\uFF0C\u8C03\u7528\u7EC4\u4EF6\u7684 resize \u65B9\u6CD5\u6765\u4E3B\u52A8\u89E6\u53D1\u91CD\u7ED8\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabs</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;tabs&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-variable language_">this</span>.<span class="hljs-title function_">selectComponent</span>(<span class="hljs-string">&#39;#tabs&#39;</span>).<span class="hljs-title function_">resize</span>();
</code></pre></div>`,25),un=[hn],gn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",rn,un))}},jn={class:"van-doc-markdown-body"},mn=d(`<h1>Tabbar \u6807\u7B7E\u680F</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5E95\u90E8\u5BFC\u822A\u680F\uFF0C\u7528\u4E8E\u5728\u4E0D\u540C\u9875\u9762\u4E4B\u95F4\u8FDB\u884C\u5207\u6362\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-tabbar&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tabbar/index&quot;</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">&quot;van-tabbar-item&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tabbar-item/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-comment">// event.detail \u7684\u503C\u4E3A\u5F53\u524D\u9009\u4E2D\u9879\u7684\u7D22\u5F15</span>
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="tong-guo-ming-cheng-pi-pei" tabindex="-1">\u901A\u8FC7\u540D\u79F0\u5339\u914D</h3><p>\u5728\u6807\u7B7E\u6307\u5B9A<code>name</code>\u5C5E\u6027\u7684\u60C5\u51B5\u4E0B\uFF0C<code>v-model</code>\u7684\u503C\u4E3A\u5F53\u524D\u6807\u7B7E\u7684<code>name</code>\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;home&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;friends&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;setting&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">active</span>: <span class="hljs-string">&#39;home&#39;</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xian-shi-hui-biao" tabindex="-1">\u663E\u793A\u5FBD\u6807</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">dot</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;20&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">\u81EA\u5B9A\u4E49\u56FE\u6807</h3><p>\u53EF\u4EE5\u901A\u8FC7 slot \u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5176\u4E2D icon slot \u4EE3\u8868\u672A\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\uFF0Cicon-active slot \u4EE3\u8868\u9009\u4E2D\u72B6\u6001\u4E0B\u7684\u56FE\u6807\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span>
<span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ icon.normal }}&quot;</span>
<span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;aspectFit&quot;</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 30px; height: 18px;&quot;</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span>
<span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon-active&quot;</span>
<span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ icon.active }}&quot;</span>
<span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;aspectFit&quot;</span>
<span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 30px; height: 18px;&quot;</span>
/&gt;</span>
\u81EA\u5B9A\u4E49
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">icon</span>: {
<span class="hljs-attr">normal</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/user-inactive.png&#39;</span>,
<span class="hljs-attr">active</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/user-active.png&#39;</span>,
},
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar</span>
<span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>
<span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>
<span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;#000&quot;</span>
<span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">active</span>: event.<span class="hljs-property">detail</span> });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="qie-huan-biao-qian-shi-jian" tabindex="-1">\u5207\u6362\u6807\u7B7E\u4E8B\u4EF6</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar</span> <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span> <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>&gt;</span>\u6807\u7B7E1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>&gt;</span>\u6807\u7B7E2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;friends-o&quot;</span>&gt;</span>\u6807\u7B7E3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar-item</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;setting-o&quot;</span>&gt;</span>\u6807\u7B7E4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,
},
<span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {
wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">title</span>: <span class="hljs-string">\`\u70B9\u51FB\u6807\u7B7E <span class="hljs-subst">\${event.detail + <span class="hljs-number">1</span>}</span>\`</span>,
<span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="jie-he-zi-ding-yi-tabbar" tabindex="-1">\u7ED3\u5408\u81EA\u5B9A\u4E49 tabBar</h3><p>\u8BF7\u53C2\u8003 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html" target="_blank">\u5FAE\u4FE1\u5B98\u65B9\u6587\u6863</a> \u4E0E <a href="https://developers.weixin.qq.com/s/vaXgTsmQ7hnm" target="_blank">\u4EE3\u7801\u7247\u6BB5</a>\u3002</p></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="tabbar-props" tabindex="-1">Tabbar Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>active</td><td>\u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u7D22\u5F15</td><td><em>number</em></td><td>-</td></tr><tr><td>fixed</td><td>\u662F\u5426\u56FA\u5B9A\u5728\u5E95\u90E8</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>placeholder</td><td>\u56FA\u5B9A\u5728\u5E95\u90E8\u65F6\uFF0C\u662F\u5426\u5728\u6807\u7B7E\u4F4D\u7F6E\u751F\u6210\u4E00\u4E2A\u7B49\u9AD8\u7684\u5360\u4F4D\u5143\u7D20</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>\u662F\u5426\u5C55\u793A\u5916\u8FB9\u6846</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>z-index</td><td>\u5143\u7D20 z-index</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>active-color</td><td>\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>\u672A\u9009\u4E2D\u6807\u7B7E\u7684\u989C\u8272</td><td><em>string</em></td><td><code>#7d7e80</code></td></tr><tr><td>safe-area-inset-bottom</td><td>\u662F\u5426\u4E3A iPhoneX \u7559\u51FA\u5E95\u90E8\u5B89\u5168\u8DDD\u79BB</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbar-event" tabindex="-1">Tabbar Event</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:change</td><td>\u5207\u6362\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>event.detail: \u5F53\u524D\u9009\u4E2D\u6807\u7B7E\u7684\u540D\u79F0\u6216\u7D22\u5F15\u503C</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbaritem-props" tabindex="-1">TabbarItem Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u7B7E\u540D\u79F0\uFF0C\u4F5C\u4E3A\u5339\u914D\u7684\u6807\u8BC6\u7B26</td><td><em>string | number</em></td><td>\u5F53\u524D\u6807\u7B7E\u7684\u7D22\u5F15\u503C</td></tr><tr><td>icon</td><td>\u56FE\u6807\u540D\u79F0\u6216\u56FE\u7247\u94FE\u63A5\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td>-</td></tr><tr><td>icon-prefix</td><td>\u56FE\u6807\u7C7B\u540D\u524D\u7F00\uFF0C\u540C Icon \u7EC4\u4EF6\u7684 <a href="#/icon#props" target="_blank">class-prefix \u5C5E\u6027</a></td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>dot</td><td>\u662F\u5426\u663E\u793A\u5C0F\u7EA2\u70B9</td><td><em>boolean</em></td><td>-</td></tr><tr><td>info</td><td>\u56FE\u6807\u53F3\u4E0A\u89D2\u63D0\u793A\u4FE1\u606F</td><td><em>string | number</em></td><td>-</td></tr><tr><td>url <code>v1.10.13</code></td><td>\u70B9\u51FB\u540E\u8DF3\u8F6C\u7684\u94FE\u63A5\u5730\u5740, \u9700\u8981\u4EE5 <code>/</code> \u5F00\u5934</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type <code>v1.10.13</code></td><td>\u94FE\u63A5\u8DF3\u8F6C\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>redirectTo</code>\u3001<code>switchTab</code>\u3001<code>reLaunch</code></td><td><em>string</em></td><td><code>redirectTo</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbaritem-slot" tabindex="-1">TabbarItem Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>icon</td><td>\u672A\u9009\u4E2D\u65F6\u7684\u56FE\u6807</td></tr><tr><td>icon-active</td><td>\u9009\u4E2D\u65F6\u7684\u56FE\u6807</td></tr></tbody></table></div>`,16),bn=[mn],vn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",jn,bn))}},qn={class:"van-doc-markdown-body"},fn=d(`<h1>Tag \u6807\u7B7E</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u6807\u8BB0\u5173\u952E\u8BCD\u548C\u6982\u62EC\u4E3B\u8981\u5185\u5BB9\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-tag&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tag/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u901A\u8FC7 <code>type</code> \u5C5E\u6027\u63A7\u5236\u6807\u7B7E\u989C\u8272\uFF0C\u9ED8\u8BA4\u4E3A\u7070\u8272\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="kong-xin-yang-shi" tabindex="-1">\u7A7A\u5FC3\u6837\u5F0F</h3><p>\u8BBE\u7F6E <code>plain</code> \u5C5E\u6027\u8BBE\u7F6E\u4E3A\u7A7A\u5FC3\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">plain</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-yang-shi" tabindex="-1">\u5706\u89D2\u6837\u5F0F</h3><p>\u901A\u8FC7 <code>round</code> \u8BBE\u7F6E\u4E3A\u5706\u89D2\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">round</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="biao-ji-yang-shi" tabindex="-1">\u6807\u8BB0\u6837\u5F0F</h3><p>\u901A\u8FC7 <code>mark</code> \u8BBE\u7F6E\u4E3A\u6807\u8BB0\u6837\u5F0F(\u534A\u5706\u89D2)\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">mark</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">\u81EA\u5B9A\u4E49\u989C\u8272</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#f2826a&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span> <span class="hljs-attr">plain</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffe1e1&quot;</span> <span class="hljs-attr">text-color</span>=<span class="hljs-string">&quot;#ad0000&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="biao-qian-da-xiao" tabindex="-1">\u6807\u7B7E\u5927\u5C0F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span>&gt;</span>\u6807\u7B7E<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="ke-guan-bi-biao-qian" tabindex="-1">\u53EF\u5173\u95ED\u6807\u7B7E</h3><p>\u6DFB\u52A0 <code>closeable</code> \u5C5E\u6027\u8868\u793A\u6807\u7B7E\u662F\u53EF\u5173\u95ED\u7684\uFF0C\u5173\u95ED\u6807\u7B7E\u65F6\u4F1A\u89E6\u53D1 <code>close</code> \u4E8B\u4EF6\uFF0C\u5728 <code>close</code> \u4E8B\u4EF6\u4E2D\u53EF\u4EE5\u6267\u884C\u9690\u85CF\u6807\u7B7E\u7684\u903B\u8F91\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span>
<span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show.primary }}&quot;</span>
<span class="hljs-attr">closeable</span>
<span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>
<span class="hljs-attr">id</span>=<span class="hljs-string">&quot;primary&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
&gt;</span>
\u6807\u7B7E
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span>
<span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show.success }}&quot;</span>
<span class="hljs-attr">closeable</span>
<span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>
<span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>
<span class="hljs-attr">id</span>=<span class="hljs-string">&quot;success&quot;</span>
<span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>
&gt;</span>
\u6807\u7B7E
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">show</span>: {
<span class="hljs-attr">primary</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">success</span>: <span class="hljs-literal">true</span>,
},
},
<span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
[<span class="hljs-string">\`show.<span class="hljs-subst">\${event.target.id}</span>\`</span>]: <span class="hljs-literal">false</span>,
});
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>primary</code> <code>success</code> <code>danger</code> <code>warning</code></td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>\u5927\u5C0F, \u53EF\u9009\u503C\u4E3A <code>large</code> <code>medium</code></td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>\u6807\u7B7E\u989C\u8272</td><td><em>string</em></td><td>-</td></tr><tr><td>plain</td><td>\u662F\u5426\u4E3A\u7A7A\u5FC3\u6837\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>round</td><td>\u662F\u5426\u4E3A\u5706\u89D2\u6837\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>mark</td><td>\u662F\u5426\u4E3A\u6807\u8BB0\u6837\u5F0F</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>text-color</td><td>\u6587\u672C\u989C\u8272\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E <code>color</code> \u5C5E\u6027</td><td><em>string</em></td><td><code>white</code></td></tr><tr><td>closeable</td><td>\u662F\u5426\u4E3A\u53EF\u5173\u95ED\u6807\u7B7E</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49 Tag \u663E\u793A\u5185\u5BB9</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:close</td><td>\u5173\u95ED\u6807\u7B7E\u65F6\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,16),yn=[fn],_n={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",qn,yn))}},xn={class:"van-doc-markdown-body"},wn=d(`<h1>Toast \u8F7B\u63D0\u793A</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u5728\u9875\u9762\u4E2D\u95F4\u5F39\u51FA\u9ED1\u8272\u534A\u900F\u660E\u63D0\u793A\uFF0C\u7528\u4E8E\u6D88\u606F\u901A\u77E5\u3001\u52A0\u8F7D\u63D0\u793A\u3001\u64CD\u4F5C\u7ED3\u679C\u63D0\u793A\u7B49\u573A\u666F\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-toast&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/toast/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="wen-zi-ti-shi" tabindex="-1">\u6587\u5B57\u63D0\u793A</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@vant/weapp/toast/toast&#39;</span>;
<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;\u6211\u662F\u63D0\u793A\u6587\u6848\uFF0C\u5EFA\u8BAE\u4E0D\u8D85\u8FC7\u5341\u4E94\u5B57~&#39;</span>);
</code></pre><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;van-toast&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-ti-shi" tabindex="-1">\u52A0\u8F7D\u63D0\u793A</h3><p>\u4F7F\u7528 <code>Toast.loading</code> \u65B9\u6CD5\u5C55\u793A\u52A0\u8F7D\u63D0\u793A\uFF0C\u901A\u8FC7 <code>forbidClick</code> \u5C5E\u6027\u53EF\u4EE5\u7981\u7528\u80CC\u666F\u70B9\u51FB\uFF0C\u901A\u8FC7 <code>loadingType</code> \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B\u3002</p><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u52A0\u8F7D\u4E2D...&#39;</span>,
<span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,
});
<span class="hljs-comment">// \u81EA\u5B9A\u4E49\u52A0\u8F7D\u56FE\u6807</span>
<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u52A0\u8F7D\u4E2D...&#39;</span>,
<span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">loadingType</span>: <span class="hljs-string">&#39;spinner&#39;</span>,
});
</code></pre></div><div class="van-doc-card"><h3 id="cheng-gong-shi-bai-ti-shi" tabindex="-1">\u6210\u529F/\u5931\u8D25\u63D0\u793A</h3><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#39;\u6210\u529F\u6587\u6848&#39;</span>);
<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">fail</span>(<span class="hljs-string">&#39;\u5931\u8D25\u6587\u6848&#39;</span>);
</code></pre></div><div class="van-doc-card"><h3 id="dong-tai-geng-xin-ti-shi" tabindex="-1">\u52A8\u6001\u66F4\u65B0\u63D0\u793A</h3><pre><code class="language-javascript"><span class="hljs-keyword">const</span> toast = <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({
<span class="hljs-attr">duration</span>: <span class="hljs-number">0</span>, <span class="hljs-comment">// \u6301\u7EED\u5C55\u793A toast</span>
<span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u5012\u8BA1\u65F6 3 \u79D2&#39;</span>,
<span class="hljs-attr">selector</span>: <span class="hljs-string">&#39;#custom-selector&#39;</span>,
});
<span class="hljs-keyword">let</span> second = <span class="hljs-number">3</span>;
<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =&gt;</span> {
second--;
<span class="hljs-keyword">if</span> (second) {
toast.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">message</span>: <span class="hljs-string">\`\u5012\u8BA1\u65F6 <span class="hljs-subst">\${second}</span> \u79D2\`</span>,
});
} <span class="hljs-keyword">else</span> {
<span class="hljs-built_in">clearInterval</span>(timer);
<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">clear</span>();
}
}, <span class="hljs-number">1000</span>);
</code></pre><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-toast</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;custom-selector&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="onclose-hui-diao-han-shu" tabindex="-1">OnClose \u56DE\u8C03\u51FD\u6570</h3><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>({
<span class="hljs-attr">type</span>: <span class="hljs-string">&#39;success&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u63D0\u4EA4\u6210\u529F&#39;</span>,
<span class="hljs-attr">onClose</span>: <span class="hljs-function">() =&gt;</span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#39;\u6267\u884COnClose\u51FD\u6570&#39;</span>);
},
});
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3><table><thead><tr><th>\u65B9\u6CD5\u540D</th><th>\u53C2\u6570</th><th>\u8FD4\u56DE\u503C</th><th>\u4ECB\u7ECD</th></tr></thead><tbody><tr><td>Toast</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u63D0\u793A</td></tr><tr><td>Toast.loading</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u52A0\u8F7D\u63D0\u793A</td></tr><tr><td>Toast.success</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u6210\u529F\u63D0\u793A</td></tr><tr><td>Toast.fail</td><td><code>options | message</code></td><td>toast \u5B9E\u4F8B</td><td>\u5C55\u793A\u5931\u8D25\u63D0\u793A</td></tr><tr><td>Toast.clear</td><td><code>clearAll</code></td><td><code>void</code></td><td>\u5173\u95ED\u63D0\u793A</td></tr><tr><td>Toast.setDefaultOptions</td><td><code>options</code></td><td><code>void</code></td><td>\u4FEE\u6539\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548</td></tr><tr><td>Toast.resetDefaultOptions</td><td>-</td><td><code>void</code></td><td>\u91CD\u7F6E\u9ED8\u8BA4\u914D\u7F6E\uFF0C\u5BF9\u6240\u6709 Toast \u751F\u6548</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>type</td><td>\u63D0\u793A\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>loading</code> <code>success</code> <code>fail</code> <code>html</code></td><td><em>string</em></td><td><code>text</code></td></tr><tr><td>position</td><td>\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A <code>top</code> <code>middle</code> <code>bottom</code></td><td><em>string</em></td><td><code>middle</code></td></tr><tr><td>message</td><td>\u5185\u5BB9</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>mask</td><td>\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>forbidClick</td><td>\u662F\u5426\u7981\u6B62\u80CC\u666F\u70B9\u51FB</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loadingType</td><td>\u52A0\u8F7D\u56FE\u6807\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>zIndex</td><td>z-index \u5C42\u7EA7</td><td><em>number</em></td><td><code>1000</code></td></tr><tr><td>duration</td><td>\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Ctoast \u4E0D\u4F1A\u6D88\u5931</td><td><em>number</em></td><td><code>2000</code></td></tr><tr><td>selector</td><td>\u81EA\u5B9A\u4E49\u9009\u62E9\u5668</td><td><em>string</em></td><td><code>van-toast</code></td></tr><tr><td>context</td><td>\u9009\u62E9\u5668\u7684\u9009\u62E9\u8303\u56F4\uFF0C\u53EF\u4EE5\u4F20\u5165\u81EA\u5B9A\u4E49\u7EC4\u4EF6\u7684 this \u4F5C\u4E3A\u4E0A\u4E0B\u6587</td><td><em>object</em></td><td>\u5F53\u524D\u9875\u9762</td></tr><tr><td>onClose</td><td>\u5173\u95ED\u65F6\u7684\u56DE\u8C03\u51FD\u6570</td><td><em>Function</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u5185\u5BB9</td></tr></tbody></table></div>`,13),kn=[wn],zn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",xn,kn))}},Cn={class:"van-doc-markdown-body"},Pn=d(`<h1>Transition \u52A8\u753B</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u4F7F\u5143\u7D20\u4ECE\u4E00\u79CD\u6837\u5F0F\u9010\u6E10\u53D8\u5316\u4E3A\u53E6\u4E00\u79CD\u6837\u5F0F\u7684\u6548\u679C\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-transition&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/transition/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u5C06\u5143\u7D20\u5305\u88F9\u5728 transition \u7EC4\u4EF6\u5185\uFF0C\u5728\u5143\u7D20\u5C55\u793A/\u9690\u85CF\u65F6\uFF0C\u4F1A\u6709\u76F8\u5E94\u7684\u8FC7\u6E21\u52A8\u753B\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-transition</span> <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span> <span class="hljs-attr">custom-class</span>=<span class="hljs-string">&quot;block&quot;</span>&gt;</span>\u5185\u5BB9<span class="hljs-tag">&lt;/<span class="hljs-name">van-transition</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="dong-hua-lei-xing" tabindex="-1">\u52A8\u753B\u7C7B\u578B</h3><p>transition \u7EC4\u4EF6\u5185\u7F6E\u4E86\u591A\u79CD\u52A8\u753B\uFF0C\u53EF\u4EE5\u901A\u8FC7<code>name</code>\u5B57\u6BB5\u6307\u5B9A\u52A8\u753B\u7C7B\u578B\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-transition</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;fade-up&quot;</span> /&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">\u9AD8\u7EA7\u7528\u6CD5</h3><p>\u53EF\u4EE5\u901A\u8FC7\u5916\u90E8\u6837\u5F0F\u7C7B\u81EA\u5B9A\u4E49\u8FC7\u6E21\u6548\u679C\uFF0C\u8FD8\u53EF\u4EE5\u5B9A\u5236\u8FDB\u5165\u548C\u79FB\u51FA\u7684\u6301\u7EED\u65F6\u95F4\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-transition</span>
<span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>
<span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span>
<span class="hljs-attr">duration</span>=<span class="hljs-string">&quot;{{ { enter: 300, leave: 1000 } }}&quot;</span>
<span class="hljs-attr">enter-class</span>=<span class="hljs-string">&quot;van-enter-class&quot;</span>
<span class="hljs-attr">enter-active-class</span>=<span class="hljs-string">&quot;van-enter-active-class&quot;</span>
<span class="hljs-attr">leave-active-class</span>=<span class="hljs-string">&quot;van-leave-active-class&quot;</span>
<span class="hljs-attr">leave-to-class</span>=<span class="hljs-string">&quot;van-leave-to-class&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.van-enter-active-class</span>,
<span class="hljs-selector-class">.van-leave-active-class</span> {
<span class="hljs-attribute">transition-property</span>: background-color, transform;
}
<span class="hljs-selector-class">.van-enter-class</span>,
<span class="hljs-selector-class">.van-leave-to-class</span> {
<span class="hljs-attribute">background-color</span>: red;
<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate</span>(-<span class="hljs-number">360deg</span>) <span class="hljs-built_in">translate3d</span>(-<span class="hljs-number">100%</span>, -<span class="hljs-number">100%</span>, <span class="hljs-number">0</span>);
}
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u52A8\u753B\u7C7B\u578B</td><td><em>string</em></td><td><code>fade</code></td></tr><tr><td>show</td><td>\u662F\u5426\u5C55\u793A\u7EC4\u4EF6</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>duration</td><td>\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u6BEB\u79D2</td><td><em>number | object</em></td><td><code>300</code></td></tr><tr><td>custom-style</td><td>\u81EA\u5B9A\u4E49\u6837\u5F0F</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:before-enter</td><td>\u8FDB\u5165\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:enter</td><td>\u8FDB\u5165\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-enter</td><td>\u8FDB\u5165\u540E\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:before-leave</td><td>\u79BB\u5F00\u524D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:leave</td><td>\u79BB\u5F00\u4E2D\u89E6\u53D1</td><td>-</td></tr><tr><td>bind:after-leave</td><td>\u79BB\u5F00\u540E\u89E6\u53D1</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>custom-class</td><td>\u6839\u8282\u70B9\u6837\u5F0F\u7C7B</td></tr><tr><td>enter-class</td><td>\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u5F00\u59CB\u72B6\u6001\u3002\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u524D\u751F\u6548\uFF0C\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u540E\u7684\u4E0B\u4E00\u5E27\u79FB\u9664\u3002</td></tr><tr><td>enter-active-class</td><td>\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u751F\u6548\u65F6\u7684\u72B6\u6001\u3002\u5728\u6574\u4E2A\u8FDB\u5165\u8FC7\u6E21\u7684\u9636\u6BB5\u4E2D\u5E94\u7528\uFF0C\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u524D\u751F\u6548\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002\u8FD9\u4E2A\u7C7B\u53EF\u4EE5\u88AB\u7528\u6765\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u8FC7\u7A0B\u65F6\u95F4\uFF0C\u5EF6\u8FDF\u548C\u66F2\u7EBF\u51FD\u6570\u3002</td></tr><tr><td>enter-to-class</td><td>\u5B9A\u4E49\u8FDB\u5165\u8FC7\u6E21\u7684\u7ED3\u675F\u72B6\u6001\u3002\u5728\u5143\u7D20\u88AB\u63D2\u5165\u4E4B\u540E\u4E0B\u4E00\u5E27\u751F\u6548 (\u4E0E\u6B64\u540C\u65F6 enter-class \u88AB\u79FB\u9664)\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002</td></tr><tr><td>leave-class</td><td>\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u5F00\u59CB\u72B6\u6001\u3002\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u65F6\u7ACB\u523B\u751F\u6548\uFF0C\u4E0B\u4E00\u5E27\u88AB\u79FB\u9664\u3002</td></tr><tr><td>leave-active-class</td><td>\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u751F\u6548\u65F6\u7684\u72B6\u6001\u3002\u5728\u6574\u4E2A\u79BB\u5F00\u8FC7\u6E21\u7684\u9636\u6BB5\u4E2D\u5E94\u7528\uFF0C\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u65F6\u7ACB\u523B\u751F\u6548\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002\u8FD9\u4E2A\u7C7B\u53EF\u4EE5\u88AB\u7528\u6765\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u8FC7\u7A0B\u65F6\u95F4\uFF0C\u5EF6\u8FDF\u548C\u66F2\u7EBF\u51FD\u6570\u3002</td></tr><tr><td>leave-to-class</td><td>\u5B9A\u4E49\u79BB\u5F00\u8FC7\u6E21\u7684\u7ED3\u675F\u72B6\u6001\u3002\u5728\u79BB\u5F00\u8FC7\u6E21\u88AB\u89E6\u53D1\u4E4B\u540E\u4E0B\u4E00\u5E27\u751F\u6548 (\u4E0E\u6B64\u540C\u65F6 leave-class \u88AB\u5220\u9664)\uFF0C\u5728\u8FC7\u6E21/\u52A8\u753B\u5B8C\u6210\u4E4B\u540E\u79FB\u9664\u3002</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dong-hua-lei-xing-1" tabindex="-1">\u52A8\u753B\u7C7B\u578B</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>fade</td><td>\u6DE1\u5165</td></tr><tr><td>fade-up</td><td>\u4E0A\u6ED1\u6DE1\u5165</td></tr><tr><td>fade-down</td><td>\u4E0B\u6ED1\u6DE1\u5165</td></tr><tr><td>fade-left</td><td>\u5DE6\u6ED1\u6DE1\u5165</td></tr><tr><td>fade-right</td><td>\u53F3\u6ED1\u6DE1\u5165</td></tr><tr><td>slide-up</td><td>\u4E0A\u6ED1\u8FDB\u5165</td></tr><tr><td>slide-down</td><td>\u4E0B\u6ED1\u8FDB\u5165</td></tr><tr><td>slide-left</td><td>\u5DE6\u6ED1\u8FDB\u5165</td></tr><tr><td>slide-right</td><td>\u53F3\u6ED1\u8FDB\u5165</td></tr></tbody></table></div>`,12),Sn=[Pn],Dn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",Cn,Sn))}},In={class:"van-doc-markdown-body"},Tn=d(`<h1>TreeSelect \u5206\u7C7B\u9009\u62E9</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u4ECE\u4E00\u7EC4\u76F8\u5173\u8054\u7684\u6570\u636E\u96C6\u5408\u4E2D\u8FDB\u884C\u9009\u62E9\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u8BE6\u7EC6\u4ECB\u7ECD\u89C1<a href="#/quickstart#yin-ru-zu-jian" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-tree-select&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/tree-select/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="dan-xuan-mo-shi" tabindex="-1">\u5355\u9009\u6A21\u5F0F</h3><p>\u53EF\u4EE5\u5728\u4EFB\u610F\u4F4D\u7F6E\u4E0A\u4F7F\u7528 van-tree-select \u6807\u7B7E\u3002\u4F20\u5165\u5BF9\u5E94\u7684\u6570\u636E\u5373\u53EF\u3002\u6B64\u7EC4\u4EF6\u652F\u6301\u5355\u9009\u6216\u591A\u9009\uFF0C\u5177\u4F53\u884C\u4E3A\u5B8C\u5168\u57FA\u4E8E\u4E8B\u4EF6 click-item \u7684\u5B9E\u73B0\u903B\u8F91\u5982\u4F55\u4E3A\u5C5E\u6027 active-id \u8D4B\u503C\uFF0C\u5F53 active-id \u4E3A\u6570\u7EC4\u65F6\u5373\u4E3A\u591A\u9009\u72B6\u6001\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tree-select</span>
<span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>
<span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>
<span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>
<span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>
<span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">mainActiveIndex</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">activeId</span>: <span class="hljs-literal">null</span>,
},
<span class="hljs-title function_">onClickNav</span>(<span class="hljs-params">{ detail = {} }</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">mainActiveIndex</span>: detail.<span class="hljs-property">index</span> || <span class="hljs-number">0</span>,
});
},
<span class="hljs-title function_">onClickItem</span>(<span class="hljs-params">{ detail = {} }</span>) {
<span class="hljs-keyword">const</span> activeId = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">activeId</span> === detail.<span class="hljs-property">id</span> ? <span class="hljs-literal">null</span> : detail.<span class="hljs-property">id</span>;
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ activeId });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="duo-xuan-mo-shi" tabindex="-1">\u591A\u9009\u6A21\u5F0F</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tree-select</span>
<span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>
<span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>
<span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>
<span class="hljs-attr">max</span>=<span class="hljs-string">&quot;{{ max }}&quot;</span>
<span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>
<span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">mainActiveIndex</span>: <span class="hljs-number">0</span>,
<span class="hljs-attr">activeId</span>: [],
<span class="hljs-attr">max</span>: <span class="hljs-number">2</span>,
},
<span class="hljs-title function_">onClickNav</span>(<span class="hljs-params">{ detail = {} }</span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({
<span class="hljs-attr">mainActiveIndex</span>: detail.<span class="hljs-property">index</span> || <span class="hljs-number">0</span>,
});
},
<span class="hljs-title function_">onClickItem</span>(<span class="hljs-params">{ detail = {} }</span>) {
<span class="hljs-keyword">const</span> { activeId } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;
<span class="hljs-keyword">const</span> index = activeId.<span class="hljs-title function_">indexOf</span>(detail.<span class="hljs-property">id</span>);
<span class="hljs-keyword">if</span> (index &gt; -<span class="hljs-number">1</span>) {
activeId.<span class="hljs-title function_">splice</span>(index, <span class="hljs-number">1</span>);
} <span class="hljs-keyword">else</span> {
activeId.<span class="hljs-title function_">push</span>(detail.<span class="hljs-property">id</span>);
}
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ activeId });
},
});
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-nei-rong" tabindex="-1">\u81EA\u5B9A\u4E49\u5185\u5BB9</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tree-select</span>
<span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>
<span class="hljs-attr">height</span>=<span class="hljs-string">&quot;55vw&quot;</span>
<span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>
<span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>
<span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>
<span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>
&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/apple-1.jpg&quot;</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;content&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-tree-select</span>&gt;</span>
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>items</td><td>\u5206\u7C7B\u663E\u793A\u6240\u9700\u7684\u6570\u636E</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>height</td><td>\u9AD8\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>number | string</em></td><td><code>300</code></td></tr><tr><td>main-active-index</td><td>\u5DE6\u4FA7\u9009\u4E2D\u9879\u7684\u7D22\u5F15</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>active-id</td><td>\u53F3\u4FA7\u9009\u4E2D\u9879\u7684 id\uFF0C\u652F\u6301\u4F20\u5165\u6570\u7EC4</td><td><em>string | number | Array</em></td><td><code>0</code></td></tr><tr><td>max</td><td>\u53F3\u4FA7\u9879\u6700\u5927\u9009\u4E2D\u4E2A\u6570</td><td><em>number</em></td><td><em>Infinity</em></td></tr><tr><td>selected-icon <code>v1.5.0</code></td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u680F\u9009\u4E2D\u72B6\u6001\u7684\u56FE\u6807</td><td><em>string</em></td><td><code>success</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:click-nav</td><td>\u5DE6\u4FA7\u5BFC\u822A\u70B9\u51FB\u65F6\uFF0C\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail.index\uFF1A\u88AB\u70B9\u51FB\u7684\u5BFC\u822A\u7684\u7D22\u5F15</td></tr><tr><td>bind:click-item</td><td>\u53F3\u4FA7\u9009\u62E9\u9879\u88AB\u70B9\u51FB\u65F6\uFF0C\u4F1A\u89E6\u53D1\u7684\u4E8B\u4EF6</td><td>event.detail: \u8BE5\u70B9\u51FB\u9879\u7684\u6570\u636E</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>content</td><td>\u81EA\u5B9A\u4E49\u53F3\u4FA7\u533A\u57DF\u5185\u5BB9\uFF0C\u5982\u679C\u5B58\u5728 items\uFF0C\u5219\u63D2\u5165\u5728\u9876\u90E8</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="items-shu-ju-jie-gou" tabindex="-1">items \u6570\u636E\u7ED3\u6784</h3><p><code>items</code> \u6574\u4F53\u4E3A\u4E00\u4E2A\u6570\u7EC4\uFF0C\u6570\u7EC4\u5185\u5305\u542B\u4E00\u7CFB\u5217\u63CF\u8FF0\u5206\u7C7B\u7684\u5BF9\u8C61\u3002\u6BCF\u4E2A\u5206\u7C7B\u91CC\uFF0Ctext \u8868\u793A\u5F53\u524D\u5206\u7C7B\u7684\u540D\u79F0\u3002children \u8868\u793A\u5206\u7C7B\u91CC\u7684\u53EF\u9009\u9879\uFF0C\u4E3A\u6570\u7EC4\u7ED3\u6784\uFF0Cid \u88AB\u7528\u6765\u552F\u4E00\u6807\u8BC6\u6BCF\u4E2A\u9009\u9879\u3002</p><pre><code class="language-javascript">[
{
<span class="hljs-comment">// \u5BFC\u822A\u540D\u79F0</span>
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6240\u6709\u57CE\u5E02&#39;</span>,
<span class="hljs-comment">// \u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u5FBD\u6807\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301</span>
<span class="hljs-attr">badge</span>: <span class="hljs-number">3</span>,
<span class="hljs-comment">// \u662F\u5426\u5728\u5BFC\u822A\u540D\u79F0\u53F3\u4E0A\u89D2\u663E\u793A\u5C0F\u7EA2\u70B9\uFF0C1.5.0 \u7248\u672C\u5F00\u59CB\u652F\u6301</span>
<span class="hljs-attr">dot</span>: <span class="hljs-literal">true</span>,
<span class="hljs-comment">// \u7981\u7528\u9009\u9879</span>
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span>,
<span class="hljs-comment">// \u8BE5\u5BFC\u822A\u4E0B\u6240\u6709\u7684\u53EF\u9009\u9879</span>
<span class="hljs-attr">children</span>: [
{
<span class="hljs-comment">// \u540D\u79F0</span>
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u6E29\u5DDE&#39;</span>,
<span class="hljs-comment">// id\uFF0C\u4F5C\u4E3A\u5339\u914D\u9009\u4E2D\u72B6\u6001\u7684\u6807\u8BC6</span>
<span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,
<span class="hljs-comment">// \u7981\u7528\u9009\u9879</span>
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&#39;\u676D\u5DDE&#39;</span>,
<span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,
},
],
},
];
</code></pre></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">\u5916\u90E8\u6837\u5F0F\u7C7B</h3><table><thead><tr><th>\u7C7B\u540D</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>main-item-class</td><td>\u5DE6\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>content-item-class</td><td>\u53F3\u4FA7\u9009\u9879\u6837\u5F0F\u7C7B</td></tr><tr><td>main-active-class</td><td>\u5DE6\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B</td></tr><tr><td>content-active-class</td><td>\u53F3\u4FA7\u9009\u9879\u9009\u4E2D\u6837\u5F0F\u7C7B</td></tr><tr><td>main-disabled-class</td><td>\u5DE6\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B</td></tr><tr><td>content-disabled-class</td><td>\u53F3\u4FA7\u9009\u9879\u7981\u7528\u6837\u5F0F\u7C7B</td></tr></tbody></table></div>`,13),$n=[Tn],An={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",In,$n))}},En={class:"van-doc-markdown-body"},Fn=d(`<h1>Uploader \u6587\u4EF6\u4E0A\u4F20</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3><p>\u7528\u4E8E\u5C06\u672C\u5730\u7684\u56FE\u7247\u6216\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\uFF0C\u5E76\u5728\u4E0A\u4F20\u8FC7\u7A0B\u4E2D\u5C55\u793A\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u8FDB\u5EA6\u3002\u76EE\u524D Uploader \u7EC4\u4EF6\u4E0D\u5305\u542B\u5C06\u6587\u4EF6\u4E0A\u4F20\u81F3\u670D\u52A1\u5668\u7684\u63A5\u53E3\u903B\u8F91\uFF0C\u8BE5\u6B65\u9AA4\u9700\u8981\u81EA\u884C\u5B9E\u73B0\u3002</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3><p>\u5728<code>app.json</code>\u6216<code>index.json</code>\u4E2D\u5F15\u5165\u7EC4\u4EF6\uFF0C\u9ED8\u8BA4\u4E3A<code>ES6</code>\u7248\u672C\uFF0C<code>ES5</code>\u5F15\u5165\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a>\u3002</p><pre><code class="language-json"><span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">&quot;van-uploader&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;@vant/weapp/uploader/index&quot;</span>
<span class="hljs-punctuation">}</span>
</code></pre><blockquote><p>Vant Weapp 1.0 \u7248\u672C\u5F00\u59CB\u652F\u6301\u6B64\u7EC4\u4EF6\uFF0C\u5347\u7EA7\u65B9\u5F0F\u53C2\u89C1<a href="#/quickstart" target="_blank">\u5FEB\u901F\u4E0A\u624B</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3><p>\u6587\u4EF6\u4E0A\u4F20\u5B8C\u6BD5\u540E\u4F1A\u89E6\u53D1<code>after-read</code>\u56DE\u8C03\u51FD\u6570\uFF0C\u83B7\u53D6\u5230\u5BF9\u5E94\u7684\u6587\u4EF6\u7684\u4E34\u65F6\u5730\u5740\uFF0C\u7136\u540E\u518D\u4F7F\u7528<code>wx.uploadFile</code>\u5C06\u56FE\u7247\u4E0A\u4F20\u5230\u8FDC\u7A0B\u670D\u52A1\u5668\u4E0A\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">fileList</span>: [],
},
<span class="hljs-title function_">afterRead</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { file } = event.<span class="hljs-property">detail</span>;
<span class="hljs-comment">// \u5F53\u8BBE\u7F6E mutiple \u4E3A true \u65F6, file \u4E3A\u6570\u7EC4\u683C\u5F0F\uFF0C\u5426\u5219\u4E3A\u5BF9\u8C61\u683C\u5F0F</span>
wx.<span class="hljs-title function_">uploadFile</span>({
<span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://example.weixin.qq.com/upload&#39;</span>, <span class="hljs-comment">// \u4EC5\u4E3A\u793A\u4F8B\uFF0C\u975E\u771F\u5B9E\u7684\u63A5\u53E3\u5730\u5740</span>
<span class="hljs-attr">filePath</span>: file.<span class="hljs-property">url</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;file&#39;</span>,
<span class="hljs-attr">formData</span>: { <span class="hljs-attr">user</span>: <span class="hljs-string">&#39;test&#39;</span> },
<span class="hljs-title function_">success</span>(<span class="hljs-params">res</span>) {
<span class="hljs-comment">// \u4E0A\u4F20\u5B8C\u6210\u9700\u8981\u66F4\u65B0 fileList</span>
<span class="hljs-keyword">const</span> { fileList = [] } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;
fileList.<span class="hljs-title function_">push</span>({ ...file, <span class="hljs-attr">url</span>: res.<span class="hljs-property">data</span> });
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ fileList });
},
});
},
});
</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-yu-lan" tabindex="-1">\u56FE\u7247\u9884\u89C8</h3><p>\u901A\u8FC7\u5411\u7EC4\u4EF6\u4F20\u5165<code>file-list</code>\u5C5E\u6027\uFF0C\u53EF\u4EE5\u7ED1\u5B9A\u5DF2\u7ECF\u4E0A\u4F20\u7684\u56FE\u7247\u5217\u8868\uFF0C\u5E76\u5C55\u793A\u56FE\u7247\u5217\u8868\u7684\u9884\u89C8\u56FE\u3002file-list \u7684\u8BE6\u7EC6\u7ED3\u6784\u53EF\u89C1\u4E0B\u65B9\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">fileList</span>: [
{
<span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u56FE\u72471&#39;</span>,
},
<span class="hljs-comment">// Uploader \u6839\u636E\u6587\u4EF6\u540E\u7F00\u6765\u5224\u65AD\u662F\u5426\u4E3A\u56FE\u7247\u6587\u4EF6</span>
<span class="hljs-comment">// \u5982\u679C\u56FE\u7247 URL \u4E2D\u4E0D\u5305\u542B\u7C7B\u578B\u4FE1\u606F\uFF0C\u53EF\u4EE5\u6DFB\u52A0 isImage \u6807\u8BB0\u6765\u58F0\u660E</span>
{
<span class="hljs-attr">url</span>: <span class="hljs-string">&#39;http://iph.href.lu/60x60?text=default&#39;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&#39;\u56FE\u72472&#39;</span>,
<span class="hljs-attr">isImage</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">deletable</span>: <span class="hljs-literal">true</span>,
},
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-ke-shan-chu-zhuang-tai" tabindex="-1">\u56FE\u7247\u53EF\u5220\u9664\u72B6\u6001</h3><p>\u901A\u8FC7<code>deletable</code>\u5C5E\u6027\u53EF\u63A7\u5236\u662F\u5426\u5F00\u542F\u6240\u6709\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0C<code>deletable</code>\u9ED8\u8BA4\u4E3A<code>true</code>\uFF0C\u5373\u6240\u6709\u56FE\u7247\u90FD\u53EF\u5220\u9664\u3002</p><p>\u82E5\u5E0C\u671B\u63A7\u5236\u5355\u5F20\u56FE\u7247\u7684\u53EF\u5220\u9664\u72B6\u6001\uFF0C\u53EF\u5C06<code>deletable</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code>\uFF0C\u5E76\u5728<code>fileList</code>\u4E2D\u4E3A\u6BCF\u4E00\u9879\u8BBE\u7F6E<code>deletable</code>\u5C5E\u6027\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> <span class="hljs-attr">deletable</span>=<span class="hljs-string">&quot;{{ true }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">fileList</span>: [
{
<span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,
},
{
<span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/tree.jpg&#39;</span>,
<span class="hljs-attr">deletable</span>: <span class="hljs-literal">false</span>,
},
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="shang-chuan-zhuang-tai" tabindex="-1">\u4E0A\u4F20\u72B6\u6001</h3><p>\u901A\u8FC7<code>status</code>\u5C5E\u6027\u53EF\u4EE5\u6807\u8BC6\u4E0A\u4F20\u72B6\u6001\uFF0C<code>uploading</code>\u8868\u793A\u4E0A\u4F20\u4E2D\uFF0C<code>failed</code>\u8868\u793A\u4E0A\u4F20\u5931\u8D25\uFF0C<code>done</code>\u8868\u793A\u4E0A\u4F20\u5B8C\u6210\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span> <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span> /&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">fileList</span>: [
{
<span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,
<span class="hljs-attr">status</span>: <span class="hljs-string">&#39;uploading&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u4E2D&#39;</span>,
},
{
<span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/tree.jpg&#39;</span>,
<span class="hljs-attr">status</span>: <span class="hljs-string">&#39;failed&#39;</span>,
<span class="hljs-attr">message</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u5931\u8D25&#39;</span>,
},
],
},
});
</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shang-chuan-shu-liang" tabindex="-1">\u9650\u5236\u4E0A\u4F20\u6570\u91CF</h3><p>\u901A\u8FC7<code>max-count</code>\u5C5E\u6027\u53EF\u4EE5\u9650\u5236\u4E0A\u4F20\u6587\u4EF6\u7684\u6570\u91CF\uFF0C\u4E0A\u4F20\u6570\u91CF\u8FBE\u5230\u9650\u5236\u540E\uFF0C\u4F1A\u81EA\u52A8\u9690\u85CF\u4E0A\u4F20\u533A\u57DF\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span>
<span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span>
<span class="hljs-attr">max-count</span>=<span class="hljs-string">&quot;2&quot;</span>
<span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span>
/&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shang-chuan-yang-shi" tabindex="-1">\u81EA\u5B9A\u4E49\u4E0A\u4F20\u6837\u5F0F</h3><p>\u901A\u8FC7\u63D2\u69FD\u53EF\u4EE5\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF\u7684\u6837\u5F0F\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">van-button</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;photo&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>&gt;</span>\u4E0A\u4F20\u56FE\u7247<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">van-uploader</span>&gt;</span>
</code></pre></div><div class="van-doc-card"><h3 id="shang-chuan-qian-xiao-yan" tabindex="-1">\u4E0A\u4F20\u524D\u6821\u9A8C</h3><p>\u5C06<code>use-before-read</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code>\uFF0C\u7136\u540E\u7ED1\u5B9A <code>before-read</code> \u4E8B\u4EF6\u53EF\u4EE5\u5728\u4E0A\u4F20\u524D\u8FDB\u884C\u6821\u9A8C\uFF0C\u8C03\u7528 <code>callback</code> \u65B9\u6CD5\u4F20\u5165 <code>true</code> \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0C\u4F20\u5165 <code>false</code> \u8868\u793A\u6821\u9A8C\u5931\u8D25\u3002</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span>
<span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span>
<span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;media&quot;</span>
<span class="hljs-attr">use-before-read</span>
<span class="hljs-attr">bind:before-read</span>=<span class="hljs-string">&quot;beforeRead&quot;</span>
<span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span>
/&gt;</span>
</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({
<span class="hljs-attr">data</span>: {
<span class="hljs-attr">fileList</span>: [],
},
<span class="hljs-title function_">beforeRead</span>(<span class="hljs-params">event</span>) {
<span class="hljs-keyword">const</span> { file, callback } = event.<span class="hljs-property">detail</span>;
<span class="hljs-title function_">callback</span>(file.<span class="hljs-property">type</span> === <span class="hljs-string">&#39;image&#39;</span>);
},
});
</code></pre></div><h2 id="yun-kai-fa-shi-li" tabindex="-1">\u4E91\u5F00\u53D1\u793A\u4F8B</h2><div class="van-doc-card"><h3 id="shang-chuan-tu-pian-zhi-yun-cun-chu" tabindex="-1">\u4E0A\u4F20\u56FE\u7247\u81F3\u4E91\u5B58\u50A8</h3><p>\u5728\u5F00\u53D1\u4E2D\uFF0C\u53EF\u4EE5\u5229\u7528<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html" target="_blank">\u5C0F\u7A0B\u5E8F\u4E91\u5F00\u53D1</a>\u7684\u4E91\u5B58\u50A8\u80FD\u529B\uFF0C\u5C06\u56FE\u7247\u4E0A\u4F20\u81F3\u4E91\u5B58\u50A8\u5185\u3002\u7136\u540E\u6839\u636E\u8FD4\u56DE\u7684<code>fileiId</code>\u6765\u4E0B\u8F7D\u56FE\u7247\u3001\u5220\u9664\u56FE\u7247\u548C\u66FF\u6362\u4E34\u65F6\u94FE\u63A5\u3002</p><pre><code class="language-js"><span class="hljs-comment">// \u4E0A\u4F20\u56FE\u7247</span>
<span class="hljs-title function_">uploadToCloud</span>(<span class="hljs-params"></span>) {
wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">init</span>();
<span class="hljs-keyword">const</span> { fileList } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;
<span class="hljs-keyword">if</span> (!fileList.<span class="hljs-property">length</span>) {
wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u8BF7\u9009\u62E9\u56FE\u7247&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });
} <span class="hljs-keyword">else</span> {
<span class="hljs-keyword">const</span> uploadTasks = fileList.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">file, index</span>) =&gt;</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">uploadFilePromise</span>(<span class="hljs-string">\`my-photo<span class="hljs-subst">\${index}</span>.png\`</span>, file));
<span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>(uploadTasks)
.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {
wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u6210\u529F&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });
<span class="hljs-keyword">const</span> newFileList = data.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> ({ <span class="hljs-attr">url</span>: item.<span class="hljs-property">fileID</span> }));
<span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">cloudPath</span>: data, <span class="hljs-attr">fileList</span>: newFileList });
})
.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {
wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;\u4E0A\u4F20\u5931\u8D25&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e);
});
}
}
<span class="hljs-title function_">uploadFilePromise</span>(<span class="hljs-params">fileName, chooseResult</span>) {
<span class="hljs-keyword">return</span> wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">uploadFile</span>({
<span class="hljs-attr">cloudPath</span>: fileName,
<span class="hljs-attr">filePath</span>: chooseResult.<span class="hljs-property">url</span>
});
}
</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>name</td><td>\u6807\u8BC6\u7B26\uFF0C\u53EF\u4EE5\u5728\u56DE\u8C03\u51FD\u6570\u7684\u7B2C\u4E8C\u9879\u53C2\u6570\u4E2D\u83B7\u53D6</td><td><em>string | number</em></td><td>-</td></tr><tr><td>accept</td><td>\u63A5\u53D7\u7684\u6587\u4EF6\u7C7B\u578B, \u53EF\u9009\u503C\u4E3A<code>all</code> <code>media</code> <code>image</code> <code>file</code> <code>video</code></td><td><em>string</em></td><td><code>image</code></td></tr><tr><td>sizeType</td><td>\u6240\u9009\u7684\u56FE\u7247\u7684\u5C3A\u5BF8, \u5F53<code>accept</code>\u4E3A<code>image</code> | <code>media</code> \u7C7B\u578B\u65F6\u8BBE\u7F6E\u6240\u9009\u56FE\u7247\u7684\u5C3A\u5BF8\u53EF\u9009\u503C\u4E3A<code>original</code> <code>compressed</code></td><td><em>string[]</em></td><td><code>[&#39;original&#39;,&#39;compressed&#39;]</code></td></tr><tr><td>preview-size</td><td>\u9884\u89C8\u56FE\u548C\u4E0A\u4F20\u533A\u57DF\u7684\u5C3A\u5BF8\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td><td><em>string | number</em></td><td><code>80px</code></td></tr><tr><td>preview-image</td><td>\u662F\u5426\u5728\u4E0A\u4F20\u5B8C\u6210\u540E\u5C55\u793A\u9884\u89C8\u56FE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>preview-full-image</td><td>\u662F\u5426\u5728\u70B9\u51FB\u9884\u89C8\u56FE\u540E\u5C55\u793A\u5168\u5C4F\u56FE\u7247\u9884\u89C8</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>multiple</td><td>\u662F\u5426\u5F00\u542F\u56FE\u7247\u591A\u9009\uFF0C\u90E8\u5206\u5B89\u5353\u673A\u578B\u4E0D\u652F\u6301</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528\u6587\u4EF6\u4E0A\u4F20</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-upload</td><td>\u662F\u5426\u5C55\u793A\u6587\u4EF6\u4E0A\u4F20\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>deletable</td><td>\u662F\u5426\u5C55\u793A\u5220\u9664\u6309\u94AE</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>capture</td><td>\u56FE\u7247\u6216\u8005\u89C6\u9891\u9009\u53D6\u6A21\u5F0F\uFF0C\u5F53<code>accept</code>\u4E3A<code>image</code> | <code>media</code> \u7C7B\u578B\u65F6\u8BBE\u7F6E<code>capture</code>\u53EF\u9009\u503C\u4E3A<code>camera</code>\u53EF\u4EE5\u76F4\u63A5\u8C03\u8D77\u6444\u50CF\u5934</td><td><em>string[]</em></td><td><code>[&#39;album&#39;, &#39;camera&#39;]</code></td></tr><tr><td>max-size</td><td>\u6587\u4EF6\u5927\u5C0F\u9650\u5236\uFF0C\u5355\u4F4D\u4E3A<code>byte</code></td><td><em>number</em></td><td>-</td></tr><tr><td>max-count</td><td>\u6587\u4EF6\u4E0A\u4F20\u6570\u91CF\u9650\u5236</td><td><em>number</em></td><td>-</td></tr><tr><td>upload-text</td><td>\u4E0A\u4F20\u533A\u57DF\u6587\u5B57\u63D0\u793A</td><td><em>string</em></td><td>-</td></tr><tr><td>video-fit <code>1.10.21</code></td><td>video \u5C01\u9762\u7684\u9884\u89C8\u56FE\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8F<code>video</code>\u7EC4\u4EF6\u7684<code>object-fit</code>\u5C5E\u6027</td><td><em>string</em></td><td><code>contain</code></td></tr><tr><td>image-fit</td><td>\u9884\u89C8\u56FE\u88C1\u526A\u6A21\u5F0F\uFF0C\u53EF\u9009\u503C\u53C2\u8003\u5C0F\u7A0B\u5E8F<code>image</code>\u7EC4\u4EF6\u7684<code>mode</code>\u5C5E\u6027</td><td><em>string</em></td><td><code>scaleToFill</code></td></tr><tr><td>use-before-read</td><td>\u662F\u5426\u5F00\u542F\u6587\u4EF6\u8BFB\u53D6\u524D\u4E8B\u4EF6</td><td><em>boolean</em></td><td>-</td></tr><tr><td>camera</td><td>\u5F53 accept \u4E3A <code>video</code> | <code>media</code> \u65F6\u751F\u6548\uFF0C\u53EF\u9009\u503C\u4E3A <code>back</code> <code>front</code></td><td><em>string</em></td><td>-</td></tr><tr><td>compressed</td><td>\u5F53 accept \u4E3A <code>video</code> \u65F6\u751F\u6548\uFF0C\u662F\u5426\u538B\u7F29\u89C6\u9891\uFF0C\u9ED8\u8BA4\u4E3A<code>true</code></td><td><em>boolean</em></td><td>-</td></tr><tr><td>max-duration</td><td>\u5F53 accept \u4E3A <code>video</code> | <code>media</code> \u65F6\u751F\u6548\uFF0C\u62CD\u6444\u89C6\u9891\u6700\u957F\u62CD\u6444\u65F6\u95F4\uFF0C\u5355\u4F4D\u79D2</td><td><em>number</em></td><td><code>60</code></td></tr><tr><td>media-type <code>v1.10.8</code></td><td>\u5F53 accept \u4E3A <code>media</code> \u65F6\u751F\u6548\uFF0C\u9009\u62E9\u7684\u6587\u4EF6\u7684\u6587\u4EF6\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A <code>image</code> <code>video</code> <code>mix</code></td><td><em>string[]</em></td><td><code>[&#39;image&#39;, &#39;video&#39;, &#39;mix&#39;]</code></td></tr><tr><td>extension <code>v1.10.11</code></td><td>\u5F53 accept \u4E3A <code>file</code> \u65F6\u751F\u6548\uFF0C\u6839\u636E\u6587\u4EF6\u62D3\u5C55\u540D\u8FC7\u6EE4\u53EF\u9009\u62E9\u6587\u4EF6\u3002\u6BCF\u4E00\u9879\u90FD\u4E0D\u80FD\u662F\u7A7A\u5B57\u7B26\u4E32\u3002\u9ED8\u8BA4\u4E0D\u8FC7\u6EE4</td><td><em>string[] | undefined</em></td><td>-</td></tr><tr><td>showmenu <code>v1.10.13</code></td><td>\u9884\u89C8\u56FE\u7247\u65F6\uFF0C\u662F\u5426\u663E\u793A\u957F\u6309\u83DC\u5355</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>upload-icon</td><td>\u4E0A\u4F20\u533A\u57DF\u56FE\u6807\uFF0C\u53EF\u9009\u503C\u89C1 <a href="#/icon" target="_blank">Icon \u7EC4\u4EF6</a></td><td><em>string</em></td><td><code>plus</code></td></tr></tbody></table><h4 id="accept-de-he-fa-zhi" tabindex="-1">accept \u7684\u5408\u6CD5\u503C</h4><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td><code>media</code></td><td>\u56FE\u7247\u548C\u89C6\u9891</td></tr><tr><td><code>image</code></td><td>\u56FE\u7247</td></tr><tr><td><code>video</code></td><td>\u89C6\u9891</td></tr><tr><td><code>file</code></td><td>\u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u56FE\u7247\u548C\u89C6\u9891\u4EE5\u5916\u7684\u6587\u4EF6</td></tr><tr><td><code>all</code></td><td>\u4ECE\u5BA2\u6237\u7AEF\u4F1A\u8BDD\u9009\u62E9\u6240\u6709\u6587\u4EF6</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="filelist" tabindex="-1">FileList</h3><p><code>file-list</code> \u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u5305\u542B\u4EE5\u4E0B <code>key</code>\u3002</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td><code>url</code></td><td>\u56FE\u7247\u548C\u89C6\u9891\u7684\u7F51\u7EDC\u8D44\u6E90\u5730\u5740</td></tr><tr><td><code>name</code></td><td>\u6587\u4EF6\u540D\u79F0\uFF0C\u89C6\u9891\u5C06\u5728\u5168\u5C4F\u9884\u89C8\u65F6\u4F5C\u4E3A\u6807\u9898\u663E\u793A</td></tr><tr><td><code>thumb</code></td><td>\u56FE\u7247\u7F29\u7565\u56FE\u6216\u89C6\u9891\u5C01\u9762\u7684\u7F51\u7EDC\u8D44\u6E90\u5730\u5740\uFF0C\u4EC5\u5BF9\u56FE\u7247\u548C\u89C6\u9891\u6709\u6548\uFF0C<code>accept</code> \u4E3A <code>video</code>\u65F6\uFF0C\u771F\u673A\u4E0D\u4F1A\u8FD4\u56DE\u8BE5\u5C5E\u6027\uFF0C\u5EFA\u8BAE\u4F7F\u7528 <code>media</code> \u548C <code>media-type</code> \u914D\u5408\u5B8C\u6210\u89C6\u9891\u4E0A\u4F20</td></tr><tr><td><code>type</code></td><td>\u6587\u4EF6\u7C7B\u578B\uFF0C\u53EF\u9009\u503C<code>image</code> <code>video</code> <code>file</code></td></tr><tr><td><code>isImage</code></td><td>\u624B\u52A8\u6807\u8BB0\u56FE\u7247\u8D44\u6E90</td></tr><tr><td><code>isVideo</code></td><td>\u624B\u52A8\u6807\u8BB0\u89C6\u9891\u8D44\u6E90</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>\u540D\u79F0</th><th>\u8BF4\u660E</th></tr></thead><tbody><tr><td>-</td><td>\u81EA\u5B9A\u4E49\u4E0A\u4F20\u533A\u57DF</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>\u4E8B\u4EF6\u540D</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>bind:before-read</td><td>\u6587\u4EF6\u8BFB\u53D6\u524D\uFF0C\u5728\u56DE\u8C03\u51FD\u6570\u4E2D\u8FD4\u56DE <code>false</code> \u53EF\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6\uFF0C\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u540C\u65F6\u9700\u8981\u5C06<code>use-before-read</code>\u5C5E\u6027\u8BBE\u7F6E\u4E3A<code>true</code></td><td><code>event.detail.file</code>: \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6\uFF0C<code>event.detail.callback</code>: \u56DE\u8C03\u51FD\u6570\uFF0C\u8C03\u7528<code>callback(false)</code>\u7EC8\u6B62\u6587\u4EF6\u8BFB\u53D6</td></tr><tr><td>bind:after-read</td><td>\u6587\u4EF6\u8BFB\u53D6\u5B8C\u6210\u540E</td><td><code>event.detail.file</code>: \u5F53\u524D\u8BFB\u53D6\u7684\u6587\u4EF6</td></tr><tr><td>bind:oversize</td><td>\u6587\u4EF6\u8D85\u51FA\u5927\u5C0F\u9650\u5236</td><td>-</td></tr><tr><td>bind:click-preview</td><td>\u70B9\u51FB\u9884\u89C8\u56FE\u7247</td><td><code>event.detail.index</code>: \u70B9\u51FB\u56FE\u7247\u7684\u5E8F\u53F7\u503C</td></tr><tr><td>bind:delete</td><td>\u5220\u9664\u56FE\u7247</td><td><code>event.detail.index</code>: \u5220\u9664\u56FE\u7247\u7684\u5E8F\u53F7\u503C</td></tr></tbody></table></div>`,18),Bn=[Fn],Rn={__name:"README",setup(a,{expose:s}){return s({frontmatter:{}}),(l,t)=>(e(),p("div",En,Bn))}},h={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"\u8F7B\u91CF\u3001\u53EF\u9760\u7684\u5C0F\u7A0B\u5E8F UI \u7EC4\u4EF6\u5E93",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/v2/mobile.html?weapp=1",routeMapper:a=>`/zh-CN${{"/common":"/style","/transition":"/style"}[a]||a}`,syncPathFromSimulator:!1},links:[{logo:"https://img.yzcdn.cn/vant/vant-o.svg",url:"https://vant-contrib.gitee.io/vant/"},{logo:"https://b.yzcdn.cn/vant/logo/github.svg",url:"https://github.com/youzan/vant-weapp"}],baiduAnalytics:{seed:"af5d41bc4e446e76665dbe3ec18d55c3"},nav:[{title:"\u5F00\u53D1\u6307\u5357",items:[{path:"home",title:"\u4ECB\u7ECD"},{path:"quickstart",title:"\u5FEB\u901F\u4E0A\u624B"},{path:"changelog",title:"\u66F4\u65B0\u65E5\u5FD7"},{path:"custom-style",title:"\u6837\u5F0F\u8986\u76D6"},{path:"theme",title:"\u5B9A\u5236\u4E3B\u9898"}]},{title:"\u57FA\u7840\u7EC4\u4EF6",items:[{path:"button",title:"Button \u6309\u94AE"},{path:"cell",title:"Cell \u5355\u5143\u683C"},{path:"config-provider",title:"ConfigProvider \u5168\u5C40\u914D\u7F6E"},{path:"icon",title:"Icon \u56FE\u6807"},{path:"image",title:"Image \u56FE\u7247"},{path:"col",title:"Layout \u5E03\u5C40"},{path:"popup",title:"Popup \u5F39\u51FA\u5C42"},{path:"common",title:"Style \u5185\u7F6E\u6837\u5F0F"},{path:"toast",title:"Toast \u8F7B\u63D0\u793A"},{path:"transition",title:"transition \u52A8\u753B"}]},{title:"\u8868\u5355\u7EC4\u4EF6",items:[{path:"calendar",title:"Calendar \u65E5\u5386"},{path:"cascader",title:"Cascader \u7EA7\u8054\u9009\u62E9"},{path:"checkbox",title:"Checkbox \u590D\u9009\u6846"},{path:"datetime-picker",title:"DatetimePicker \u65F6\u95F4\u9009\u62E9"},{path:"field",title:"Field \u8F93\u5165\u6846"},{path:"picker",title:"Picker \u9009\u62E9\u5668"},{path:"radio",title:"Radio \u5355\u9009\u6846"},{path:"rate",title:"Rate \u8BC4\u5206"},{path:"search",title:"Search \u641C\u7D22"},{path:"slider",title:"Slider \u6ED1\u5757"},{path:"stepper",title:"Stepper \u6B65\u8FDB\u5668"},{path:"switch",title:"Switch \u5F00\u5173"},{path:"uploader",title:"Uploader \u6587\u4EF6\u4E0A\u4F20"}]},{title:"\u53CD\u9988\u7EC4\u4EF6",items:[{path:"action-sheet",title:"ActionSheet \u52A8\u4F5C\u9762\u677F"},{path:"dialog",title:"Dialog \u5F39\u51FA\u6846"},{path:"dropdown-menu",title:"DropdownMenu \u4E0B\u62C9\u83DC\u5355"},{path:"loading",title:"Loading \u52A0\u8F7D"},{path:"notify",title:"Notify \u6D88\u606F\u901A\u77E5"},{path:"overlay",title:"Overlay \u906E\u7F69\u5C42"},{path:"share-sheet",title:"ShareSheet \u5206\u4EAB\u9762\u677F"},{path:"swipe-cell",title:"SwipeCell \u6ED1\u52A8\u5355\u5143\u683C"}]},{title:"\u5C55\u793A\u7EC4\u4EF6",items:[{path:"circle",title:"Circle \u73AF\u5F62\u8FDB\u5EA6\u6761"},{path:"collapse",title:"Collapse \u6298\u53E0\u9762\u677F"},{path:"count-down",title:"CountDown \u5012\u8BA1\u65F6"},{path:"divider",title:"Divider \u5206\u5272\u7EBF"},{path:"empty",title:"Empty \u7A7A\u72B6\u6001"},{path:"notice-bar",title:"NoticeBar \u901A\u77E5\u680F"},{path:"progress",title:"Progress \u8FDB\u5EA6\u6761"},{path:"skeleton",title:"Skeleton \u9AA8\u67B6\u5C4F"},{path:"steps",title:"Steps \u6B65\u9AA4\u6761"},{path:"sticky",title:"Sticky \u7C98\u6027\u5E03\u5C40"},{path:"tag",title:"Tag \u6807\u7B7E"}]},{title:"\u5BFC\u822A\u7EC4\u4EF6",items:[{path:"grid",title:"Grid \u5BAB\u683C"},{path:"index-bar",title:"IndexBar \u7D22\u5F15\u680F"},{path:"nav-bar",title:"NavBar \u5BFC\u822A\u680F"},{path:"sidebar",title:"Sidebar \u4FA7\u8FB9\u5BFC\u822A"},{path:"tab",title:"Tab \u6807\u7B7E\u9875"},{path:"tabbar",title:"Tabbar \u6807\u7B7E\u680F"},{path:"tree-select",title:"TreeSelect \u5206\u7C7B\u9009\u62E9"}]},{title:"\u4E1A\u52A1\u7EC4\u4EF6",items:[{path:"area",title:"Area \u7701\u5E02\u533A\u9009\u62E9"},{path:"card",title:"Card \u5546\u54C1\u5361\u7247"},{path:"submit-bar",title:"SubmitBar \u63D0\u4EA4\u8BA2\u5355\u680F"},{path:"goods-action",title:"GoodsAction \u5546\u54C1\u5BFC\u822A"}]},{title:"\u5E9F\u5F03",items:[{path:"panel",title:"Panel \u9762\u677F"}]}]}},On={Changelog:y,CustomStyle:k,Home:S,Quickstart:$,Theme:B,ActionSheet:L,Area:G,Button:Q,Calendar:Y,Card:ns,Cascader:ds,Cell:is,Checkbox:js,Circle:qs,Col:xs,Collapse:Cs,Common:Is,ConfigProvider:Es,CountDown:Ns,DatetimePicker:Us,Dialog:Hs,Divider:Xs,DropdownMenu:aa,Empty:ea,Field:oa,GoodsAction:ua,Grid:ba,Icon:ya,Image:ka,IndexBar:Sa,Loading:$a,NavBar:Ba,NoticeBar:La,Notify:Ga,Overlay:Qa,Panel:Ya,Picker:nt,Popup:dt,Progress:it,Radio:jt,Rate:qt,Search:xt,ShareSheet:Ct,Sidebar:It,Skeleton:Et,Slider:Nt,Stepper:Ut,Steps:Ht,Sticky:Xt,SubmitBar:an,SwipeCell:en,Switch:on,Tab:gn,Tabbar:vn,Tag:_n,Toast:zn,Transition:Dn,TreeSelect:An,Uploader:Rn},Gn="1.11.3",Nn=navigator.userAgent.toLowerCase(),Wn=/ios|iphone|ipod|ipad|android/.test(Nn);function Hn(a,s="-"){return a.replace(/([a-z\d])([A-Z])/g,"$1"+s+"$2").replace(/([A-Z])([A-Z][a-z\d]+)/g,"$1"+s+"$2").toLowerCase()}function Kn(a){const s=document.createElement("textarea");s.value=a,s.setAttribute("readonly",""),s.style.position="absolute",s.style.left="-9999px",document.body.appendChild(s);const n=document.getSelection();if(!n)return;const l=n.rangeCount>0?n.getRangeAt(0):!1;s.select(),document.execCommand("copy"),document.body.removeChild(s),l&&(n.removeAllRanges(),n.addRange(l))}const u="zh-CN",Mn="en-US",g="vant-cli-lang";let o=u;function Qn(){return o}function Jn(a){o=a,localStorage.setItem(g,a)}function Xn(a){const s=localStorage.getItem(g);if(s){o=s;return}if(navigator.language&&navigator.language.indexOf("zh-")!==-1){o=u;return}o=a||Mn}let i=[],j=!1;function Ln(a){j?a():i.push(a)}window.top===window?window.addEventListener("message",a=>{a.data.type==="iframeReady"&&(j=!0,i.forEach(s=>s()),i=[])}):window.top.postMessage({type:"iframeReady"},"*");function m(){var n,l;const a=window.vueRouter,{path:s}=a.currentRoute.value;return(n=h.site.simulator)!=null&&n.routeMapper?(l=h.site.simulator)==null?void 0:l.routeMapper(s):s}function Zn(){window.top.postMessage({type:"replacePath",value:m()},"*")}function Yn(){const a=document.querySelector("iframe");a&&Ln(()=>{a.contentWindow.postMessage({type:"replacePath",value:m()},"*")})}function sl(a){window.addEventListener("message",s=>{var l,t;if(((l=s.data)==null?void 0:l.type)!=="replacePath")return;const n=((t=s.data)==null?void 0:t.value)||"";a.currentRoute.value.path!==n&&a.replace(n).catch(()=>{})})}export{Un as _,h as a,Xn as b,Kn as c,On as d,Yn as e,Hn as f,Qn as g,Zn as h,Wn as i,sl as l,Gn as p,Jn as s};
Reference in New Issue View Git Blame Copy Permalink