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.66c5235e.js

2 lines
680 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

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

import{o as s,a,u as t}from"./vue-libs.7d12dd47.js";!function(){const s=document.createElement("link").relList;if(!(s&&s.supports&&s.supports("modulepreload"))){for(const s of document.querySelectorAll('link[rel="modulepreload"]'))a(s);new MutationObserver((s=>{for(const t of s)if("childList"===t.type)for(const s of t.addedNodes)"LINK"===s.tagName&&"modulepreload"===s.rel&&a(s)})).observe(document,{childList:!0,subtree:!0})}function a(s){if(s.ep)return;s.ep=!0;const a=function(s){const a={};return s.integrity&&(a.integrity=s.integrity),s.referrerpolicy&&(a.referrerPolicy=s.referrerpolicy),"use-credentials"===s.crossorigin?a.credentials="include":"anonymous"===s.crossorigin?a.credentials="omit":a.credentials="same-origin",a}(s);fetch(s.href,a)}}();var n=(s,a)=>{for(const[t,n]of a)s[t]=n;return s};const l={class:"van-doc-markdown-body"},e=t('<h1>更新日志</h1><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">v1.10.1</a></h3><p><code>2022-01-04</code></p><p><strong>Bug Fixes</strong></p><ul><li>NoticeBar: 移除 默认 icon 尺寸 <a href="https://github.com/youzan/vant-weapp/issues/4692">#4692</a></li><li>Tab: 修复 滑动失效问题 <a href="https://github.com/youzan/vant-weapp/issues/4715">#4715</a></li></ul><p><strong>Document</strong></p><ul><li>quickstart: 增加 用户隐私保护 说明 <a href="https://github.com/youzan/vant-weapp/issues/4711">#4711</a></li></ul><p><strong>Feature</strong></p><ul><li>GoodsAction: 增加 GoodsActionIcon 组件的 class-prefix 属性 <a href="https://github.com/youzan/vant-weapp/issues/4712">#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">v1.10.0</a></h3><p><code>2021-12-21</code></p><p><strong>Bug Fixes</strong></p><ul><li>page-scroll: 修复当 vanPageScroller 为 undefined 时报错 <a href="https://github.com/youzan/vant-weapp/issues/4640">#4640</a></li><li>Switch: 修复当使用 active-value 时 自定义颜色失效 <a href="https://github.com/youzan/vant-weapp/issues/4645">#4645</a></li><li>Toast: 修复当 type 为 success/error 时 toast 样式不正确 <a href="https://github.com/youzan/vant-weapp/issues/4587">#4587</a></li></ul><p><strong>Document</strong></p><ul><li>NoticeBar: 修复文档中 单位标识 错误 <a href="https://github.com/youzan/vant-weapp/issues/4641">#4641</a></li></ul><p><strong>Feature</strong></p><ul><li>Stepper: 新增 always-embed 属性 <a href="https://github.com/youzan/vant-weapp/issues/4678">#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">v1.9.2</a></h3><p><code>2021-10-28</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: 选择最小可选日期范围 <a href="https://github.com/youzan/vant-weapp/issues/4569">#4569</a></li><li>Collapse: 修复多次点击失效问题 <a href="https://github.com/youzan/vant-weapp/issues/4567">#4567</a></li><li>Tab: 修复卡片模式标签页样式问题 <a href="https://github.com/youzan/vant-weapp/issues/4582">#4582</a></li><li>Tab: 修复多指滑动多个标签问题 <a href="https://github.com/youzan/vant-weapp/issues/4539">#4539</a></li></ul><p><strong>Feature</strong></p><ul><li>DropdownMenu: 新增 --dropdown-menu-box-shadow CssVariable <a href="https://github.com/youzan/vant-weapp/issues/4565">#4565</a></li><li>DropdownMenu: 新增 custom-class <a href="https://github.com/youzan/vant-weapp/issues/4583">#4583</a></li><li>Field: 新增 always-embed 属性 <a href="https://github.com/youzan/vant-weapp/issues/4571">#4571</a></li><li>Toast: 支持 html type <a href="https://github.com/youzan/vant-weapp/issues/4581">#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">v1.9.1</a></h3><p><code>2021-09-29</code></p><p><strong>Bug Fixes</strong></p><ul><li>CheckBox: 移除无用方法 <a href="https://github.com/youzan/vant-weapp/issues/4527">#4527</a></li><li>Slider: 修复 vertical 属性导致点击无效问题 <a href="https://github.com/youzan/vant-weapp/issues/4532">#4532</a></li></ul><p><strong>Document</strong></p><ul><li>Calendar: Day 数据结构增加 className 属性说明 <a href="https://github.com/youzan/vant-weapp/issues/4524">#4524</a></li></ul><p><strong>Feature</strong></p><ul><li>Calendar: 增加 readonly 属性 <a href="https://github.com/youzan/vant-weapp/issues/4529">#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">v1.9.0</a></h3><p><code>2021-09-27</code></p><p><strong>Bug Fixes</strong></p><ul><li>Slider: 移除 theme mixin <a href="https://github.com/youzan/vant-weapp/issues/4520">#4520</a></li><li>Tab: 修复初始位置不正确问题 <a href="https://github.com/youzan/vant-weapp/issues/4521">#4521</a></li></ul><p><strong>Document</strong></p><ul><li>ActionSheet: 添加 show 属性说明 <a href="https://github.com/youzan/vant-weapp/issues/4518">#4518</a></li></ul><p><strong>Feature</strong></p><ul><li>Slider: 添加 vertical 属性 <a href="https://github.com/youzan/vant-weapp/issues/4486">#4486</a></li></ul><p><strong>Performance</strong></p><ul><li>移除 CSS variables 兼容代码 <a href="https://github.com/youzan/vant-weapp/issues/4487">#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">v1.8.7</a></h3><p><code>2021-09-22</code></p><p><strong>Features</strong></p><ul><li>Icons: 新增 guide-o 图标 <a href="https://github.com/youzan/vant-weapp/issues/4507">#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">1.8.6</a></h3><p><code>2021-09-20</code></p><p><strong>Features</strong></p><ul><li>Calendar: 新增 confirmDisabledText 默认文案 <a href="https://github.com/youzan/vant-weapp/issues/4490">#4490</a>) (<a href="https://github.com/youzan/vant-weapp/commit/8629da1b75bb50e2f0a99905de90fd85015fb785">8629da1</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>移除 optionalTypes <a href="https://github.com/youzan/vant-weapp/issues/4501">#4501</a>) (<a href="https://github.com/youzan/vant-weapp/commit/3afe10c0f929e5c6b0f32ca34de9dc8d05c8c016">3afe10c</a></li><li>Docs: 修复文档错误 <a href="https://github.com/youzan/vant-weapp/issues/4489">#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">1.8.5</a></h3><p><code>2021-09-15</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: 修复超出选择范围 toast 提示一直存在问题 <a href="https://github.com/youzan/vant-weapp/issues/4474">#4474</a></li><li>page-scroll: 修复 isDef 取反问题 <a href="https://github.com/youzan/vant-weapp/issues/4488">#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">1.8.4</a></h3><p><code>2021-09-07</code></p><p><strong>Bug Fixes</strong></p><ul><li>page-scroll: 修复 getCurrentPage 为空时报错 <a href="https://github.com/youzan/vant-weapp/issues/4458">#4458</a></li></ul><p><strong>Features</strong></p><ul><li>Field: 新增 clear-trigger 属性 <a href="https://github.com/youzan/vant-weapp/issues/4461">#4461</a></li><li>Search: 新增 clear-icon 属性 <a href="https://github.com/youzan/vant-weapp/issues/4463">#4463</a></li><li>Search: 新增 clear-trigger 属性 <a href="https://github.com/youzan/vant-weapp/commit/9e17b13164e57ff09140d755870853f702a89a39">9e17b13</a></li><li>Slider: 新增 range 属性 <a href="https://github.com/youzan/vant-weapp/issues/4442">#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">v1.8.3</a></h3><p><code>2021-08-30</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: 修复 default-date 属性失效问题 <a href="https://github.com/youzan/vant-weapp/issues/4430">#4430</a></li><li>ShareSheet: 调整 overlayStyle 属性类型为 string <a href="https://github.com/youzan/vant-weapp/commit/8c408e23030e65a0baf62f0b21fb8ed3f2c9df67">8c408e2</a></li><li>Stepper: 调整 minus/plus slots 位置 <a href="https://github.com/youzan/vant-weapp/issues/4427">#4427</a></li><li>Sticky: 修复 root 为 null 时，读取 root.top 报错问题 <a href="https://github.com/youzan/vant-weapp/issues/4433">#4433</a></li><li>Calendar: 调整 minDate 和 maxDate 传值类型为 Number <a href="https://github.com/youzan/vant-weapp/commit/37d8e697c9e3d985b926f68553b8afbb5c0a0569">37d8e69</a></li></ul><p><strong>Features</strong></p><ul><li>Popup: 新增 lock-scroll 属性 <a href="https://github.com/youzan/vant-weapp/issues/4384">#4384</a></li></ul><p><strong>Performance Improvements</strong></p><ul><li>Radio: label 的 margin-left 改为 padding-left，增大可点击区域，增强用户体验 <a href="https://github.com/youzan/vant-weapp/issues/4165">#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">v1.8.2</a></h3><p><code>2021-08-18</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: 修复 template 引用路径不是相对路径的问题 <a href="https://github.com/youzan/vant-weapp/commit/7f7cf62ee0f675ad6b86d41f70b23336e7ddc7a1">7f7cf6</a></li><li>Field: 修复 template 引用路径不是相对路径的问题 <a href="https://github.com/youzan/vant-weapp/commit/6dd42a0473578e26e5f5f96158959e56689f68b6">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">v1.8.1</a></h3><p><code>2021-08-18</code></p><p><strong>Feature</strong></p><ul><li>Calendar: 新增 click-subtitle 事件 <a href="https://github.com/youzan/vant-weapp/issues/4385">#4385</a></li><li>Circle: 使用 setTimeout 代替 setInterval <a href="https://github.com/youzan/vant-weapp/issues/4401">#4401</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Picker: 修复 template 引用路径不是相对路径的问题 <a href="https://github.com/youzan/vant-weapp/issues/4408">#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">v1.8.0</a></h3><p><code>2021-08-11</code></p><p><strong>Feature</strong></p><ul><li>Overlay: 新增 lock-scroll 属性 <a href="https://github.com/youzan/vant-weapp/issues/4383">#4383</a></li><li>search: 新增 click-input 事件 <a href="https://github.com/youzan/vant-weapp/issues/4357">#4357</a></li></ul><p><strong>Performance</strong></p><ul><li>移除了 iOS8 相关的 polyfill，减少包体积 <a href="https://github.com/youzan/vant-weapp/issues/4395">#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">v1.7.2</a></h3><p><code>2021-07-19</code></p><p><strong>Bug Fixes</strong></p><ul><li>Calendar: 初始日期设置为当前日期 <a href="https://github.com/youzan/vant-weapp/issues/4339">#4339</a></li></ul><p><strong>Features</strong></p><ul><li>Cell: CellGroup 新增 inset 属性 <a href="https://github.com/youzan/vant-weapp/issues/4341">#4341</a></li><li>Search: 新增 click-input 事件 <a href="https://github.com/youzan/vant-weapp/issues/4337">#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">1.7.1</a></h3><p><code>2021-07-06</code></p><p><strong>Bug Fixes</strong></p><ul><li>Col: 修复样式问题 <a href="https://github.com/youzan/vant-weapp/issues/4322">#4322</a></li><li>Grid: 增加 icon-prefix 属性默认值 <a href="https://github.com/youzan/vant-weapp/issues/4318">#4318</a></li><li>IndexBar: 修复当索引列表为空时报错 <a href="https://github.com/youzan/vant-weapp/issues/4310">#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">1.7.0</a></h3><p><code>2021-07-04</code></p><p><strong>Bug Fixes</strong></p><ul><li>Button: 修复 type 为 getUserInfo &amp; wx.getUserProfile 可用时 lang 参数失效 <a href="https://github.com/youzan/vant-weapp/issues/4250">#4250</a></li><li>ShareSheet: 新增内置 icon <code>weapp-qrcode</code> <code>wechat-moments</code> <a href="https://github.com/youzan/vant-weapp/issues/4256">#4256</a></li></ul><p><strong>Features</strong></p><ul><li>Checkbox: 增加 direction 属性，设置排列方向 <a href="https://github.com/youzan/vant-weapp/issues/4265">#4265</a></li><li>ConfigProvider: 增加全局配置组件 <a href="https://github.com/youzan/vant-weapp/issues/4279">#4279</a></li><li>Grid: 增加 reverse 属性，支持文本&amp;图片位置互换 <a href="https://github.com/youzan/vant-weapp/issues/4280">#4280</a></li><li>GridItem: 增加 icon-prefix 属性，支持第三方字体 <a href="https://github.com/youzan/vant-weapp/issues/4276">#4276</a></li><li>Rate: 增加更多 css 变量 <a href="https://github.com/youzan/vant-weapp/issues/4297">#4297</a></li><li>Slider: 增加更多 css 变量 <a href="https://github.com/youzan/vant-weapp/issues/4305">#4305</a></li></ul><p><strong>Improvements</strong></p><ul><li>wxs style 方法支持驼峰变量命名，以便能更好的在 wxml 中使用 <a href="https://github.com/youzan/vant-weapp/issues/4281">#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">1.6.9</a></h3><p><code>2021-06-06</code></p><p><strong>Bug Fixes</strong></p><ul><li>DatetimePicker: 修复 动态设置 min-hour min-date 显示不正确 <a href="https://github.com/youzan/vant-weapp/issues/4245">#4245</a></li><li>Tabs: 修复 tab 数量较多时滚动距离不正确 <a href="https://github.com/youzan/vant-weapp/issues/4202">#4202</a></li><li>Uploader: 修复 demo 中 beforeRead 报错 <a href="https://github.com/youzan/vant-weapp/issues/4235">#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">1.6.9-beta.2</a></h3><p><code>2021-05-22</code></p><p><strong>Bug Fixes</strong></p><ul><li>Button: 修复 open-type 不生效 <a href="https://github.com/youzan/vant-weapp/issues/4222">#4222</a></li><li>Calendar: 修复 allow-same-day 开启时 custom-color 属性无效 <a href="https://github.com/youzan/vant-weapp/issues/4200">#4200</a></li><li>Circle: 修复 value 是小数时抖动的情况 <a href="https://github.com/youzan/vant-weapp/issues/4152">#4152</a></li><li>NoticeBar: 调整滚动行为 <a href="https://github.com/youzan/vant-weapp/issues/4201">#4201</a></li><li>NoticeBar: 修复不正确的滚动速度 <a href="https://github.com/youzan/vant-weapp/commit/cde3876fb0742cacf3e481a8eb2b487dabc8709e">cde3876</a></li><li>Radio: 支持动态设置 disabled <a href="https://github.com/youzan/vant-weapp/issues/4191">#4191</a></li><li>Rate: 支持滑动选择半星 <a href="https://github.com/youzan/vant-weapp/issues/4195">#4195</a></li></ul><p><strong>Features</strong></p><ul><li>Calendar: 增加 first-day-of-week 属性，设置周起始日 <a href="https://github.com/youzan/vant-weapp/issues/4211">#4211</a></li><li>Calendar: 增加 show-range-prompt 属性和 over-range 事件，设置是否展示提示文案 <a href="https://github.com/youzan/vant-weapp/issues/4212">#4212</a></li><li>Icons: 图标库迁移至 iconfont.cn <a href="https://github.com/youzan/vant-weapp/issues/4219">#4219</a></li><li>OpenType: 支持 getUserProfile <a href="https://github.com/youzan/vant-weapp/issues/4203">#4203</a></li><li>Panel: 移除 useFooterSlot <a href="https://github.com/youzan/vant-weapp/issues/4205">#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">1.6.8</a></h3><p><code>2021-02-26</code></p><p><strong>Features</strong></p><ul><li>NoticeBar: 新增默认插槽 (<a href="https://github.com/youzan/vant-weapp/pull/4048">#4048</a>)</li><li>Stepper: 新增 theme 属性，支持圆形风格 (<a href="https://github.com/youzan/vant-weapp/pull/4049">#4049</a>)</li><li>Stepper: 新增 plus &amp; minus 插槽 (<a href="https://github.com/youzan/vant-weapp/pull/4049">#4049</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Checkbox: 修复 label-position 属性无效 (<a href="https://github.com/youzan/vant-weapp/pull/4036">#4036</a>)</li><li>Dialog: 修复 beforeClose 方法类型定义 (<a href="https://github.com/youzan/vant-weapp/pull/4019">#4019</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Circle: 当内置 canvas 不支持同层渲染时降级至默认 type (<a href="https://github.com/youzan/vant-weapp/pull/4050">#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">1.6.7</a></h3><p><code>2021-01-27</code></p><p><strong>Features</strong></p><ul><li>Radio: 新增 <code>direction</code> 属性 (<a href="https://github.com/youzan/vant-weapp/issues/4007">#4007</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Icons: 修复部分地区图标不显示 (<a href="https://github.com/youzan/vant-weapp/issues/4012">#4012</a>)</li><li>Transition: 修复默认设置 <code>show</code> 属性为 <code>true</code> 时不生效 (<a href="https://github.com/youzan/vant-weapp/issues/4005">#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">1.6.6</a></h3><p><code>2021-01-21</code></p><p><strong>Features</strong></p><ul><li>Uploader: 支持文件预览 (<a href="https://github.com/youzan/vant-weapp/pull/3975">#3975</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Picker: 修复标题栏无法显示 (<a href="https://github.com/youzan/vant-weapp/pull/3973">#3973</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Calendar: 优化模板代码 (<a href="https://github.com/youzan/vant-weapp/pull/3972">#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">1.6.5</a></h3><p><code>2021-01-19</code></p><p><strong>Features</strong></p><ul><li>Field: 新增 input 插槽 (<a href="https://github.com/youzan/vant-weapp/pull/3932">#3932</a>)</li><li>Field: 新增 click-input 事件 (<a href="https://github.com/youzan/vant-weapp/pull/3932">#3932</a>)</li><li>Icon: 新增 delete-o、sort、font、font-o、revoke 图标 (<a href="https://github.com/youzan/vant-weapp/pull/3881">#3881</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: 修复 custom-style 属性不生效 (<a href="https://github.com/youzan/vant-weapp/pull/3903">#3903</a>)</li><li>Dialog: 修复 close-on-click-overlay 属性不生效 (<a href="https://github.com/youzan/vant-weapp/pull/3913">#3913</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Cell: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3888">#3888</a>)</li><li>Col: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3886">#3886</a>)</li><li>Divider: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3887">#3887</a>)</li><li>Empty: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3933">#3933</a>)</li><li>Loading: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3892">#3892</a>)</li><li>Notice-bar: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3891">#3891</a>)</li><li>Notify: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3893">#3893</a>)</li><li>Picker: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3949">#3949</a>)</li><li>Stepper: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3890">#3890</a>)</li><li>Sticky: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3879">#3879</a>)</li><li>SwipeCell: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3928">#3928</a>)</li><li>Switch: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3889">#3889</a>)</li><li>Tag: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3894">#3894</a>)</li><li>Transition: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3895">#3895</a>)</li><li>Uploader: 优化性能 (<a href="https://github.com/youzan/vant-weapp/issues/3897">#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">1.6.4</a></h3><p><code>2020-12-18</code></p><p><strong>Improvements</strong></p><ul><li>Tab: 优化粘性布局时的渲染性能 (<a href="https://github.com/youzan/vant-weapp/pull/3875">#3875</a>)</li><li>Grid: 使用 wxs 优化性能 (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Image: 使用 wxs 优化性能 (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Button: 使用 wxs 优化性能 (<a href="https://github.com/youzan/vant-weapp/pull/3839">#3839</a>)</li><li>Icon: 减少代码体积 (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Checkbox: 减少代码体积 (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li><li>Slider: 减少代码体积 (<a href="https://github.com/youzan/vant-weapp/pull/3868">#3839</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: 修复在 phone 设备上选择日期后显示错误 (<a href="https://github.com/youzan/vant-weapp/pull/3833">#3833</a>)</li><li>GoodsAction: 修复部分设备上高度异常 (<a href="https://github.com/youzan/vant-weapp/pull/3865">#3865</a>)</li><li>Slider: 修复设置 <code>max</code> <code>min</code> 时滑动不均匀 (<a href="https://github.com/youzan/vant-weapp/pull/3876">#3876</a>)</li><li>Tab: 修复切换时内容区闪烁的问题 (<a href="https://github.com/youzan/vant-weapp/pull/3866">#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">1.6.3</a></h3><p><code>2020-12-09</code></p><p><strong>Features</strong></p><ul><li>Dialog: 新增 <code>beforeClose</code> 属性 (<a href="https://github.com/youzan/vant-weapp/pull/3815">#3815</a>)</li><li>uploader: 新增若干 CSS 变量 (<a href="https://github.com/youzan/vant-weapp/pull/3797">#3797</a>)</li><li>Aarea: 支持不传入 <code>county_list</code> 数据 (<a href="https://github.com/youzan/vant-weapp/pull/3824">#3824</a>)</li><li>Tab: 新增 <code>resize</code> 方法 (<a href="https://github.com/youzan/vant-weapp/pull/3827">#3827</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Collapse: 使用 animate 提升动画性能 (<a href="https://github.com/youzan/vant-weapp/pull/3826">#3826</a>)</li><li>Tab: 优化样式拼装性能 (<a href="https://github.com/youzan/vant-weapp/pull/3827">#3827</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: 修复输入中文时显示字数暂时超出 maxlength (<a href="https://github.com/youzan/vant-weapp/pull/3802">#3802</a>)</li><li>Info: 修复样式错误 (<a href="https://github.com/youzan/vant-weapp/pull/3823">#3823</a>)</li><li>NavBar: 修复动态渲染时组件报错 (<a href="https://github.com/youzan/vant-weapp/pull/3822">#3822</a>)</li><li>Progress: 修复 <code>percentage</code> 为 0 时样式异常 (<a href="https://github.com/youzan/vant-weapp/pull/3808">#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">1.6.2</a></h3><p><code>2020-11-29</code></p><p><strong>Features</strong></p><ul><li>Tabbar: 新增 <code>placeholder</code> <code>icon-prefix</code> 属性 (<a href="https://github.com/youzan/vant-weapp/pull/3792">#3792</a>)</li></ul><p><strong>Bug Fixes</strong></p><ul><li>DatetimePicker: 修复 <code>type=year-month</code> 时选择出现报错 (<a href="https://github.com/youzan/vant-weapp/pull/3783">#3783</a>)</li><li>Info: 修复部分安卓设备中文案不完全居中 (<a href="https://github.com/youzan/vant-weapp/pull/3778">#3778</a>)</li><li>Tab: 修复 <code>ellipsis</code> 为 <code>false</code> 时下划线位置不正确 (<a href="https://github.com/youzan/vant-weapp/pull/3777">#3777</a>)</li><li>Notify: 修复组件未全局居中 (<a href="https://github.com/youzan/vant-weapp/pull/3751">#3751</a>)</li></ul><p><strong>Improvements</strong></p><ul><li>Icon: 使用 wxs 优化性能 (<a href="https://github.com/youzan/vant-weapp/pull/3791">#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">1.6.1</a></h3><p><code>2020-11-12</code></p><p><strong>Bug Fixes</strong></p><ul><li>Field: 修复未传入 <code>label</code> 属性时仍渲染 label <a href="https://github.com/youzan/vant-weapp/pull/3756">#3756</a></li><li>Picker: 修复 confirm、cancel 事件报错 <a href="https://github.com/youzan/vant-weapp/pull/3755">#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">1.6.0</a></h3><p><code>2020-11-11</code></p><p><strong>Features</strong></p><ul><li>SwipeCell: 新增外部样式类 <code>custom-class</code> <a href="https://github.com/youzan/vant-weapp/pull/3678">#3678</a></li><li>ActionSheet: 调整取消文字颜色至 @gray-7 <a href="https://github.com/youzan/vant-weapp/pull/3719">#3719</a></li><li>ActionSheet: 调整顶部栏样式 <a href="https://github.com/youzan/vant-weapp/pull/3720">#3720</a></li><li>ActionSheet: 调整加载图标大小至 22px <a href="https://github.com/youzan/vant-weapp/pull/3718">#3718</a></li><li>ActionSheet: 调整描述文字样式 <a href="https://github.com/youzan/vant-weapp/pull/3726">#3726</a></li><li>Cell: 调整图标外边距至 4px <a href="https://github.com/youzan/vant-weapp/pull/3721">#3721</a></li><li>DropdownMenu: 增加默认阴影 <a href="https://github.com/youzan/vant-weapp/pull/3723">#3723</a></li><li>DropdownMenu: 调整选中态默认颜色至 #ee0a24 <a href="https://github.com/youzan/vant-weapp/pull/3725">#3725</a></li><li>Image: 调整图标大小至 36px <a href="https://github.com/youzan/vant-weapp/pull/3724">#3724</a></li><li>Popup: 调整圆角至 16px <a href="https://github.com/youzan/vant-weapp/pull/3713">#3713</a></li><li>Search: 调整左侧内边距至 12px <a href="https://github.com/youzan/vant-weapp/pull/3716">#3716</a></li><li>Sidebar: 调整宽度至 85px <a href="https://github.com/youzan/vant-weapp/pull/3722">#3722</a></li><li>TabbarItem: 调整图标大小至 22px <a href="https://github.com/youzan/vant-weapp/pull/3717">#3717</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: 修复使用 <code>label</code> 属性时 <code>label-class</code> 样式类不生效 <a href="https://github.com/youzan/vant-weapp/pull/3729">#3729</a></li><li>NoticeBar: 修复内容较短时开启 <code>scrollable</code> 不生效 <a href="https://github.com/youzan/vant-weapp/pull/3727">#3727</a></li><li>SidebarItem: 修复长数字不换行的问题 <a href="https://github.com/youzan/vant-weapp/pull/3714">#3714</a></li><li>Tag: 默认字体加入 miui <a href="https://github.com/youzan/vant-weapp/pull/3715">#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">1.5.2</a></h3><p><code>2020-10-15</code></p><p><strong>Features</strong></p><ul><li>Uploader: 标准化 file-list 与事件参数 <a href="https://github.com/youzan/vant-weapp/pull/3673">#3673</a></li><li>Uploader: 新增 thumb，支持缩略图展示 <a href="https://github.com/youzan/vant-weapp/pull/3673">#3673</a></li><li>GoodsAction: 新增若干 CSS 变量 <a href="https://github.com/youzan/vant-weapp/pull/3654">#3654</a></li><li>移动 @types/wechat-miniprogram 至 dependencies <a href="https://github.com/youzan/vant-weapp/pull/3674">#3654</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: 修复细边框样式问题 <a href="https://github.com/youzan/vant-weapp/pull/3653">#3653</a></li><li>Tab: 重构动画实现，不再使用 <code>transform</code> <a href="https://github.com/youzan/vant-weapp/pull/3668">#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">1.5.1</a></h3><p><code>2020-09-29</code></p><p><strong>Features</strong></p><ul><li>Card: 新增 <code>origin-price</code> <code>tag</code> 插槽 <a href="https://github.com/youzan/vant-weapp/pull/3645">#3645</a></li><li>ShareSheet: 调整默认 z-index 至 100 <a href="https://github.com/youzan/vant-weapp/pull/3575">#3575</a></li><li>ShareSheet: 新增 item 属性 openType <a href="https://github.com/youzan/vant-weapp/pull/3575">#3575</a></li><li>Uploader: 扩大删除按钮点击区域 <a href="https://github.com/youzan/vant-weapp/pull/3631">#3631</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Uploader: 支持预览视频 <a href="https://github.com/youzan/vant-weapp/pull/3594">#3594</a></li><li>Dialog: 调整类型定义 <a href="https://github.com/youzan/vant-weapp/pull/3630">#3630</a></li><li>NavBar: 修复 CSS 变量 --nav-bar-icon-color 不生效 <a href="https://github.com/youzan/vant-weapp/pull/3643">#3643</a></li><li>NavBar: 修复未设置 title 时样式异常 <a href="https://github.com/youzan/vant-weapp/pull/3643">#3643</a></li><li>Tab: 修复 line-width 属性不支持 string <a href="https://github.com/youzan/vant-weapp/pull/3628">#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">1.5.0</a></h3><p><code>2020-08-27</code></p><p><strong>Features</strong></p><ul><li>ShareSheet: 新增组件 <a href="https://github.com/youzan/vant-weapp/pull/3559">#3559</a></li><li>Icons: 升级 @vant/icons 至 v1.2.5 <a href="https://github.com/youzan/vant-weapp/pull/3539">#3539</a></li><li>sidebar: 新增 badge 属性 <a href="https://github.com/youzan/vant-weapp/pull/3564">#3564</a></li><li>Tabs: 调整默认 line-width 至 40px <a href="https://github.com/youzan/vant-weapp/pull/3518">#3518</a></li><li>Tabs: 去除默认边框 <a href="https://github.com/youzan/vant-weapp/pull/3519">#3519</a></li><li>TreeSelect: 新增 selected-icon 属性 <a href="https://github.com/youzan/vant-weapp/pull/3565">#3565</a></li><li>TreeSelect: 支持 badge、dot 显示 <a href="https://github.com/youzan/vant-weapp/pull/3565">#3565</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>collapse: 修复嵌套在 popup 等组件中时默认展开无效 <a href="https://github.com/youzan/vant-weapp/pull/3562">#3562</a></li><li>empty: 修复 image、description 插槽不生效 <a href="https://github.com/youzan/vant-weapp/pull/3563">#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">1.4.4</a></h3><p><code>2020-08-12</code></p><p><strong>Bug Fixes</strong></p><ul><li>Transition: 重构组件以修复卡顿问题 <a href="https://github.com/youzan/vant-weapp/pull/3498">#3498</a></li><li>Icon: 修复数字未对齐 <a href="https://github.com/youzan/vant-weapp/pull/3501">#3501</a></li><li>Tab: 修复可滚动时下划线位置错误 <a href="https://github.com/youzan/vant-weapp/pull/3511">#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">v1.4.3</a></h3><p><code>2020-08-07</code></p><p><strong>Features</strong></p><ul><li>Dialog: 增加圆角按钮样式 <a href="https://github.com/youzan/vant-weapp/pull/3476">#3476</a></li><li>Cell: 调整下划线位置 <a href="https://github.com/youzan/vant-weapp/pull/3487">#3487</a></li><li>Tab: 调整默认滚动阈值至 5 个、优化样式 <a href="https://github.com/youzan/vant-weapp/pull/3459">#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">v1.4.2</a></h3><p><code>2020-08-03</code></p><p><strong>Features</strong></p><ul><li>Toast: 优化样式 <a href="https://github.com/youzan/vant-weapp/pull/3451">#3451</a></li><li>Tag: 优化样式 <a href="https://github.com/youzan/vant-weapp/pull/3465">#3465</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Calendar: 修复超出 max-range 时未显示 Toast <a href="https://github.com/youzan/vant-weapp/pull/3466">#3466</a></li><li>Tab: 修复手势滚动可切换至禁用项 <a href="https://github.com/youzan/vant-weapp/pull/3467">#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">v1.4.1</a></h3><p><code>2020-07-28</code></p><p><strong>Features</strong></p><ul><li>Picker: 调整默认可见的选项个数为 6 个 <a href="https://github.com/youzan/vant-weapp/pull/3418">#3418</a></li><li>Toast: 调整圆角为 8px <a href="https://github.com/youzan/vant-weapp/pull/3419">#3419</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Slider: 修复点击会触发 drag 事件 <a href="https://github.com/youzan/vant-weapp/pull/3415">#3415</a></li><li>Area: 修复中间列无法滚动 <a href="https://github.com/youzan/vant-weapp/pull/3443">#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">v1.4.0</a></h3><p><code>2020-07-17</code></p><p><strong>Features</strong></p><ul><li>Empty: 新增 Empty 组件 <a href="https://github.com/youzan/vant-weapp/pull/3327">#3327</a></li><li>NoticeBar: 新增 background 属性 <a href="https://github.com/youzan/vant-weapp/pull/3388">#3388</a></li><li>NoticeBar: 新增 close 事件 <a href="https://github.com/youzan/vant-weapp/pull/3388">#3388</a></li><li>GridItem: 新增 icon-color 属性 <a href="https://github.com/youzan/vant-weapp/pull/3386">#3386</a></li><li>NavBar: 现在 custom-style 将影响根节点<a href="https://github.com/youzan/vant-weapp/pull/3371">#3371</a></li><li>Cell: 新增 title-style 属性, fix Field label width <a href="https://github.com/youzan/vant-weapp/pull/3370">#3370</a></li><li>Uploader: 更新 failed 图标 <a href="https://github.com/youzan/vant-weapp/pull/3359">#3359</a></li><li>Uploader: 更新删除图标样式 <a href="https://github.com/youzan/vant-weapp/pull/3385">#3385</a></li><li>Uploader: 移除圆角样式 <a href="https://github.com/youzan/vant-weapp/pull/3384">#3384</a></li><li>Field: 更新禁用态样式 <a href="https://github.com/youzan/vant-weapp/pull/3358">#3358</a></li><li>Field: 更新 label 样式 <a href="https://github.com/youzan/vant-weapp/pull/3357">#3357</a></li><li>Picker: 调整 action button 样式 <a href="https://github.com/youzan/vant-weapp/pull/3316">#3316</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 <a href="https://github.com/youzan/vant-weapp/pull/3401">#3401</a></li><li>Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 <a href="https://github.com/youzan/vant-weapp/pull/3317">#3317</a></li><li>Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 <a href="https://github.com/youzan/vant-weapp/pull/3318">#3318</a></li><li>DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 <a href="https://github.com/youzan/vant-weapp/pull/3352">#3352</a></li><li>Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 <a href="https://github.com/youzan/vant-weapp/pull/3383">#3383</a></li><li>Dialog: show dialog after class ready <a href="https://github.com/youzan/vant-weapp/pull/3374">#3374</a></li><li>Calendar: confirm-disabled-text 属性增加默认值 <a href="https://github.com/youzan/vant-weapp/pull/3394">#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">v1.3.3</a></h3><p><code>2020-06-24</code></p><p><strong>Features</strong></p><ul><li>steps: 为每一项增加 inactiveIcon、activeIcon 属性 <a href="https://github.com/youzan/vant-weapp/pull/3315">#3315</a></li><li>field: 增加外部样式类 label-class <a href="https://github.com/youzan/vant-weapp/pull/3311">#3311</a></li><li>field: 现在总会从内部 set value 值 <a href="https://github.com/youzan/vant-weapp/pull/3313">#3313</a></li><li>uploader: 为每一项增加 deletable 属性 <a href="https://github.com/youzan/vant-weapp/pull/3270">#3270</a></li><li>uploader: 扩大删除图标的可点击区域 <a href="https://github.com/youzan/vant-weapp/pull/3265">#3265</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>tabbar: 修复 iphone-se 上高度异常 <a href="https://github.com/youzan/vant-weapp/pull/3314">#3314</a></li><li>grid: 修复 text 与 icon 同时设置时样式异常 <a href="https://github.com/youzan/vant-weapp/pull/3310">#3310</a></li><li>calendar: 修复多选模式下 default-date 属性不生效 <a href="https://github.com/youzan/vant-weapp/pull/3284">#3284</a></li><li>circle: 修复 type=“2d” 时无法动态变更 value <a href="https://github.com/youzan/vant-weapp/pull/3264">#3264</a></li><li>nav-bar: 修复未设置 left-text 时左侧图标样式异常 <a href="https://github.com/youzan/vant-weapp/pull/3263">#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">v1.3.2</a></h3><p><code>2020-06-04</code></p><p><strong>Features</strong></p><ul><li>button: 新增 form-type 属性 <a href="https://github.com/youzan/vant-weapp/pull/3208">#3208</a></li><li>grid: 新增 icon-size、badge 属性 <a href="https://github.com/youzan/vant-weapp/pull/3236">#3236</a></li><li>grid: 新增 direction 属性 <a href="https://github.com/youzan/vant-weapp/pull/3192">#3192</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Grid: 修复开启 <code>square</code> 时横、纵向间距不同 <a href="https://github.com/youzan/vant-weapp/pull/3231">#3231</a></li><li>uploader: 修复点击删除图标时触发 click-preview 事件 <a href="https://github.com/youzan/vant-weapp/pull/3230">#3230</a></li><li>circle: 修复 <code>type=&quot;2d&quot;</code> 不生效 <a href="https://github.com/youzan/vant-weapp/pull/3228">#3228</a></li><li>calendar: 修复在选择区间时，点击确定报错 <a href="https://github.com/youzan/vant-weapp/pull/3195">#3195</a></li><li>tag: 修复 css 变量名拼写错误 <a href="https://github.com/youzan/vant-weapp/pull/3191">#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">v1.3.1</a></h3><p><code>2020-05-24</code></p><p><strong>Features</strong></p><ul><li>Button: 新增 class-prefix 属性 <a href="https://github.com/youzan/vant-weapp/pull/3159">#3159</a></li><li>Collapse: 新增 open、close 事件 <a href="https://github.com/youzan/vant-weapp/pull/3176">#3176</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>修复控制台提示选择器错误的问题 <a href="https://github.com/youzan/vant-weapp/pull/3137">#3137</a></li><li>修复 GoodsActionButton 在某些情况下报错的问题 <a href="https://github.com/youzan/vant-weapp/pull/3145">#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">v1.3.0</a></h3><p><code>2020-05-08</code></p><h4 id="zhi-chi-jian-yi-shuang-xiang-bang-ding" tabindex="-1">支持简易双向绑定</h4><p>1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有</p><p>Slider <a href="https://github.com/youzan/vant-weapp/pull/3107">#3107</a></p><p>Search <a href="https://github.com/youzan/vant-weapp/pull/3106">#3106</a></p><p>Rate <a href="https://github.com/youzan/vant-weapp/pull/3105">#3105</a></p><p><strong>Features</strong></p><ul><li>sticky: 新增 scroll-top 属性 <a href="https://github.com/youzan/vant-weapp/pull/3115">#3115</a></li><li>button: 新增 dataset 属性 <a href="https://github.com/youzan/vant-weapp/pull/3075">#3075</a></li><li>uploader: 所有类型都会触发 click-preview 事件 <a href="https://github.com/youzan/vant-weapp/pull/3071">#3071</a></li><li>Uploader: 属性 accept 新增值 media <a href="https://github.com/youzan/vant-weapp/pull/3047">#3047</a></li><li>feat: 新增基础 font-family <a href="https://github.com/youzan/vant-weapp/pull/3061">#3061</a></li><li>submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 <a href="https://github.com/youzan/vant-weapp/pull/3104">#3104</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>dialog: 修复 title 多余空格的问题 <a href="https://github.com/youzan/vant-weapp/pull/3069">#3069</a></li><li>tab: 修复 tab 个数多时显示滚动条 <a href="https://github.com/youzan/vant-weapp/pull/3072">#3072</a></li><li>Sticky: 修复使用组件时页面 onPageScroll 失效 <a href="https://github.com/youzan/vant-weapp/pull/3092">#3092</a></li><li>button: 修复 disabled 属性对 open-type 类型的按钮无效 <a href="https://github.com/youzan/vant-weapp/pull/3076">#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">v1.2.2</a></h3><p><code>2020-04-21</code></p><p><strong>Features</strong></p><ul><li>GoodsActionButton: 新增 CSS 变量 goods-action-line-height <a href="https://github.com/youzan/vant-weapp/pull/3037">#3037</a></li><li>Calendar: 选择区间大于 range 时自动选中最大范围 <a href="https://github.com/youzan/vant-weapp/pull/3026">#3026</a></li><li>Notify: 新增 top 属性 <a href="https://github.com/youzan/vant-weapp/pull/3018">#3018</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: 修复未设置 autosize 时 wxs 报错 <a href="https://github.com/youzan/vant-weapp/pull/3038">#3038</a></li><li>Field: 避免设置 showClear 为 undefined <a href="https://github.com/youzan/vant-weapp/pull/3012">#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">v1.2.1</a></h3><p><code>2020-04-12</code></p><p><strong>Features</strong></p><ul><li>Field: 支持小程序双向绑定 <a href="https://github.com/youzan/vant-weapp/pull/2986">#2986</a></li><li>Calendar: 多选模式下新增 unselect 事件 <a href="https://github.com/youzan/vant-weapp/pull/2990">#2990</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>IndexBar: 移除 scroll-top 属性 <a href="https://github.com/youzan/vant-weapp/pull/2999">#2999</a></li><li>Uploader: 修复图片后缀名为大写时未正常识别 <a href="https://github.com/youzan/vant-weapp/pull/2987">#2987</a></li><li>Field: 修复 autosize 属性 设置 max-height 不生效 <a href="https://github.com/youzan/vant-weapp/pull/3007">#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">v1.2.0</a></h3><p><code>2020-04-04</code></p><p><strong>Features</strong></p><ul><li>TreeSelect: 更新 nav 背景色 <a href="https://github.com/youzan/vant-weapp/pull/2952">#2952</a></li><li>Sticky: 使用 page scroll 重构组件 <a href="https://github.com/youzan/vant-weapp/pull/2950">#2950</a></li><li>Field: 新增 auto-focus、disable-default-padding、cursor 属性 <a href="https://github.com/youzan/vant-weapp/pull/2936">#2936</a></li><li>Field: 新增 linechange、keyboardheightchange 事件 <a href="https://github.com/youzan/vant-weapp/pull/2936">#2936</a></li><li>Uploader: 支持显示上传状态 <a href="https://github.com/youzan/vant-weapp/pull/2929">#2929</a></li><li>Image: mode 属性新增 widthFix、heightFix <a href="https://github.com/youzan/vant-weapp/pull/2908">#2908</a></li><li>Canvas: 新增 type 属性 <a href="https://github.com/youzan/vant-weapp/pull/2906">#2906</a></li><li>NavBar: 新增 placeholder 属性 <a href="https://github.com/youzan/vant-weapp/pull/2896">#2896</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Field: 修复输入过快时输入框内容不断回退 <a href="https://github.com/youzan/vant-weapp/pull/2936">#2936</a></li><li>Calendar: 修复 show-confirm 为 true 时组件初始化报错 <a href="https://github.com/youzan/vant-weapp/pull/2951">#2951</a></li><li>Tab: 修复 type 为 card 时 color 对边框无效 <a href="https://github.com/youzan/vant-weapp/pull/2941">#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">v1.1.0</a></h3><p><code>2020-03-21</code></p><p><strong>Features</strong></p><ul><li>新增 Calendar 日历组件 <a href="https://github.com/youzan/vant-weapp/pull/2894">#2894</a></li><li>Grid: 新增外部样式类 custom-class、content-class、icon-class、text-class <a href="https://github.com/youzan/vant-weapp/pull/2882">#2882</a></li><li>Steps: 新增 click 事件 <a href="https://github.com/youzan/vant-weapp/pull/2874">#2874</a></li><li>SideBar: 新增 title 插槽 <a href="https://github.com/youzan/vant-weapp/pull/2873">#2873</a></li><li>Uploader: 新增 upload-icon 属性 <a href="https://github.com/youzan/vant-weapp/pull/2869">#2869</a></li><li>Uploader: 新增 show-upload 属性 <a href="https://github.com/youzan/vant-weapp/pull/2868">#2868</a></li><li>Uploader: 更新样式、调整事件触发顺序与 vant 一致 <a href="https://github.com/youzan/vant-weapp/pull/2886">#2886</a></li><li>Field: 新增 show-word-limit 属性 <a href="https://github.com/youzan/vant-weapp/pull/2856">#2856</a></li><li>Field: autosize 属性支持传入对象，指定 maxHeight 与 minHeight <a href="https://github.com/youzan/vant-weapp/pull/2856">#2856</a></li><li>Field: 新增若干 CSS 变量 <a href="https://github.com/youzan/vant-weapp/pull/2856">#2856</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Button: 移除 lang 属性默认值 <a href="https://github.com/youzan/vant-weapp/pull/2883">#2883</a></li><li>Button: 修复 disabled 属性对原生事件无效 <a href="https://github.com/youzan/vant-weapp/pull/2878">#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">v1.0.7</a></h3><p><code>2020-03-04</code></p><p><strong>Features</strong></p><ul><li>DropdownItem: 新增 <code>popupStyle</code> 属性 <a href="https://github.com/youzan/vant-weapp/pull/2804">#2804</a></li><li>DropdownItem: 新增 <code>open</code> <code>close</code> <code>opened</code> <code>closed</code> 事件 <a href="https://github.com/youzan/vant-weapp/pull/2804">#2804</a></li><li>Card: 新增 <code>price</code> <code>num</code> 插槽 <a href="https://github.com/youzan/vant-weapp/pull/2787">#2787</a></li><li>Card: 新增 <code>origin-price-class</code> 外部样式类 <a href="https://github.com/youzan/vant-weapp/pull/2787">#2787</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tab: 修复内容项高度不同时粘性布局异常 <a href="https://github.com/youzan/vant-weapp/pull/2817">#2817</a></li><li>Picker: 修复未选中项样式未置灰 <a href="https://github.com/youzan/vant-weapp/pull/2816">#2816</a></li><li>GoodsActionButton: 修复仅使用一个 button 时样式异常 <a href="https://github.com/youzan/vant-weapp/pull/2808">#2808</a></li><li>Radio: <code>name</code>类型与<code>value</code>统一 <a href="https://github.com/youzan/vant-weapp/pull/2801">#2801</a></li><li>Uploader: 修复文档错误 <a href="https://github.com/youzan/vant-weapp/pull/2777">#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">v1.0.6</a></h3><p><code>2020-02-24</code></p><p><strong>Features</strong></p><ul><li>GoodsActionButton: 新增默认 slot <a href="https://github.com/youzan/vant-weapp/pull/2779">#2779</a></li><li>SubmitBar: 更新圆角样式 <a href="https://github.com/youzan/vant-weapp/pull/2755">#2755</a></li><li>Card: 更新样式 <a href="https://github.com/youzan/vant-weapp/pull/2754">#2754</a></li><li>优化 relation 部分代码 <a href="https://github.com/youzan/vant-weapp/pull/2760">#2760</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>DropdownItem: 修复点击选项时不触发<code>close</code>事件 <a href="https://github.com/youzan/vant-weapp/pull/2766">#2766</a></li><li>GoodsActionButton: 修复低版本基础库下的样式问题 <a href="https://github.com/youzan/vant-weapp/pull/2762">#2762</a></li><li>Tabs: 修复点击禁用项时事件参数错误 <a href="https://github.com/youzan/vant-weapp/pull/2758">#2758</a></li><li>Checkbox: 修复动态设置<code>disabled</code>属性无效 <a href="https://github.com/youzan/vant-weapp/pull/2748">#2748</a></li><li>Button: add loading color when plain is true <a href="https://github.com/youzan/vant-weapp/pull/2746">#2746</a></li><li>Radio: 修复<code>label-disabled</code>文档错误 <a href="https://github.com/youzan/vant-weapp/pull/2763">#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">v1.0.5</a></h3><p><code>2020-02-07</code></p><p><strong>Features</strong></p><ul><li>ActionSheet: actions 支持更多 openType <a href="https://github.com/youzan/vant-weapp/pull/2715">#2715</a></li><li>Uploader: 新增开始<code>disabled</code>时的组件样式 <a href="https://github.com/youzan/vant-weapp/pull/2720">#2720</a></li><li>Icon: 调整示例小程序页面与 vant 对齐 <a href="https://github.com/youzan/vant-weapp/pull/2728">#2728</a></li><li>示例小程序首页与 vant 对齐 <a href="https://github.com/youzan/vant-weapp/pull/2729">#2729</a></li><li>完善快速上手文档，增加 npm 构建说明 <a href="https://github.com/youzan/vant-weapp/pull/2726">#2726</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Radio: 修复<code>disabled</code>属性不生效 <a href="https://github.com/youzan/vant-weapp/pull/2711">#2711</a></li><li>Tab: 修复<code>animated</code>属性无法动态切换 <a href="https://github.com/youzan/vant-weapp/pull/2712">#2712</a></li><li>Circle: 修正文档错误，<code>size</code>属性不支持<code>string</code>类型 <a href="https://github.com/youzan/vant-weapp/pull/2694">#2694</a></li><li>修正文档默认 slot 名称为 default 的错误 <a href="https://github.com/youzan/vant-weapp/pull/2726">#2726</a></li><li>TreeSelect: 修正文档示例代码标签闭合错误 <a href="https://github.com/youzan/vant-weapp/pull/2710">#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">v1.0.4</a></h3><p><code>2020-01-21</code></p><p><strong>Features</strong></p><ul><li>Stepper: 新增 disable-long-press 属性 <a href="https://github.com/youzan/vant-weapp/pull/2691">#2691</a></li><li>quickstart: 快速上手新增关闭 style v2 说明 <a href="https://github.com/youzan/vant-weapp/pull/2704">#2704</a></li><li>Search: 新增 background、disabled、input-align 文档示例 <a href="https://github.com/youzan/vant-weapp/pull/2698">#2698</a></li><li>Icon: 文档新增图标文字加载失败说明 <a href="https://github.com/youzan/vant-weapp/pull/2681">#2681</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Sticky: 修复真机上页面滚动缓慢时无法吸顶/取消吸顶 <a href="https://github.com/youzan/vant-weapp/pull/2703">#2703</a></li><li>DropdownItem: 修复 wx:key 警告 <a href="https://github.com/youzan/vant-weapp/pull/2670">#2670</a></li><li>IndexBar: 文档修复组件引入路径错误 <a href="https://github.com/youzan/vant-weapp/pull/2689">#2689</a></li><li>升级依赖版本以避免安全警告 <a href="https://github.com/youzan/vant-weapp/pull/2680">#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">v1.0.3</a></h3><p><code>2020-01-09</code></p><p><strong>Features</strong></p><ul><li>npm 包默认输出 es5 版本代码 <a href="https://github.com/youzan/vant-weapp/pull/2639">#2639</a></li><li>Steps: 新增外部样式类 desc-class <a href="https://github.com/youzan/vant-weapp/pull/2630">#2630</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tab: 解决动态添加选项时，顺序错乱和下划线长度不变的问题 <a href="https://github.com/youzan/vant-weapp/pull/2663">#2663</a></li><li>NavBar: 修复返回图标未居中的问题 <a href="https://github.com/youzan/vant-weapp/pull/2633">#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">v1.0.2</a></h3><p><code>2019-12-31</code></p><p><strong>Features</strong></p><ul><li>Skeleton: 新增外部样式类<code>row-class``avatar-class``title-class</code> <a href="https://github.com/youzan/vant-weapp/pull/2612">#2612</a></li><li>SwipeCell: 支持动态修改<code>width</code>属性 <a href="https://github.com/youzan/vant-weapp/pull/2607">#2607</a></li><li>Uploader: 新增<code>camera``compressed``maxDuration</code>属性 <a href="https://github.com/youzan/vant-weapp/pull/2584">#2584</a></li></ul><p><strong>Improvements</strong></p><ul><li>Tab: 优化弹性滚动效果 <a href="https://github.com/youzan/vant-weapp/pull/2606">#2606</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>IndexBar: 修复字母未全部定义时 click 事件报错 <a href="https://github.com/youzan/vant-weapp/pull/2605">#2605</a></li><li>Field: 修复点击清除图标后下一次点击无效 <a href="https://github.com/youzan/vant-weapp/pull/2602">#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">v1.0.1</a></h3><p><code>2019-12-23</code></p><p><strong>Features</strong></p><ul><li>Uploader: 新增 sizeType 属性 <a href="https://github.com/youzan/vant-weapp/pull/2563">#2563</a></li><li>GoodsActionButton: 新增 plain 属性 <a href="https://github.com/youzan/vant-weapp/pull/2559">#2559</a></li><li>Uploader: 去除 use-slot 属性 <a href="https://github.com/youzan/vant-weapp/pull/2551">#2551</a></li><li>新增样式覆盖说明文档 <a href="https://github.com/youzan/vant-weapp/pull/2566">#2566</a></li></ul><p><strong>Improvements</strong></p><ul><li>使用 nextTick 优化部分异步逻辑 <a href="https://github.com/youzan/vant-weapp/pull/2561">#2561</a></li><li>wxs 新增 addUnit 方法以减少 setData 调用次数 <a href="https://github.com/youzan/vant-weapp/pull/2550">#2550</a></li></ul><p><strong>Bug Fixes</strong></p><ul><li>Tag: 修复未依赖 van-icon 组件 <a href="https://github.com/youzan/vant-weapp/pull/2579">#2579</a></li><li>Notify: 修复 safeAreaInsetTop 不生效 <a href="https://github.com/youzan/vant-weapp/pull/2558">#2558</a></li><li>Uploader: 修复 capture 属性不生效 <a href="https://github.com/youzan/vant-weapp/pull/2551">#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">v1.0.0</a></h3><p><code>2019-12-11</code></p><h4 id="zhu-yao-bian-dong" tabindex="-1">主要变动</h4><ul><li>npm 包名由 vant-weapp 重命名为 @vant/weapp</li><li>增加十一个新组件</li><li>增加数十个 API</li><li>所有组件支持通过<code>CSS自定义属性</code>自定义样式</li><li>使用<code>env()</code>重构 iOS 安全区域适配</li><li>调整部分 API 命名，废除少量 API</li></ul><h4 id="xin-zu-jian" tabindex="-1">新组件</h4><p>在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：</p><ul><li><b>Grid 宫格</b>，用于展示内容或进行页面导航</li><li><b>Image 图片</b>，增强版的 Image 标签，支持图片懒加载与加载失败提示</li><li><b>Circle 环形进度条</b>，告知用户当前的状态和进度</li><li><b>Overaly 遮罩层</b>，用于强调特定的页面元素，并阻止用户进行其他操作</li><li><b>Divider 分割线</b>，区隔内容的分割线</li><li><b>Sticky 粘性布局</b>，与 CSS 中<code>position: sticky</code>属性实现的效果类似</li><li><b>Skeleton 骨架屏</b>，在待加载区域展示的占位区块，提供界面加载过程中的过渡效果</li><li><b>IndexBar 索引栏</b>，通讯录中的字母索引栏，用于长列表快速索引</li><li><b>Uploader 文件上传</b>，上传一个或多个文件</li><li><b>CountDown 倒计时</b>，用于显示活动倒计时、短信验证码等</li><li><b>DropdownMenu 下拉菜单</b>，用于列表的分类选择、筛选及排序</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">样式定制</h4><p>在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？</p><p>微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。</p><p>微信小程序自定义组件的组件模型相当于一个简化版的 <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-CN">Shadow DOM</a>，幸运的是，小程序也支持了 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS 自定义属性</a> 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。</p><p>从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS 组定义属性</a> 进行样式定制，具体使用姿势可查看<a href="https://youzan.github.io/vant-weapp/#/theme">相关文档</a></p><p><img src="https://img.yzcdn.cn/public_files/2019/06/11/9a066c1a212264c7ae56065e1f13d317.png" alt="定制主题"></p><h4 id="bu-jian-rong-geng-xin" tabindex="-1">不兼容更新</h4><p>1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以<b>无痛升级</b>。</p><h5 id="badge" tabindex="-1">Badge</h5><ul><li><code>BadgeGroup</code>重命名为<code>Sidebar</code></li><li><code>Badge</code>重命名为<code>SlidebarItem</code></li><li><code>active</code>属性重命名为<code>activeKey</code></li></ul><h5 id="notify" tabindex="-1">Notify</h5><ul><li><code>text</code>选项重命名为<code>message</code></li><li><code>backgroundColor</code>选项重命名为<code>background</code></li></ul><h5 id="popup" tabindex="-1">Popup</h5><ul><li>去除<code>transitionend</code>事件，新增 6 个事件</li></ul><h5 id="switchcell" tabindex="-1">SwitchCell</h5><ul><li>移除了<code>SwitchCell</code>组件，可以使用<code>Cell</code>和<code>Switch</code>组件代替</li></ul><h5 id="transition" tabindex="-1">Transition</h5><ul><li>去除<code>transitionend</code>事件，新增 6 个事件</li></ul><hr><h4 id="xin-te-xing" tabindex="-1">新特性</h4><h5 id="actionsheet" tabindex="-1">ActionSheet</h5><ul><li>新增<code>click-overlay</code>事件</li><li>新增<code>close-on-click-action</code>属性</li><li>新增<code>color</code>属性</li><li>新增<code>description</code>属性</li><li>新增<code>round</code>属性</li></ul><h5 id="area" tabindex="-1">Area</h5><ul><li>新增<code>columns-placeholder</code>属性</li><li><code>reset</code>方法支持传入<code>code</code>参数</li></ul><h5 id="button" tabindex="-1">Button</h5><ul><li>新增<code>loading-type</code>属性</li><li><code>color</code>属性支持渐变色</li><li>切换<code>disabled</code>时增加过渡效果</li></ul><h5 id="checkbox" tabindex="-1">Checkbox</h5><ul><li>新增<code>icon-size</code>属性</li></ul><h5 id="color" tabindex="-1">Color</h5><ul><li>基础红色更新为<code>#ee0a24</code></li></ul><h5 id="datetimepicker" tabindex="-1">DatetimePicker</h5><ul><li>新增<code>filter</code>属性</li></ul><h5 id="dialog" tabindex="-1">Dialog</h5><ul><li>优化文字换行</li><li>新增<code>title</code>插槽</li><li>新增<code>confirm-button-color</code>属性</li><li>新增<code>cancel-button-color</code>属性</li><li>新增<code>width</code>属性</li><li>新增<code>overlay-style</code>属性</li></ul><h5 id="field" tabindex="-1">Field</h5><ul><li>新增<code>clickable</code>属性</li><li>新增<code>arrow-direction</code>属性</li><li>新增<code>hold-keyboard</code>属性</li></ul><h5 id="goodsactionbutton" tabindex="-1">GoodsActionButton</h5><ul><li>新增<code>color</code>属性</li><li>样式升级为圆角风格</li></ul><h5 id="goodsactionicon" tabindex="-1">GoodsActionIcon</h5><ul><li>新增<code>icon</code>插槽</li><li>新增<code>dot</code>属性</li></ul><h5 id="griditem" tabindex="-1">GridItem</h5><ul><li>新增<code>info</code>属性</li><li>新增<code>dot</code>属性</li></ul><h5 id="icon" tabindex="-1">Icon</h5><ul><li>新增<code>dot</code>属性</li><li>新增<code>down</code>图标</li><li>新增<code>wap-hone</code>实底风格图标</li><li>支持<code>number</code>类型的<code>size</code>属性</li></ul><h5 id="loading" tabindex="-1">Loading</h5><ul><li>支持<code>number</code>类型的<code>size</code>属性</li></ul><h5 id="noticebar" tabindex="-1">NoticeBar</h5><ul><li>阻止关闭图标点击事件冒泡</li></ul><h5 id="notify-1" tabindex="-1">Notify</h5><ul><li>新增<code>clear</code>方法</li></ul><h5 id="popup-1" tabindex="-1">Popup</h5><ul><li>新增<code>round</code>属性</li><li>新增<code>closeable</code>属性</li><li>新增<code>close-icon</code>属性</li><li>新增<code>close-icon-position</code>属性</li></ul><h5 id="progress" tabindex="-1">Progress</h5><ul><li>新增<code>stroke-width</code>属性</li></ul><h5 id="radio" tabindex="-1">Radio</h5><ul><li>新增<code>icon-size</code>属性</li></ul><h5 id="rate" tabindex="-1">Rate</h5><ul><li>优化手势判断</li><li>新增<code>gutter</code>属性</li><li>新增<code>touchable</code>属性</li><li>支持<code>string</code>类型的<code>size</code>属性</li></ul><h5 id="search" tabindex="-1">Search</h5><ul><li>新增<code>action-text</code>属性</li><li>新增<code>left-icon</code>插槽</li><li>新增<code>right-icon</code>插槽</li></ul><h5 id="slidebaritem" tabindex="-1">SlidebarItem</h5><ul><li>新增<code>dot</code>属性</li></ul><h5 id="slider" tabindex="-1">Slider</h5><ul><li>新增<code>drag-start</code>事件</li><li>新增<code>drag-end</code>事件</li><li>支持传入任意范围的<code>max</code>和<code>min</code>属性</li><li>支持<code>number</code>类型的<code>bar-height</code>属性</li><li>增加滑动动画</li><li>增大点击区域</li></ul><h5 id="swipecell" tabindex="-1">SwipeCell</h5><ul><li>新增<code>name</code>属性</li><li>新增<code>open</code>事件</li><li>支持打开状态互斥</li></ul><h5 id="switch" tabindex="-1">Switch</h5><ul><li>加载图标的颜色会跟随开关状态变化</li></ul><h5 id="stepper" tabindex="-1">Stepper</h5><ul><li>支持长按手势</li><li>新增<code>input-width</code>属性</li><li>新增<code>button-size</code>属性</li><li>新增<code>decimalLength</code>属性</li><li>新增 disablePlus、disableMinus 属性</li></ul><h5 id="steps" tabindex="-1">Steps</h5><ul><li>新增<code>active-icon</code>属性</li><li>新增<code>inactive-icon</code>属性</li></ul><h5 id="tabs" tabindex="-1">Tabs</h5><ul><li>使用 Sticky 组件重构吸顶实现</li><li>新增<code>name</code>属性</li><li>新增<code>line-height</code>属性</li><li>新增<code>ellipsis</code>属性</li><li>新增<code>lazy-render</code>属性</li><li><code>line-width</code>属性支持<code>String</code>类型</li><li>增加云开发结合示例</li></ul><h5 id="treeselect" tabindex="-1">TreeSelect</h5><ul><li>新增<code>max</code>属性</li><li>新增<code>content</code>插槽</li></ul></div>',52),p=[e],d={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",l,p)))},c={class:"van-doc-markdown-body"},o=t('<h1>样式覆盖</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法</p></div><div class="van-doc-card"><h3 id="jie-chu-yang-shi-ge-chi" tabindex="-1">解除样式隔离</h3><p>样式隔离的相关背景知识请查阅<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">微信小程序文档</a></p><br><p>Vant Weapp 的所有组件都开启了<code>addGlobalClass: true</code>以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式</p><blockquote><p>在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式</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>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre><pre><code class="language-css"><span class="hljs-comment">/* page.wxss */</span>\n<span class="hljs-selector-class">.van-button--primary</span> {\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;\n <span class="hljs-attribute">background-color</span>: pink;\n}\n</code></pre><blockquote><p>在自定义组件中使用 Vant Weapp 组件时，需开启<code>styleIsolation: &#39;shared&#39;</code>选项</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>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Component</span>({\n <span class="hljs-attr">options</span>: {\n <span class="hljs-attr">styleIsolation</span>: <span class="hljs-string">&#39;shared&#39;</span>,\n },\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.van-button--primary</span> {\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;\n <span class="hljs-attribute">background-color</span>: pink;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-wai-bu-yang-shi-lei" tabindex="-1">使用外部样式类</h3><p>外部样式类的相关知识背景请查阅<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">微信小程序文档</a></p><br><p>Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。</p><p>需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加<code>!important</code>以保证外部样式类的优先级。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span>\n <span class="hljs-attr">title-class</span>=<span class="hljs-string">&quot;cell-title&quot;</span>\n <span class="hljs-attr">value-class</span>=<span class="hljs-string">&quot;cell-value&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.cell-title</span> {\n <span class="hljs-attribute">color</span>: pink <span class="hljs-meta">!important</span>;\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span> <span class="hljs-meta">!important</span>;\n}\n\n<span class="hljs-selector-class">.cell-value</span> {\n <span class="hljs-attribute">color</span>: green <span class="hljs-meta">!important</span>;\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span> <span class="hljs-meta">!important</span>;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-css-bian-liang" tabindex="-1">使用 CSS 变量</h3><p>Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。</p><p>相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。</p><p>当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅<a href="#/theme">定制主题</a></p></div>',5),i=[o],h={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",c,i)))},r={class:"van-doc-markdown-body"},u=t('<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>轻量、可靠的小程序 UI 组件库</p></div></div><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>Vant 是<strong>有赞前端团队</strong>开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。</p><p>目前 Vant 官方提供了 <a href="https://vant-contrib.gitee.io/vant">Vue 2 版本</a>、<a href="https://vant-contrib.gitee.io/vant/v3">Vue 3 版本</a>和<a href="http://vant-contrib.gitee.io/vant-weapp">微信小程序版本</a>，并由社区团队维护 <a href="https://github.com/mxdi9i7/vant-react">React 版本</a>和<a href="https://github.com/ant-move/Vant-Aliapp">支付宝小程序版本</a>。</p></div><div class="van-doc-card"><h3 id="yu-lan" tabindex="-1">预览</h3><p>扫描下方小程序二维码，体验组件库示例：</p><img src="https://img.yzcdn.cn/vant-weapp/qrcode-201808101114.jpg" style="width:200px;height:200px;margin-top:15px;box-shadow:none;"></div><div class="van-doc-card"><h3 id="kuai-su-shang-shou" tabindex="-1">快速上手</h3><p>请参考 <a href="#/quickstart">快速上手</a>。</p></div><div class="van-doc-card"><h3 id="lian-jie" tabindex="-1">链接</h3><ul><li><a href="https://github.com/youzan/vant-weapp/issues">意见反馈</a></li><li><a href="https://job.youzan.com">加入我们</a></li><li><a href="#/changelog">更新日志</a></li><li><a href="https://github.com/youzan/vant">Vant Vue 版</a></li></ul></div><h2 id="gong-xian" tabindex="-1">贡献</h2><div class="van-doc-card"><h3 id="he-xin-tuan-dui" tabindex="-1">核心团队</h3><p>以下是 Vant 和 Vant Weapp 的核心贡献者们：</p><table><thead><tr><th style="text-align:center;"><a href="https://github.com/chenjiahan/"><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/"><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/"><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/"><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/"><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/"><img src="https://avatars.githubusercontent.com/u/13480805?s=80&amp;v=4" alt="nemo-shen"></a></th><th style="text-align:center;"><a href="https://github.com/Lindysen/"><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/"><img src="https://avatars.githubusercontent.com/u/16181940?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/">chenjiahan</a></td><td style="text-align:center;"><a href="https://github.com/cookfront/">cookfront</a></td><td style="text-align:center;"><a href="https://github.com/w91/">wangnaiyi</a></td><td style="text-align:center;"><a href="https://github.com/pangxie1991/">pangxie</a></td><td style="text-align:center;"><a href="https://github.com/rex-zsd/">rex-zsd</a></td><td style="text-align:center;"><a href="https://github.com/nemo-shen/">nemo-shen</a></td><td style="text-align:center;"><a href="https://github.com/Lindysen/">Lindysen</a></td><td style="text-align:center;"><a href="https://github.com/JakeLaoyu/">JakeLaoyu</a></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="gong-xian-zhe-men" tabindex="-1">贡献者们</h3><p>感谢以下小伙伴们为 Vant Weapp 发展做出的贡献：</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"></a></div><div class="van-doc-card"><h3 id="gong-xian-dai-ma" tabindex="-1">贡献代码</h3><p>使用过程中发现任何问题都可以提 <a href="https://github.com/youzan/vant-weapp/issues">Issue</a> 给我们，当然，我们也非常欢迎你给我们发 <a href="https://github.com/youzan/vant-weapp/pulls">PR</a>。</p></div><div class="van-doc-card"><h3 id="kai-yuan-xie-yi" tabindex="-1">开源协议</h3><p>本项目基于 <a href="https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89">MIT</a> 协议，请自由地享受和参与开源。</p></div>',10),g=[u],j={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",r,g)))},m={class:"van-doc-markdown-body"},v=t('<h1>快速上手</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">背景知识</h3><p>使用 Vant Weapp 前，请确保你已经学习过微信官方的 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/">小程序简易教程</a> 和 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/">自定义组件介绍</a>。</p></div><h2 id="an-zhuang" tabindex="-1">安装</h2><div class="van-doc-card"><h3 id="bu-zou-yi-tong-guo-npm-an-zhuang" tabindex="-1">步骤一 通过 npm 安装</h3><blockquote><p>使用 npm 构建前，请先阅读微信官方的 <a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html">npm 支持</a></p></blockquote><pre><code class="language-bash"><span class="hljs-comment"># 通过 npm 安装</span>\nnpm i @vant/weapp -S --production\n\n<span class="hljs-comment"># 通过 yarn 安装</span>\nyarn add @vant/weapp --production\n\n<span class="hljs-comment"># 安装 0.x 版本</span>\nnpm i vant-weapp -S --production\n</code></pre></div><div class="van-doc-card"><h3 id="bu-zou-er-xiu-gai-app.json" tabindex="-1">步骤二 修改 app.json</h3><p>将 app.json 中的 <code>&quot;style&quot;: &quot;v2&quot;</code> 去除，小程序的<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style">新版基础组件</a>强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。</p></div><div class="van-doc-card"><h3 id="bu-zou-san-xiu-gai-project.config.json" tabindex="-1">步骤三 修改 project.config.json</h3><p>开发者工具创建的项目，<code>miniprogramRoot</code> 默认为 <code>miniprogram</code>，<code>package.json</code> 在其外部，npm 构建无法正常工作。</p><p>需要手动在 <code>project.config.json</code> 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。</p><pre><code class="language-json"><span class="hljs-punctuation">{</span>\n ...\n <span class="hljs-attr">&quot;setting&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n ...\n <span class="hljs-attr">&quot;packNpmManually&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-keyword">true</span><span class="hljs-punctuation">,</span>\n <span class="hljs-attr">&quot;packNpmRelationList&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>\n <span class="hljs-punctuation">{</span>\n <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>\n <span class="hljs-attr">&quot;miniprogramNpmDistDir&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-string">&quot;./miniprogram/&quot;</span>\n <span class="hljs-punctuation">}</span>\n <span class="hljs-punctuation">]</span>\n <span class="hljs-punctuation">}</span>\n<span class="hljs-punctuation">}</span>\n</code></pre><p>注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./&#39;即可</p></div><div class="van-doc-card"><h3 id="bu-zou-si-gou-jian-npm-bao" tabindex="-1">步骤四 构建 npm 包</h3><p>打开微信开发者工具，点击 <strong>工具 -&gt; 构建 npm</strong>，并勾选 <strong>使用 npm 模块</strong> 选项，构建完成后，即可引入组件。</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">步骤五 typescript 支持</h3><p>如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。</p><h4 id="an-zhuang-miniprogram-api-typings" tabindex="-1">安装 miniprogram-api-typings</h4><pre><code class="language-bash"><span class="hljs-comment"># 通过 npm 安装</span>\nnpm i -D miniprogram-api-typings\n\n<span class="hljs-comment"># 通过 yarn 安装</span>\nyarn add -D miniprogram-api-typings\n</code></pre><h4 id="zai-tsconfig.json-zhong-zeng-jia-ru-xia-pei-zhi-yi-fang-zhi-tsc-bian-yi-bao-cuo." tabindex="-1">在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。</h4><p>请将<code>path/to/node_modules/@vant/weapp</code>修改为项目的 <code>node_modules</code> 中 @vant/weapp 所在的目录。</p><pre><code class="language-json"><span class="hljs-punctuation">{</span>\n ...\n <span class="hljs-attr">&quot;compilerOptions&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n ...\n <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>\n <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>\n <span class="hljs-attr">&quot;paths&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <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>\n <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>\n <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>\n <span class="hljs-punctuation">}</span>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-li-gong-cheng" tabindex="-1">示例工程</h3><p>我们提供了一个<a href="https://github.com/youzan/vant-demo">示例工程</a>，示例工程会帮助你了解如下内容：</p><ul><li>基于 Vant Weapp 搭建小程序应用</li><li>样式覆盖方案</li></ul></div><h2 id="shi-yong" tabindex="-1">使用</h2><div class="van-doc-card"><h3 id="yin-ru-zu-jian" tabindex="-1">引入组件</h3><p>以 Button 组件为例，只需要在<code>app.json</code>或<code>index.json</code>中配置 Button 对应的路径即可。</p><p>所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。</p><pre><code class="language-json"><span class="hljs-comment">// 通过 npm 安装</span>\n<span class="hljs-comment">// app.json</span>\n<span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><pre><code class="language-json"><span class="hljs-comment">// 通过下载源码使用 es6版本</span>\n<span class="hljs-comment">// app.json</span>\n<span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><pre><code class="language-json"><span class="hljs-comment">// 通过下载源码使用 es5版本</span>\n<span class="hljs-comment">// app.json</span>\n<span class="hljs-attr">&quot;usingComponents&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-zu-jian" tabindex="-1">使用组件</h3><p>引入组件后，可以在 wxml 中直接使用组件</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>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><h2 id="qi-ta" tabindex="-1">其他</h2><div class="van-doc-card"><h3 id="zai-kai-fa-zhe-gong-ju-zhong-yu-lan-shi-li-xiao-cheng-xu" tabindex="-1">在开发者工具中预览示例小程序</h3><pre><code class="language-bash">\n<span class="hljs-comment"># 将项目克隆到本地</span>\ngit <span class="hljs-built_in">clone</span> git@github.com:youzan/vant-weapp.git\n\n<span class="hljs-comment"># 安装项目依赖</span>\n<span class="hljs-built_in">cd</span> vant-weapp &amp;&amp; npm install\n\n<span class="hljs-comment"># 执行组件编译</span>\nnpm run dev\n\n</code></pre><p>接着打开微信开发者工具，导入<code>example</code>目录的项目就可以预览示例了。</p></div><div class="van-doc-card"><h3 id="guan-yu-yong-hu-yin-si-bao-hu-zhi-yin" tabindex="-1">关于用户隐私保护指引</h3><p>@vant/weapp 部分组件使用了微信提供的接口，其中部分接口涉及获取用户隐私信息。</p><p>例如 <code>&lt;Uploader /&gt;</code> 使用了微信提供的选择用户相册中图片接口<code>(wx.chooseImage)</code>。</p><p>当小程序引入 @vant/weapp 并发布时， 根据微信<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/">《用户隐私保护指引填写说明》</a>， 如检测到代码中存在涉及用户隐私信息接口则需填写用户隐私保护指引信息，如已填写则无需重复填写。</p></div>',15),b=[v],q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",m,b)))},y={class:"van-doc-markdown-body"},f=t('<h1>定制主题</h1><div class="van-doc-card"><h3 id="bei-jing-zhi-shi" tabindex="-1">背景知识</h3><p>小程序基于 <a href="https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=zh-cn">Shadow DOM</a> 来实现自定义组件，所以 Vant Weapp 使用与之配套的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS 变量</a> 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。</p><p>CSS 变量 的兼容性要求可以在 <a href="https://caniuse.com/#feat=css-variables">这里</a> 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。</p></div><div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">样式变量</h3><p>定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 <a href="https://github.com/youzan/vant-weapp/blob/dev/packages/common/style/var.less">配置文件</a>。</p><pre><code class="language-less"><span class="hljs-comment">// Component Colors</span>\n<span class="hljs-variable">@text-color:</span> <span class="hljs-number">#323233</span>;\n<span class="hljs-variable">@border-color:</span> <span class="hljs-number">#ebedf0</span>;\n<span class="hljs-variable">@active-color:</span> <span class="hljs-number">#f2f3f5</span>;\n<span class="hljs-variable">@background-color:</span> <span class="hljs-number">#f8f8f8</span>;\n<span class="hljs-variable">@background-color-light:</span> <span class="hljs-number">#fafafa</span>;\n</code></pre></div><h2 id="ding-zhi-fang-fa" tabindex="-1">定制方法</h2><div class="van-doc-card"><h3 id="ding-zhi-dan-ge-zu-jian-de-zhu-ti-yang-shi" tabindex="-1">定制单个组件的主题样式</h3><blockquote><p>在 wxss 中为组件设置 CSS 变量</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>\n 默认按钮\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre><pre><code class="language-less"><span class="hljs-selector-class">.my-button</span> {\n <span class="hljs-attr">--button-border-radius</span>: 10px;\n <span class="hljs-attr">--button-default-color</span>: #f2f3f5;\n}\n</code></pre><blockquote><p>或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换</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>\n 默认按钮\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">buttonStyle</span>: <span class="hljs-string">`\n --button-border-radius: 10px;\n --button-default-color: green;\n `</span>,\n },\n\n <span class="hljs-title function_">onLoad</span>(<span class="hljs-params"></span>) {\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">buttonStyle</span>: <span class="hljs-string">`\n --button-border-radius: 2px;\n --button-default-color: pink;\n `</span>,\n });\n }, <span class="hljs-number">2000</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="ding-zhi-duo-ge-zu-jian-de-zhu-ti-yang-shi" tabindex="-1">定制多个组件的主题样式</h3><blockquote><p>与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上</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>\n <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>\n 默认按钮\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n</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;path/to/vant-weapp/dist/toast/toast&#39;</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;我是提示文案，建议不超过十五字~&#39;</span>);\n },\n});\n</code></pre><pre><code class="language-less"><span class="hljs-selector-class">.container</span> {\n <span class="hljs-attr">--button-border-radius</span>: 10px;\n <span class="hljs-attr">--button-default-color</span>: #f2f3f5;\n <span class="hljs-attr">--toast-max-width</span>: 100px;\n <span class="hljs-attr">--toast-background-color</span>: pink;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="ding-zhi-quan-ju-zhu-ti-yang-shi" tabindex="-1">定制全局主题样式</h3><blockquote><p>在 app.wxss 中，写入 CSS 变量，即可对全局生效</p></blockquote><pre><code class="language-less"><span class="hljs-selector-tag">page</span> {\n <span class="hljs-attr">--button-border-radius</span>: 10px;\n <span class="hljs-attr">--button-default-color</span>: #f2f3f5;\n <span class="hljs-attr">--toast-max-width</span>: 100px;\n <span class="hljs-attr">--toast-background-color</span>: pink;\n}\n</code></pre></div>',7),x=[f],w={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",y,x)))},z={class:"van-doc-markdown-body"},k=t('<h1>ActionSheet 动作面板</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>底部弹起的模态面板，包含与当前情境相关的多个选项。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>需要传入一个<code>actions</code>的数组，数组的每一项是一个对象，对象属性见文档下方表格。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n <span class="hljs-attr">bind:select</span>=<span class="hljs-string">&quot;onSelect&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">actions</span>: [\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;选项&#39;</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;选项&#39;</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;选项&#39;</span>,\n <span class="hljs-attr">subname</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n <span class="hljs-attr">openType</span>: <span class="hljs-string">&#39;share&#39;</span>,\n },\n ],\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n\n <span class="hljs-title function_">onSelect</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-xiang-zhuang-tai" tabindex="-1">选项状态</h3><p>选项可以设置为加载状态或禁用状态。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">&quot;取消&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">actions</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;着色选项&#39;</span>, <span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#ee0a24&#39;</span> },\n { <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;禁用选项&#39;</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-qu-xiao-an-niu" tabindex="-1">展示取消按钮</h3><p>设置<code>cancel-text</code>属性后，会在底部展示取消按钮，点击后关闭当前菜单。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n <span class="hljs-attr">cancel-text</span>=<span class="hljs-string">&quot;取消&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-miao-shu-xin-xi" tabindex="-1">展示描述信息</h3><p>设置<code>description</code>属性后，会在选项上方显示描述信息。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;这是一段描述信息&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-biao-ti-lan" tabindex="-1">展示标题栏</h3><p>通过设置<code>title</code>属性展示标题栏，同时可以使用插槽自定义菜单内容。</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;标题&quot;</span>&gt;</span>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-action-sheet</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="wei-xin-kai-fang-neng-li" tabindex="-1">微信开放能力</h3><p>需要传入一个<code>actions</code>的数组，数组的每一项是一个对象，对象属性见文档下方表格。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-action-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">actions</span>=<span class="hljs-string">&quot;{{ actions }}&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n <span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">&quot;onGetUserInfo&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">actions</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;获取用户信息&#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> },\n ],\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n\n <span class="hljs-title function_">onGetUserInfo</span>(<span class="hljs-params">e</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">detail</span>);\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>show</td><td>是否显示动作面板</td><td><em>boolean</em></td><td>-</td></tr><tr><td>actions</td><td>菜单选项</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>title</td><td>标题</td><td><em>string</em></td><td>-</td></tr><tr><td>description <code>v1.0.0</code></td><td>选项上方的描述信息</td><td><em>string</em></td><td>-</td></tr><tr><td>z-index</td><td>z-index 层级</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>cancel-text</td><td>取消按钮文字</td><td><em>string</em></td><td>-</td></tr><tr><td>overlay</td><td>是否显示遮罩层</td><td><em>boolean</em></td><td>-</td></tr><tr><td>round <code>v1.0.0</code></td><td>是否显示圆角</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-action</td><td>是否在点击选项后关闭</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>点击遮罩是否关闭菜单</td><td><em>boolean</em></td><td>-</td></tr><tr><td>safe-area-inset-bottom</td><td>是否为 iPhoneX 留出底部安全距离</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:select</td><td>选中选项时触发，禁用或加载状态下不会触发</td><td>event.detail: 选项对应的对象</td></tr><tr><td>bind:close</td><td>关闭时触发</td><td>-</td></tr><tr><td>bind:cancel</td><td>取消按钮点击时触发</td><td>-</td></tr><tr><td>bind:click-overlay</td><td>点击遮罩层时触发</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，<a href="#/action-sheet#actions">openType</a>=&quot;getUserInfo&quot;时有效</td><td>-</td></tr><tr><td>bind:contact</td><td>客服消息回调，<a href="#/action-sheet#actions">openType</a>=&quot;contact&quot;时有效</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>获取用户手机号回调，<a href="#/action-sheet#actions">openType</a>=&quot;getPhoneNumber&quot;时有效</td><td>-</td></tr><tr><td>bind:error</td><td>当使用开放能力时，发生错误的回调，<a href="#/action-sheet#actions">openType</a>=&quot;launchApp&quot;时有效</td><td>-</td></tr><tr><td>bind:launchapp</td><td>打开 APP 成功的回调，<a href="#/action-sheet#actions">openType</a>=&quot;launchApp&quot;时有效</td><td>-</td></tr><tr><td>bind:opensetting</td><td>在打开授权设置页后回调，<a href="#/action-sheet#actions">openType</a>=&quot;openSetting&quot;时有效</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="actions" tabindex="-1">actions</h3><p><code>API</code>中的<code>actions</code>为一个对象数组，数组中的每一个对象配置每一列，每一列有以下<code>key</code>：</p><table><thead><tr><th>键名</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>标题</td><td><em>string</em></td><td>-</td></tr><tr><td>subname</td><td>二级标题</td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>选项文字颜色</td><td><em>string</em></td><td>-</td></tr><tr><td>loading</td><td>是否为加载状态</td><td><em>boolean</em></td><td>-</td></tr><tr><td>disabled</td><td>是否为禁用状态</td><td><em>boolean</em></td><td>-</td></tr><tr><td>className</td><td>为对应列添加额外的 class 类名</td><td><em>string</em></td><td>-</td></tr><tr><td>openType</td><td>微信开放能力，具体支持可参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">微信官方文档</a></td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>sessionFrom</td><td>会话来源，openType=&quot;contact&quot;时有效</td><td><em>string</em></td><td>-</td></tr><tr><td>sendMessageTitle</td><td>会话内消息卡片标题，openType=&quot;contact&quot;时有效</td><td><em>string</em></td><td>当前标题</td></tr><tr><td>sendMessagePath</td><td>会话内消息卡片点击跳转小程序路径，openType=&quot;contact&quot;时有效</td><td><em>string</em></td><td>当前分享路径</td></tr><tr><td>sendMessageImg</td><td>会话内消息卡片图片，openType=&quot;contact&quot;时有效</td><td><em>string</em></td><td>截图</td></tr><tr><td>showMessageCard</td><td>是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示&quot;可能要发送的小程序&quot;提示，用户点击后可以快速发送小程序消息，openType=&quot;contact&quot;时有效</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>appParameter</td><td>打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效</td><td><em>string</em></td><td>-</td></tr></tbody></table></div>',14),_=[k],C={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",z,_)))},P={class:"van-doc-markdown-body"},S=t('<h1>Area 省市区选择</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>省市区选择组件通常与 <a href="#/popup">弹出层</a> 组件配合使用。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>初始化省市区组件时，需要通过 <code>area-list</code> 属性传入省市区数据。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="arealist-ge-shi" tabindex="-1">areaList 格式</h3><p>areaList 为对象结构，包含 <code>province_list</code>、<code>city_list</code>、<code>county_list</code> 三个 key。</p><p>每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 <code>11</code>，以 0 补足 6 位，为 <code>110000</code>。</p><p>示例数据如下：</p><pre><code class="language-js"><span class="hljs-keyword">const</span> areaList = {\n <span class="hljs-attr">province_list</span>: {\n <span class="hljs-number">110000</span>: <span class="hljs-string">&#39;北京市&#39;</span>,\n <span class="hljs-number">120000</span>: <span class="hljs-string">&#39;天津市&#39;</span>,\n },\n <span class="hljs-attr">city_list</span>: {\n <span class="hljs-number">110100</span>: <span class="hljs-string">&#39;北京市&#39;</span>,\n <span class="hljs-number">120100</span>: <span class="hljs-string">&#39;天津市&#39;</span>,\n },\n <span class="hljs-attr">county_list</span>: {\n <span class="hljs-number">110101</span>: <span class="hljs-string">&#39;东城区&#39;</span>,\n <span class="hljs-number">110102</span>: <span class="hljs-string">&#39;西城区&#39;</span>,\n <span class="hljs-comment">// ....</span>\n },\n};\n</code></pre></div><div class="van-doc-card"><h3 id="vant-area-data" tabindex="-1">@vant/area-data</h3><p>Vant 官方提供了一份默认的省市区数据，可以通过 <a href="https://github.com/youzan/vant/tree/dev/packages/vant-area-data">@vant/area-data</a> 引入。</p><pre><code class="language-bash">yarn add @vant/area-data\n</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>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n areaList,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-zhong-sheng-shi-qu" tabindex="-1">选中省市区</h3><p>如果想选中某个省市区，需要传入一个<code>value</code>属性，绑定对应的省市区<code>code</code>。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="pei-zhi-xian-shi-lie" tabindex="-1">配置显示列</h3><p>可以通过<code>columns-num</code>属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为<code>2</code>，则只会显示省市选择。</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;标题&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="pei-zhi-lie-zhan-wei-ti-shi-wen-zi" tabindex="-1">配置列占位提示文字</h3><p>可以通过<code>columns-placeholder</code>属性配置每一列的占位提示文字。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-area</span>\n <span class="hljs-attr">area-list</span>=<span class="hljs-string">&quot;{{ areaList }}&quot;</span>\n <span class="hljs-attr">columns-placeholder</span>=<span class="hljs-string">&quot;{{ [&#39;请选择&#39;, &#39;请选择&#39;, &#39;请选择&#39;] }}&quot;</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标题&quot;</span>\n/&gt;</span>\n</code></pre></div><h2 id="yun-kai-fa-shi-li" tabindex="-1">云开发示例</h2><div class="van-doc-card"><h3 id="shi-yong-yun-kai-fa-huo-qu-sheng-shi-qu-shu-ju" tabindex="-1">使用云开发获取省市区数据</h3><p>实际项目中，可以通过<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html">小程序云开发</a>的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。</p><p>在小程序中使用云能力之前需要先调用<code>wx.could.init</code>方法完成云能力的初始化。</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>();\n\ndb.<span class="hljs-title function_">collection</span>(<span class="hljs-string">&#39;region&#39;</span>)\n .<span class="hljs-title function_">limit</span>(<span class="hljs-number">1</span>)\n .<span class="hljs-title function_">get</span>()\n .<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {\n <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>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">areaList</span>: res.<span class="hljs-property">data</span>[<span class="hljs-number">0</span>],\n });\n }\n })\n .<span class="hljs-title function_">catch</span>(<span class="hljs-function">(<span class="hljs-params">err</span>) =&gt;</span> {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err);\n });\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>当前选中的省市区<code>code</code></td><td><em>string</em></td><td>-</td></tr><tr><td>title</td><td>顶部栏标题</td><td><em>string</em></td><td>-</td></tr><tr><td>area-list</td><td>省市区数据，格式见下方</td><td><em>object</em></td><td>-</td></tr><tr><td>columns-num</td><td>省市区显示列数，3-省市区，2-省市，1-省</td><td><em>string | number</em></td><td><code>3</code></td></tr><tr><td>columns-placeholder</td><td>列占位提示文字</td><td><em>string[]</em></td><td><code>[]</code></td></tr><tr><td>loading</td><td>是否显示加载状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>item-height</td><td>选项高度</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>visible-item-count</td><td>可见的选项个数</td><td><em>number</em></td><td><code>6</code></td></tr><tr><td>confirm-button-text</td><td>确认按钮文字</td><td><em>string</em></td><td><code>确认</code></td></tr><tr><td>cancel-button-text</td><td>取消按钮文字</td><td><em>string</em></td><td><code>取消</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>事件</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:confirm</td><td>点击右上方完成按钮</td><td>一个数组参数，具体格式看下方数据格式章节</td></tr><tr><td>bind:cancel</td><td>点击取消按钮时</td><td>-</td></tr><tr><td>bind:change</td><td>选项改变时触发</td><td>Picker 实例，所有列选中值，当前列对应的索引</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><p>通过 selectComponent 可以获取到 Area 实例并调用实例方法。</p><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>reset</td><td>code: string</td><td>-</td><td>根据 code 重置所有选项，若不传 code，则重置到第一项</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">点击完成时返回的数据格式</h3><p>返回的数据整体为一个 Object，包含 <code>values</code>, <code>indexs</code> 两个 key。</p><p><code>values</code> 整体为一个数组，数组内包含 <code>columnsNum</code> 个数据， 每个数据对应一列选项中被选中的数据。</p><p><code>code</code> 代表被选中的地区编码， <code>name</code> 代表被选中的地区名称。</p><pre><code class="language-javascript">[\n {\n <span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110000&#39;</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;北京市&#39;</span>,\n },\n {\n <span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110100&#39;</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;北京市&#39;</span>,\n },\n {\n <span class="hljs-attr">code</span>: <span class="hljs-string">&#39;110101&#39;</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;东城区&#39;</span>,\n },\n];\n</code></pre><p><code>indexs</code> 为一个数组，数组内包含 <code>columnsNum</code> 个数据， 每个数据对应一列选项中被选中项的序号。</p></div>',17),I=[S],D={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",P,I)))},T={class:"van-doc-markdown-body"},A=t('<h1>Button 按钮</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>按钮用于触发一个操作，如提交表单。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="an-niu-lei-xing" tabindex="-1">按钮类型</h3><p>支持<code>default</code>、<code>primary</code>、<code>info</code>、<code>warning</code>、<code>danger</code>五种类型，默认为<code>default</code>。</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>默认按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>主要按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>信息按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>警告按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>危险按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="po-su-an-niu" tabindex="-1">朴素按钮</h3><p>通过<code>plain</code>属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。</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>朴素按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>朴素按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="xi-bian-kuang" tabindex="-1">细边框</h3><p>设置<code>hairline</code>属性可以开启 0.5px 边框，基于伪类实现。</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>细边框按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>细边框按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">禁用状态</h3><p>通过<code>disabled</code>属性来禁用按钮，此时按钮的<code>bind:click</code>事件不会触发。</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>禁用状态<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>禁用状态<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">加载状态</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>\n<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>\n<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;加载中...&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="an-niu-xing-zhuang" tabindex="-1">按钮形状</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>方形按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>圆形按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-an-niu" tabindex="-1">图标按钮</h3><p>通过<code>icon</code>属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。</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>\n<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>&gt;</span>\n<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>\n 按钮\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="an-niu-chi-cun" tabindex="-1">按钮尺寸</h3><p>支持<code>large</code>、<code>normal</code>、<code>small</code>、<code>mini</code>四种尺寸，默认为<code>normal</code>。</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>大号按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>普通按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>小型按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>迷你按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="kuai-ji-yuan-su" tabindex="-1">块级元素</h3><p>通过<code>block</code>属性可以将按钮的元素类型设置为块级元素。</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>块级元素<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</h3><p>通过<code>color</code>属性可以自定义按钮的颜色。</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>单色按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>单色按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>\n 渐变色按钮\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>id</td><td>标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>type</td><td>按钮类型，可选值为 <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>按钮尺寸，可选值为 <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>按钮颜色，支持传入<code>linear-gradient</code>渐变色</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>左侧图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>class-prefix</td><td>图标类名前缀，同 Icon 组件的 <a href="#/icon">class-prefix 属性</a></td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>plain</td><td>是否为朴素按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>block</td><td>是否为块级元素</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>round</td><td>是否为圆形按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>square</td><td>是否为方形按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>hairline</td><td>是否使用 0.5px 边框</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>是否显示为加载状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading-text</td><td>加载状态提示文字</td><td><em>string</em></td><td>-</td></tr><tr><td>loading-type</td><td>加载状态图标类型，可选值为 <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>loading-size</td><td>加载图标大小</td><td><em>string</em></td><td><code>20px</code></td></tr><tr><td>custom-style</td><td>自定义样式</td><td><em>string</em></td><td>-</td></tr><tr><td>open-type</td><td>微信开放能力，具体支持可参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">微信官方文档</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>打开 APP 时，向 APP 传递的参数</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>会话来源</td><td><em>string</em></td><td>-</td></tr><tr><td>business-id</td><td>客服消息子商户 id</td><td><em>number</em></td><td>-</td></tr><tr><td>send-message-title</td><td>会话内消息卡片标题</td><td><em>string</em></td><td>当前标题</td></tr><tr><td>send-message-path</td><td>会话内消息卡片点击跳转小程序路径</td><td><em>string</em></td><td>当前分享路径</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>截图</td></tr><tr><td>show-message-card</td><td>显示会话内消息卡片</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>dataset</td><td>按钮 dataset，open-type 为 <code>share</code> 时，可在 onShareAppMessage 事件的 <code>event.target.dataset.detail</code> 中看到传入的值</td><td><em>any</em></td><td>-</td></tr><tr><td>form-type</td><td>用于 form 组件，可选值为<code>submit</code> <code>reset</code>，点击分别会触发 form 组件的 submit/reset 事件</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:click</td><td>点击按钮，且按钮状态不为加载或禁用时触发</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>用户点击该按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo</td><td>-</td></tr><tr><td>bind:contact</td><td>客服消息回调</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>获取用户手机号回调</td><td>-</td></tr><tr><td>bind:error</td><td>当使用开放能力时，发生错误的回调</td><td>-</td></tr><tr><td>bind:opensetting</td><td>在打开授权设置页后回调</td><td>-</td></tr></tbody></table><blockquote><p>Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。</p></blockquote></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>loading-class</td><td>加载图标样式类</td></tr></tbody></table></div>',18),B=[A],F={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",T,B)))},N={class:"van-doc-markdown-body"},E=t('<h1>Calendar 日历</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>日历组件用于选择日期或日期区间。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="xuan-ze-dan-ge-ri-qi" tabindex="-1">选择单个日期</h3><p>下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发<code>confirm</code>事件。</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;选择单个日期&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>\n<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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">date</span>: <span class="hljs-string">&#39;&#39;</span>,\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n <span class="hljs-title function_">formatDate</span>(<span class="hljs-params">date</span>) {\n date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(date);\n <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>;\n },\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <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>),\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-duo-ge-ri-qi" tabindex="-1">选择多个日期</h3><p>设置<code>type</code>为<code>multiple</code>后可以选择多个日期，此时<code>confirm</code>事件返回的 date 为数组结构，数组包含若干个选中的日期。</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;选择多个日期&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>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;multiple&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;&#39;</span>,\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">date</span>: <span class="hljs-string">`选择了 <span class="hljs-subst">${event.detail.length}</span> 个日期`</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-qu-jian" tabindex="-1">选择日期区间</h3><p>设置<code>type</code>为<code>range</code>后可以选择日期区间，此时<code>confirm</code>事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。</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;选择日期区间&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>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">date</span>: <span class="hljs-string">&#39;&#39;</span>,\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onDisplay</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n <span class="hljs-title function_">formatDate</span>(<span class="hljs-params">date</span>) {\n date = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(date);\n <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>;\n },\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> [start, end] = event.<span class="hljs-property">detail</span>;\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <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>,\n });\n },\n});\n</code></pre><blockquote><p>Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。</p></blockquote></div><div class="van-doc-card"><h3 id="kuai-jie-xuan-ze" tabindex="-1">快捷选择</h3><p>将<code>show-confirm</code>设置为<code>false</code>可以隐藏确认按钮，这种情况下选择完成后会立即触发<code>confirm</code>事件。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</h3><p>通过<code>color</code>属性可以自定义日历的颜色，对选中日期和底部按钮生效。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ri-qi-fan-wei" tabindex="-1">自定义日期范围</h3><p>通过<code>min-date</code>和<code>max-date</code>定义日历的范围，需要注意的是<code>min-date</code>和<code>max-date</code>的区间不宜过大，否则会造成严重的性能问题。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n <span class="hljs-attr">max-date</span>=<span class="hljs-string">&quot;{{ maxDate }}&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">minDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2010</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>).<span class="hljs-title function_">getTime</span>(),\n <span class="hljs-attr">maxDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-number">2010</span>, <span class="hljs-number">0</span>, <span class="hljs-number">31</span>).<span class="hljs-title function_">getTime</span>(),\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu-wen-zi" tabindex="-1">自定义按钮文字</h3><p>通过<code>confirm-text</code>设置按钮文字，通过<code>confirm-disabled-text</code>设置按钮禁用时的文字。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span>\n <span class="hljs-attr">confirm-text</span>=<span class="hljs-string">&quot;完成&quot;</span>\n <span class="hljs-attr">confirm-disabled-text</span>=<span class="hljs-string">&quot;请选择结束时间&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ri-qi-wen-an" tabindex="-1">自定义日期文案</h3><p>通过传入<code>formatter</code>函数来对日历上每一格的内容进行格式化</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-title function_">formatter</span>(<span class="hljs-params">day</span>) {\n <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>;\n <span class="hljs-keyword">const</span> date = day.<span class="hljs-property">date</span>.<span class="hljs-title function_">getDate</span>();\n\n <span class="hljs-keyword">if</span> (month === <span class="hljs-number">5</span>) {\n <span class="hljs-keyword">if</span> (date === <span class="hljs-number">1</span>) {\n day.<span class="hljs-property">topInfo</span> = <span class="hljs-string">&#39;劳动节&#39;</span>;\n } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (date === <span class="hljs-number">4</span>) {\n day.<span class="hljs-property">topInfo</span> = <span class="hljs-string">&#39;五四青年节&#39;</span>;\n } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (date === <span class="hljs-number">11</span>) {\n day.<span class="hljs-property">text</span> = <span class="hljs-string">&#39;今天&#39;</span>;\n }\n }\n\n <span class="hljs-keyword">if</span> (day.<span class="hljs-property">type</span> === <span class="hljs-string">&#39;start&#39;</span>) {\n day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">&#39;入住&#39;</span>;\n } <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>) {\n day.<span class="hljs-property">bottomInfo</span> = <span class="hljs-string">&#39;离店&#39;</span>;\n }\n\n <span class="hljs-keyword">return</span> day;\n },\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-dan-chu-wei-zhi" tabindex="-1">自定义弹出位置</h3><p>通过<code>position</code>属性自定义弹出层的弹出位置，可选值为<code>top</code>、<code>left</code>、<code>right</code>。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="ri-qi-qu-jian-zui-da-fan-wei" tabindex="-1">日期区间最大范围</h3><p>选择日期区间时，可以通过<code>max-range</code>属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-zhou-qi-shi-ri" tabindex="-1">自定义周起始日</h3><p>通过 <code>first-day-of-week</code> 属性设置一周从哪天开始。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="ping-pu-zhan-shi" tabindex="-1">平铺展示</h3><p>将<code>poppable</code>设置为<code>false</code>，日历会直接展示在页面内，而不是以弹层的形式出现。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-calendar</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;日历&quot;</span>\n <span class="hljs-attr">poppable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">show-confirm</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;calendar&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.calendar</span> {\n <span class="hljs-attr">--calendar-height</span>: <span class="hljs-number">500px</span>;\n}\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>选择类型:<br><code>single</code>表示选择单个日期，<br><code>multiple</code>表示选择多个日期，<br><code>range</code>表示选择日期区间</td><td><em>string</em></td><td><code>single</code></td></tr><tr><td>title</td><td>日历标题</td><td><em>string</em></td><td><code>日期选择</code></td></tr><tr><td>color</td><td>主题色，对底部按钮和选中日期生效</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>min-date</td><td>可选择的最小日期</td><td><em>timestamp</em></td><td>当前日期</td></tr><tr><td>max-date</td><td>可选择的最大日期</td><td><em>timestamp</em></td><td>当前日期的六个月后</td></tr><tr><td>default-date</td><td>默认选中的日期，<code>type</code>为<code>multiple</code>或<code>range</code>时为数组</td><td><em>timestamp | timestamp[]</em></td><td>今天</td></tr><tr><td>row-height</td><td>日期行高</td><td><em>number | string</em></td><td><code>64</code></td></tr><tr><td>formatter</td><td>日期格式化函数</td><td><em>(day: Day) =&gt; Day</em></td><td>-</td></tr><tr><td>poppable</td><td>是否以弹层的形式展示日历</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-mark</td><td>是否显示月份背景水印</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-title</td><td>是否展示日历标题</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-subtitle</td><td>是否展示日历副标题（年月）</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-confirm</td><td>是否展示确认按钮</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>confirm-text</td><td>确认按钮的文字</td><td><em>string</em></td><td><code>确定</code></td></tr><tr><td>confirm-disabled-text</td><td>确认按钮处于禁用状态时的文字</td><td><em>string</em></td><td><code>确定</code></td></tr><tr><td>first-day-of-week</td><td>设置周起始日</td><td><em>0~6</em></td><td><code>0</code></td></tr><tr><td>readonly <code>v1.9.1</code></td><td>是否为只读状态，只读状态下不能选择日期</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>当 Calendar 的 <code>poppable</code> 为 <code>true</code> 时，支持以下 props:</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>show</td><td>是否显示日历弹窗</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>position</td><td>弹出位置，可选值为 <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>是否显示圆角弹窗</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>是否在点击遮罩层后关闭</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-bottom</td><td>是否开启底部安全区适配</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>当 Calendar 的 <code>type</code> 为 <code>range</code> 时，支持以下 props:</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>max-range</td><td>日期区间最多可选天数，默认无限制</td><td><em>number | string</em></td><td>-</td></tr><tr><td>range-prompt</td><td>范围选择超过最多可选天数时的提示文案</td><td><em>string | null</em></td><td><code>选择天数不能超过 xx 天</code></td></tr><tr><td>show-range-prompt</td><td>范围选择超过最多可选天数时，是否展示提示文案</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>allow-same-day</td><td>是否允许日期范围的起止时间为同一天</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="day-shu-ju-jie-gou" tabindex="-1">Day 数据结构</h3><p>日历中的每个日期都对应一个 Day 对象，通过<code>formatter</code>属性可以自定义 Day 对象的内容。</p><table><thead><tr><th>键名</th><th>说明</th><th>类型</th></tr></thead><tbody><tr><td>date</td><td>日期对应的 Date 对象</td><td><em>Date</em></td></tr><tr><td>type</td><td>日期类型，可选值为<code>selected</code>、<code>start</code>、<code>middle</code>、<code>end</code>、<code>disabled</code></td><td><em>string</em></td></tr><tr><td>text</td><td>中间显示的文字</td><td><em>string</em></td></tr><tr><td>topInfo</td><td>上方的提示信息</td><td><em>string</em></td></tr><tr><td>bottomInfo</td><td>下方的提示信息</td><td><em>string</em></td></tr><tr><td>className</td><td>自定义 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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>select</td><td>点击任意日期时触发</td><td><em>value: Date | Date[]</em></td></tr><tr><td>unselect</td><td>当 Calendar 的 <code>type</code> 为 <code>multiple</code> 时,点击已选中的日期时触发</td><td><em>value: Date</em></td></tr><tr><td>confirm</td><td>日期选择完成后触发，若<code>show-confirm</code>为<code>true</code>，则点击确认按钮后触发</td><td><em>value: Date | Date[]</em></td></tr><tr><td>open</td><td>打开弹出层时触发</td><td>-</td></tr><tr><td>close</td><td>关闭弹出层时触发</td><td>-</td></tr><tr><td>opened</td><td>打开弹出层且动画结束后触发</td><td>-</td></tr><tr><td>closed</td><td>关闭弹出层且动画结束后触发</td><td>-</td></tr><tr><td>over-range</td><td>范围选择超过最多可选天数时触发</td><td>-</td></tr><tr><td>click-subtitle <code>v1.8.1</code></td><td>点击日历副标题时触发</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>title</td><td>自定义标题</td></tr><tr><td>footer</td><td>自定义底部区域内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><p>通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。</p><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th><th>返回值</th></tr></thead><tbody><tr><td>reset</td><td>重置选中的日期到默认值</td><td>-</td><td>-</td></tr></tbody></table></div>',24),L=[E],U={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",N,L)))},R={class:"van-doc-markdown-body"},V=t('<h1>Card 商品卡片</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>商品卡片，用于展示商品的图片、价格等信息。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-card</span>\n <span class="hljs-attr">num</span>=<span class="hljs-string">&quot;2&quot;</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;2.00&quot;</span>\n <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;描述信息&quot;</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;商品标题&quot;</span>\n <span class="hljs-attr">thumb</span>=<span class="hljs-string">&quot;{{ imageURL }}&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">高级用法</h3><p>可以通过插槽添加定制内容。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-card</span>\n <span class="hljs-attr">num</span>=<span class="hljs-string">&quot;2&quot;</span>\n <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;标签&quot;</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;10.00&quot;</span>\n <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;描述信息&quot;</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;商品标题&quot;</span>\n <span class="hljs-attr">thumb</span>=<span class="hljs-string">&quot;{{ imageURL }}&quot;</span>\n&gt;</span>\n <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>\n <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>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <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>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-card</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>thumb</td><td>左侧图片</td><td><em>string</em></td><td>-</td></tr><tr><td>thumb-mode</td><td>左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值</td><td><em>string</em></td><td><code>aspectFit</code></td></tr><tr><td>title</td><td>标题</td><td><em>string</em></td><td>-</td></tr><tr><td>desc</td><td>描述</td><td><em>string</em></td><td>-</td></tr><tr><td>tag</td><td>标签</td><td><em>string</em></td><td>-</td></tr><tr><td>num</td><td>商品数量</td><td><em>string | number</em></td><td>-</td></tr><tr><td>price</td><td>商品价格</td><td><em>string | number</em></td><td>-</td></tr><tr><td>origin-price</td><td>商品划线原价</td><td><em>string | number</em></td><td>-</td></tr><tr><td>centered</td><td>内容是否垂直居中</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>currency</td><td>货币符号</td><td><em>string</em></td><td><code>¥</code></td></tr><tr><td>thumb-link</td><td>点击左侧图片后跳转的链接地址</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>链接跳转类型，可选值为 <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>是否开启图片懒加载</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>title</td><td>自定义标题栏，如果设置了<code>title</code>属性则不生效</td></tr><tr><td>desc</td><td>自定义描述栏，如果设置了<code>desc</code>属性则不生效</td></tr><tr><td>num</td><td>自定义数量</td></tr><tr><td>price</td><td>自定义价格</td></tr><tr><td>origin-price</td><td>自定义商品原价，如果设置了<code>origin-price</code>属性则不生效</td></tr><tr><td>price-top</td><td>自定义价格上方区域</td></tr><tr><td>bottom</td><td>自定义价格下方区域</td></tr><tr><td>thumb</td><td>自定义图片，如果设置了<code>thumb</code>属性则不生效</td></tr><tr><td>tag</td><td>自定义图片角标，如果设置了<code>tag</code>属性则不生效</td></tr><tr><td>tags</td><td>自定义描述下方标签区域</td></tr><tr><td>footer</td><td>自定义右下角内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>thumb-class</td><td>左侧图片样式类</td></tr><tr><td>title-class</td><td>标题样式类</td></tr><tr><td>price-class</td><td>价格样式类</td></tr><tr><td>origin-price-class</td><td>划线原价样式类</td></tr><tr><td>desc-class</td><td>描述样式类</td></tr><tr><td>num-class</td><td>数量样式类</td></tr></tbody></table></div>',10),G=[V],O={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",R,G)))},M={class:"van-doc-markdown-body"},W=[t('<h1>Cell 单元格</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>单元格为列表中的单个展示项。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p><code>Cell</code>可以单独使用，也可以与<code>CellGroup</code>搭配使用。<code>CellGroup</code>可以为<code>Cell</code>提供上下外边框。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;描述信息&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="qia-pian-feng-ge" tabindex="-1">卡片风格</h3><p>通过 <code>CellGroup</code> 的 <code>inset</code> 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;描述信息&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="dan-yuan-ge-da-xiao" tabindex="-1">单元格大小</h3><p>通过<code>size</code>属性可以控制单元格的大小。</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;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;large&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&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;描述信息&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-tu-biao" tabindex="-1">展示图标</h3><p>通过<code>icon</code>属性在标题左侧展示图标。</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;单元格&quot;</span> <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;location-o&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-jian-tou" tabindex="-1">展示箭头</h3><p>设置<code>is-link</code>属性后会在单元格右侧显示箭头，并且可以通过<code>arrow-direction</code>属性控制箭头方向。</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;单元格&quot;</span> <span class="hljs-attr">is-link</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">is-link</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> <span class="hljs-attr">arrow-direction</span>=<span class="hljs-string">&quot;down&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="ye-mian-tiao-zhuan" tabindex="-1">页面跳转</h3><p>可以通过<code>url</code>属性进行页面跳转，通过<code>link-type</code>属性控制跳转类型。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span>\n <span class="hljs-attr">is-link</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span>\n <span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;navigateTo&quot;</span>\n <span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="fen-zu-biao-ti" tabindex="-1">分组标题</h3><p>通过<code>CellGroup</code>的<code>title</code>属性可以指定分组标题。</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;分组1&quot;</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;分组2&quot;</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-cha-cao" tabindex="-1">使用插槽</h3><p>如以上用法不能满足你的需求，可以使用插槽来自定义内容。</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;内容&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>\n <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>\n <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>单元格<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span>&gt;</span>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-ju-zhong" tabindex="-1">垂直居中</h3><p>通过<code>center</code>属性可以让<code>Cell</code>的左右内容都垂直居中。</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;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;描述信息&quot;</span> /&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>分组标题</td><td><em>string</em></td><td><code>-</code></td></tr><tr><td>inset <code>v1.7.2</code></td><td>是否展示为圆角卡片风格</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>是否显示外边框</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 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-props" tabindex="-1">Cell Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>icon</td><td>左侧图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>title</td><td>左侧标题</td><td><em>string | number</em></td><td>-</td></tr><tr><td>title-width</td><td>标题宽度，须包含单位</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>右侧内容</td><td><em>string | number</em></td><td>-</td></tr><tr><td>label</td><td>标题下方的描述信息</td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>单元格大小，可选值为 <code>large</code></td><td><em>string</em></td><td>-</td></tr><tr><td>border</td><td>是否显示下边框</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>center</td><td>是否使内容垂直居中</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>url</td><td>点击后跳转的链接地址</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>链接跳转类型，可选值为 <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>是否开启点击反馈</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>is-link</td><td>是否展示右侧箭头并开启点击反馈</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>required</td><td>是否显示表单必填星号</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>arrow-direction</td><td>箭头方向，可选值为 <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>是否使用 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>标题样式</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:click</td><td>点击单元格时触发</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义<code>value</code>显示内容，如果设置了<code>value</code>属性则不生效</td></tr><tr><td>title</td><td>自定义<code>title</code>显示内容，如果设置了<code>title</code>属性则不生效</td></tr><tr><td>label</td><td>自定义<code>label</code>显示内容，需要设置 <code>use-label-slot</code>属性</td></tr><tr><td>icon</td><td>自定义<code>icon</code>显示内容，如果设置了<code>icon</code>属性则不生效</td></tr><tr><td>right-icon</td><td>自定义右侧按钮，默认是<code>arrow</code>，如果设置了<code>is-link</code>属性则不生效</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="cell-wai-bu-yang-shi-lei" tabindex="-1">Cell 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>title-class</td><td>标题样式类</td></tr><tr><td>label-class</td><td>描述信息样式类</td></tr><tr><td>value-class</td><td>右侧内容样式类</td></tr></tbody></table></div>',20)],$={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",M,W)))},H={class:"van-doc-markdown-body"},K=[t('<h1>Checkbox 复选框</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>在一组备选项中进行多选。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过<code>value</code>绑定复选框的勾选状态。</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>复选框<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">checked</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">禁用状态</h3><p>通过设置<code>disabled</code>属性可以禁用复选框。</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>\n 复选框\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xing-zhuang" tabindex="-1">自定义形状</h3><p>将<code>shape</code>属性设置为<code>square</code>，复选框的形状会变成方形。</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>\n 复选框\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</h3><p>通过<code>checked-color</code>属性可以自定义选中状态下的图标颜色。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span>\n <span class="hljs-attr">checked-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n&gt;</span>\n 复选框\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">自定义大小</h3><p>通过<code>icon-size</code>属性可以自定义图标的大小。</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>复选框<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">自定义图标</h3><p>通过 icon 插槽自定义图标。</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>\n 自定义图标\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-active.png&#39;</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-normal.png&#39;</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">checked</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-wen-ben-dian-ji" tabindex="-1">禁用文本点击</h3><p>通过设置<code>label-disabled</code>属性可以禁用复选框文本点击。</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>复选框<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="fu-xuan-kuang-zu" tabindex="-1">复选框组</h3><p>需要与<code>van-checkbox-group</code>一起使用，选中值是一个数组，通过<code>value</code>绑定在<code>van-checkbox-group</code>上，数组中的项即为选中的<code>Checkbox</code>的<code>name</code>属性设置的值。</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>\n <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>复选框 a<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n <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>复选框 b<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n <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>复选框 c<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">result</span>: [<span class="hljs-string">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</span>],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">result</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-zui-da-ke-xuan-shu" tabindex="-1">限制最大可选数</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>\n <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>复选框 a<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n <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>复选框 b<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n <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>复选框 c<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="da-pei-dan-yuan-ge-zu-jian-shi-yong" tabindex="-1">搭配单元格组件使用</h3><p>此时你需要再引入<code>Cell</code>和<code>CellGroup</code>组件，并通过 checkbox 的 toggle 方法手动触发切换。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span>\n <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ list }}&quot;</span>\n <span class="hljs-attr">wx:key</span>=<span class="hljs-string">&quot;index&quot;</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;复选框 {{ item }}&quot;</span>\n <span class="hljs-attr">value-class</span>=<span class="hljs-string">&quot;value-class&quot;</span>\n <span class="hljs-attr">clickable</span>\n <span class="hljs-attr">data-index</span>=<span class="hljs-string">&quot;{{ index }}&quot;</span>\n <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;toggle&quot;</span>\n &gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-checkbox</span>\n <span class="hljs-attr">catch:tap</span>=<span class="hljs-string">&quot;noop&quot;</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;checkboxes-{{ index }}&quot;</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;{{ item }}&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-checkbox-group</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <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>],\n <span class="hljs-attr">result</span>: [<span class="hljs-string">&#39;a&#39;</span>, <span class="hljs-string">&#39;b&#39;</span>],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">result</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n\n <span class="hljs-title function_">toggle</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { index } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;\n <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>);\n checkbox.<span class="hljs-title function_">toggle</span>();\n },\n\n <span class="hljs-title function_">noop</span>(<span class="hljs-params"></span>) {},\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.value-class</span> {\n <span class="hljs-attribute">flex</span>: none <span class="hljs-meta">!important</span>;\n}\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>标识 Checkbox 名称</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>形状，可选值为 <code>round</code> <code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>value</td><td>是否为选中状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用单选框</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-disabled</td><td>是否禁用单选框内容点击</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-position</td><td>文本位置，可选值为 <code>left</code></td><td><em>string</em></td><td><code>right</code></td></tr><tr><td>use-icon-slot</td><td>是否使用 icon slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>checked-color</td><td>选中状态颜色</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>icon-size</td><td>icon 大小</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>在表单内提交时的标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>所有选中项的 name</td><td><em>Array</em></td><td>-</td></tr><tr><td>disabled</td><td>是否禁用所有单选框</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>max</td><td>设置最大可选数</td><td><em>number</em></td><td><code>0</code>（无限制）</td></tr><tr><td>direction <code>v1.7.0</code></td><td>排列方向，可选值为 <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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:change</td><td>当绑定值变化时触发的事件</td><td>当前组件的值</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-wai-bu-yang-shi-lei" tabindex="-1">Checkbox 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>icon-class</td><td>图标样式类</td></tr><tr><td>label-class</td><td>描述信息样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkboxgroup-event" tabindex="-1">CheckboxGroup Event</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:change</td><td>当绑定值变化时触发的事件</td><td>当前组件的值</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-slot" tabindex="-1">Checkbox Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义文本</td></tr><tr><td>icon</td><td>自定义图标</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="checkbox-fang-fa" tabindex="-1">Checkbox 方法</h3><p>通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。</p><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>toggle</td><td>-</td><td>-</td><td>切换选中状态</td></tr></tbody></table></div>',22)],Q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",H,K)))},X={class:"van-doc-markdown-body"},J=[t('<h1>Circle 环形进度条</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>圆环形的进度条组件，支持进度渐变动画。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p><code>value</code>属性表示进度条的目标进度。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="kuan-du-ding-zhi" tabindex="-1">宽度定制</h3><p>通过<code>stroke-width</code>属性来控制进度条宽度。</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;宽度定制&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="yan-se-ding-zhi" tabindex="-1">颜色定制</h3><p>通过<code>color</code>属性来控制进度条颜色，<code>layer-color</code>属性来控制轨道颜色。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">layer-color</span>=<span class="hljs-string">&quot;#eeeeee&quot;</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;颜色定制&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jian-bian-se" tabindex="-1">渐变色</h3><p><code>color</code>属性支持传入对象格式来定义渐变色。</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;渐变色&quot;</span> /&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">25</span>,\n <span class="hljs-attr">gradientColor</span>: {\n <span class="hljs-string">&#39;0%&#39;</span>: <span class="hljs-string">&#39;#ffd01e&#39;</span>,\n <span class="hljs-string">&#39;100%&#39;</span>: <span class="hljs-string">&#39;#ee0a24&#39;</span>,\n },\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="ni-shi-zhen-fang-xiang" tabindex="-1">逆时针方向</h3><p>将<code>clockwise</code>设置为<code>false</code>，进度会从逆时针方向开始。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-circle</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n <span class="hljs-attr">clockwise</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;逆时针&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="da-xiao-ding-zhi" tabindex="-1">大小定制</h3><p>通过<code>size</code>属性设置圆环直径。</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;大小定制&quot;</span> /&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>目标进度</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>type</td><td>指定 canvas 类型，可选值为 <code>2d</code></td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>圆环直径，默认单位为 <code>px</code></td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>color</td><td>进度条颜色，传入对象格式可以定义渐变色</td><td><em>string | object</em></td><td><code>#1989fa</code></td></tr><tr><td>layer-color</td><td>轨道颜色</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>fill</td><td>填充颜色</td><td><em>string</em></td><td>-</td></tr><tr><td>speed</td><td>动画速度（单位为 value/s）</td><td><em>number</em></td><td><code>50</code></td></tr><tr><td>text</td><td>文字</td><td><em>string</em></td><td>-</td></tr><tr><td>stroke-width</td><td>进度条宽度</td><td><em>number</em></td><td><code>4</code></td></tr><tr><td>clockwise</td><td>是否顺时针增加</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义文字内容，如果设置了<code>fill</code>，插槽内容会被原生组件覆盖</td></tr></tbody></table></div>',13)],Z={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",X,J)))},Y={class:"van-doc-markdown-body"},ss=[t('<h1>Layout 布局</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>Layout 提供了<code>van-row</code>和<code>van-col</code>两个组件来进行行列布局。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">基本用法</h3><p>Layout 组件提供了<code>24列栅格</code>，通过在<code>Col</code>上添加<code>span</code>属性设置列所占的宽度百分比。此外，添加<code>offset</code>属性可以设置列的偏移宽度，计算方式与 span 相同。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>\n <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>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-row</span>&gt;</span>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="she-zhi-lie-yuan-su-jian-ju" tabindex="-1">设置列元素间距</h3><p>通过<code>gutter</code>属性可以设置列元素之间的间距，默认间距为 0。</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>\n <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>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-row</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>gutter</td><td>列元素之间的间距（单位为 px）</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>span</td><td>列元素宽度</td><td><em>string | number</em></td><td>-</td></tr><tr><td>offset</td><td>列元素偏移距离</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">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',10)],as={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Y,ss)))},ts={class:"van-doc-markdown-body"},ns=[t('<h1>Collapse 折叠面板</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过<code>value</code>控制展开的面板列表，<code>activeNames</code>为数组格式。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞微商城&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n 提供多样店铺模板，快速搭建网上商城\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞零售&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\n 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞美业&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span>\n 线上拓客，随时预约，贴心顺手的开单收银\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeNames</span>: [<span class="hljs-string">&#39;1&#39;</span>],\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shou-feng-qin" tabindex="-1">手风琴</h3><p>通过<code>accordion</code>可以设置为手风琴模式，最多展开一个面板，此时<code>activeName</code>为字符串格式。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞微商城&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n 提供多样店铺模板，快速搭建网上商城\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞零售&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\n 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞美业&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>\n 线上拓客，随时预约，贴心顺手的开单收银\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeName</span>: <span class="hljs-string">&#39;1&#39;</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeName</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shi-jian-jian-ting" tabindex="-1">事件监听</h3><p><code>van-collapse</code> 提供了 <code>change</code>, <code>open</code> 和 <code>close</code> 事件。<code>change</code> 事件在面板切换时触发，<code>open</code> 事件在面板展开时触发，<code>close</code> 事件在面板关闭时触发。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-collapse</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ activeNames }}&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n <span class="hljs-attr">bind:open</span>=<span class="hljs-string">&quot;onOpen&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞微商城&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>\n 提供多样店铺模板，快速搭建网上商城\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞零售&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>\n 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞美业&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;3&quot;</span>&gt;</span>\n 线上拓客，随时预约，贴心顺手的开单收银\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeNames</span>: [<span class="hljs-string">&#39;1&#39;</span>],\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n <span class="hljs-title function_">onOpen</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`展开: <span class="hljs-subst">${event.detail}</span>`</span>);\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`关闭: <span class="hljs-subst">${event.detail}</span>`</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-biao-ti-nei-rong" tabindex="-1">自定义标题内容</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>\n <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>\n <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">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>\n 提供多样店铺模板，快速搭建网上商城\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-collapse-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;有赞零售&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>\n 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-collapse</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeNames</span>: [<span class="hljs-string">&#39;1&#39;</span>],\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">activeNames</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>当前展开面板的 name</td><td>非手风琴模式：<em>(string | number)[]</em><br>手风琴模式：<em>string | number</em></td><td>-</td></tr><tr><td>accordion</td><td>是否开启手风琴模式</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>是否显示外边框</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>change</td><td>切换面板时触发</td><td>activeNames: <em>string | Array</em></td></tr><tr><td>open</td><td>展开面板时触发</td><td>currentName: <em>string | number</em></td></tr><tr><td>close</td><td>关闭面板时触发</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>唯一标识符，默认为索引值</td><td><em>string | number</em></td><td><code>index</code></td></tr><tr><td>title</td><td>标题栏左侧内容</td><td><em>string | number</em></td><td>-</td></tr><tr><td>icon</td><td>标题栏左侧图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>标题栏右侧内容</td><td><em>string | number</em></td><td>-</td></tr><tr><td>label</td><td>标题栏描述信息</td><td><em>string</em></td><td>-</td></tr><tr><td>border</td><td>是否显示内边框</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>is-link</td><td>是否展示标题栏右侧箭头并开启点击反馈</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>clickable</td><td>是否开启点击反馈</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用面板</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>面板内容</td></tr><tr><td>value</td><td>自定义显示内容</td></tr><tr><td>icon</td><td>自定义<code>icon</code></td></tr><tr><td>title</td><td>自定义<code>title</code></td></tr><tr><td>right-icon</td><td>自定义右侧按钮，默认是<code>arrow</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapse-wai-bu-yang-shi-lei" tabindex="-1">Collapse 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="collapseitem-wai-bu-yang-shi-lei" tabindex="-1">CollapseItem 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>content-class</td><td>内容样式类</td></tr></tbody></table></div>',15)],ls={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ts,ns)))},es={class:"van-doc-markdown-body"},ps=[t('<h1>内置样式</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在 app.wxss 中引入内置样式。</p><pre><code class="language-css"><span class="hljs-keyword">@import</span> <span class="hljs-string">&#39;@vant/weapp/common/index.wxss&#39;</span>;\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="wen-zi-sheng-lue" tabindex="-1">文字省略</h3><p>当文本内容长度超过容器最大宽度时，自动省略多余的文本。</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>\n 这是一段宽度限制 250px 的文字，后面的内容会省略。\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- 最多显示两行 --&gt;</span>\n<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>\n 这是一段最多显示两行的文字，后面的内容会省略。\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n<span class="hljs-comment">&lt;!-- 最多显示三行 --&gt;</span>\n<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>\n 这是一段最多显示三行的文字，后面的内容会省略。\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="1px-bian-kuang" tabindex="-1">1px 边框</h3><p>为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。</p><pre><code class="language-xml"><span class="hljs-comment">&lt;!-- 上边框 --&gt;</span>\n<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>\n\n<span class="hljs-comment">&lt;!-- 下边框 --&gt;</span>\n<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>\n\n<span class="hljs-comment">&lt;!-- 左边框 --&gt;</span>\n<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>\n\n<span class="hljs-comment">&lt;!-- 右边框 --&gt;</span>\n<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>\n\n<span class="hljs-comment">&lt;!-- 上下边框 --&gt;</span>\n<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>\n\n<span class="hljs-comment">&lt;!-- 全边框 --&gt;</span>\n<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>\n</code></pre></div><div class="van-doc-card"><h3 id="quan-ju-zi-ti" tabindex="-1">全局字体</h3><p>推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。</p><pre><code class="language-css">page {\n <span class="hljs-attribute">font-family</span>: -apple-system, BlinkMacSystemFont, <span class="hljs-string">&#39;Helvetica Neue&#39;</span>, Helvetica,\n 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>,\n sans-serif;\n}\n</code></pre></div>',7)],ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",es,ps)))},cs={class:"van-doc-markdown-body"},os=[t('<h1>ConfigProvider 全局配置</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于配置 Vant Weapp 组件的主题样式，从 <code>v1.7.0</code> 版本开始支持。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="ding-zhi-zhu-ti" tabindex="-1">定制主题</h2><div class="van-doc-card"><h3 id="jie-shao-1" tabindex="-1">介绍</h3><p>Vant Weapp 组件通过丰富的 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties">CSS 变量</a> 来组织样式，通过覆盖这些 CSS 变量，可以实现<strong>定制主题、动态切换主题</strong>等效果。</p><h4 id="shi-li" tabindex="-1">示例</h4><p>以 Button 组件为例，查看组件的样式，可以看到 <code>.van-button--primary</code> 类名上存在以下变量：</p><pre><code class="language-css"><span class="hljs-selector-class">.van-button--primary</span> {\n <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--button-primary-color, <span class="hljs-number">#fff</span>);\n <span class="hljs-attribute">background</span>: <span class="hljs-built_in">var</span>(--button-primary-background-color, <span class="hljs-number">#07c160</span>);\n <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>(\n --button-primary-border-color,\n <span class="hljs-number">#07c160</span>\n );\n}\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-css-bian-liang" tabindex="-1">自定义 CSS 变量</h3><h4 id="tong-guo-css-fu-gai" tabindex="-1">通过 CSS 覆盖</h4><p>你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：</p><pre><code class="language-css"><span class="hljs-comment">/* 添加这段样式后，Primary Button 会变成红色 */</span>\npage {\n <span class="hljs-attr">--button-primary-background-color</span>: red;\n}\n</code></pre><h4 id="tong-guo-configprovider-fu-gai" tabindex="-1">通过 ConfigProvider 覆盖</h4><p><code>ConfigProvider</code> 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 <code>ConfigProvider</code> 组件，并通过 <code>theme-vars</code> 属性来配置一些主题变量。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;评分&quot;</span>&gt;</span>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">model:value</span>=<span class="hljs-string">&quot;{{ rate }}&quot;</span>\n <span class="hljs-attr">data-key</span>=<span class="hljs-string">&quot;rate&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;滑块&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>&gt;</span>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ slider }}&quot;</span>\n <span class="hljs-attr">data-key</span>=<span class="hljs-string">&quot;slider&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n\n <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>\n <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>提交<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-config-provider</span>&gt;</span>\n</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>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">rate</span>: <span class="hljs-number">4</span>,\n <span class="hljs-attr">slider</span>: <span class="hljs-number">50</span>,\n <span class="hljs-attr">themeVars</span>: {\n <span class="hljs-attr">rateIconFullColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,\n <span class="hljs-attr">sliderBarHeight</span>: <span class="hljs-string">&#39;4px&#39;</span>,\n <span class="hljs-attr">sliderButtonWidth</span>: <span class="hljs-string">&#39;20px&#39;</span>,\n <span class="hljs-attr">sliderButtonHeight</span>: <span class="hljs-string">&#39;20px&#39;</span>,\n <span class="hljs-attr">sliderActiveBackgroundColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,\n <span class="hljs-attr">buttonPrimaryBorderColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,\n <span class="hljs-attr">buttonPrimaryBackgroundColor</span>: <span class="hljs-string">&#39;#07c160&#39;</span>,\n },\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { key } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n [key]: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>theme-vars</td><td>自定义主题变量</td><td><em>object</em></td><td>-</td></tr></tbody></table></div>',8)],is={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",cs,os)))},hs={class:"van-doc-markdown-body"},rs=[t('<h1>CountDown 倒计时</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于实时展示倒计时数值，支持毫秒精度。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a>。</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">基本用法</h3><p><code>time</code>属性表示倒计时总时长，单位为毫秒。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <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>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-ge-shi" tabindex="-1">自定义格式</h3><p>通过<code>format</code>属性设置倒计时文本的内容。</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 天 HH 时 mm 分 ss 秒&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="hao-miao-ji-xuan-ran" tabindex="-1">毫秒级渲染</h3><p>倒计时默认每秒渲染一次，设置<code>millisecond</code>属性可以开启毫秒级渲染。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">自定义样式</h3><p>设置<code>use-slot</code>属性后可以自定义倒计时样式，需要通过<code>bind:change</code>事件获取<code>timeData</code>对象并自行渲染，格式见下方表格。</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>\n <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>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-count-down</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <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>,\n <span class="hljs-attr">timeData</span>: {},\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">timeData</span>: e.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.item</span> {\n <span class="hljs-attribute">display</span>: inline-block;\n <span class="hljs-attribute">width</span>: <span class="hljs-number">22px</span>;\n <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">5px</span>;\n <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;\n <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;\n <span class="hljs-attribute">text-align</span>: center;\n <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#1989fa</span>;\n <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">2px</span>;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="shou-dong-kong-zhi" tabindex="-1">手动控制</h3><p>通过 <code>selectComponent</code> 选择器获取到组件实例后，可以调用<code>start</code>、<code>pause</code>、<code>reset</code>方法。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-count-down</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;control-count-down&quot;</span>\n <span class="hljs-attr">millisecond</span>\n <span class="hljs-attr">time</span>=<span class="hljs-string">&quot;{{ 3000 }}&quot;</span>\n <span class="hljs-attr">auto-start</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">format</span>=<span class="hljs-string">&quot;ss:SSS&quot;</span>\n <span class="hljs-attr">bind:finish</span>=<span class="hljs-string">&quot;finished&quot;</span>\n/&gt;</span>\n\n<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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;开始&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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;暂停&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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;重置&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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">start</span>(<span class="hljs-params"></span>) {\n <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>);\n countDown.<span class="hljs-title function_">start</span>();\n },\n\n <span class="hljs-title function_">pause</span>(<span class="hljs-params"></span>) {\n <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>);\n countDown.<span class="hljs-title function_">pause</span>();\n },\n\n <span class="hljs-title function_">reset</span>(<span class="hljs-params"></span>) {\n <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>);\n countDown.<span class="hljs-title function_">reset</span>();\n },\n\n <span class="hljs-title function_">finished</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;倒计时结束&#39;</span>);\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>time</td><td>倒计时时长，单位毫秒</td><td><em>number</em></td><td>-</td></tr><tr><td>format</td><td>时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒</td><td><em>string</em></td><td><code>HH:mm:ss</code></td></tr><tr><td>auto-start</td><td>是否自动开始倒计时</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>millisecond</td><td>是否开启毫秒级渲染</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>是否使用自定义样式插槽</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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>finish</td><td>倒计时结束时触发</td><td>-</td></tr><tr><td>change</td><td>时间变化时触发，仅在开启<code>use-slot</code>后才会触发</td><td>timeData</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="timedata-ge-shi" tabindex="-1">timeData 格式</h3><table><thead><tr><th>名称</th><th>说明</th><th>类型</th></tr></thead><tbody><tr><td>days</td><td>剩余天数</td><td><em>number</em></td></tr><tr><td>hours</td><td>剩余小时</td><td><em>number</em></td></tr><tr><td>minutes</td><td>剩余分钟</td><td><em>number</em></td></tr><tr><td>seconds</td><td>剩余秒数</td><td><em>number</em></td></tr><tr><td>milliseconds</td><td>剩余毫秒</td><td><em>number</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><p>通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。</p><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>start</td><td>-</td><td>-</td><td>开始倒计时</td></tr><tr><td>pause</td><td>-</td><td>-</td><td>暂停倒计时</td></tr><tr><td>reset</td><td>-</td><td>-</td><td>重设倒计时，若<code>auto-start</code>为<code>true</code>，重设后会自动开始倒计时</td></tr></tbody></table></div>',14)],us={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",hs,rs)))},gs={class:"van-doc-markdown-body"},js=[t('<h1>DatetimePicker 时间选择</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于选择时间，支持日期、时分等时间维度，通常与 <a href="#/popup">弹出层</a> 组件配合使用。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="xuan-ze-wan-zheng-shi-jian" tabindex="-1">选择完整时间</h3><p><code>value</code> 为时间戳。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;datetime&quot;</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n <span class="hljs-attr">max-date</span>=<span class="hljs-string">&quot;{{ maxDate }}&quot;</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">minHour</span>: <span class="hljs-number">10</span>,\n <span class="hljs-attr">maxHour</span>: <span class="hljs-number">20</span>,\n <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>(),\n <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>(),\n <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>(),\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-nian-yue-ri" tabindex="-1">选择日期（年月日）</h3><p><code>value</code> 为时间戳，通过传入 <code>formatter</code> 函数对选项文字进行处理。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;date&quot;</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n <span class="hljs-attr">formatter</span>=<span class="hljs-string">&quot;{{ formatter }}&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <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>(),\n <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>(),\n <span class="hljs-title function_">formatter</span>(<span class="hljs-params">type, value</span>) {\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">&#39;year&#39;</span>) {\n <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${value}</span>年`</span>;\n }\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">&#39;month&#39;</span>) {\n <span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${value}</span>月`</span>;\n }\n <span class="hljs-keyword">return</span> value;\n },\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-ri-qi-nian-yue" tabindex="-1">选择日期（年月）</h3><p><code>value</code> 为时间戳。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;year-month&quot;</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n <span class="hljs-attr">min-date</span>=<span class="hljs-string">&quot;{{ minDate }}&quot;</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <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>(),\n <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>(),\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-ze-shi-jian" tabindex="-1">选择时间</h3><p><code>value</code> 为字符串。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n <span class="hljs-attr">min-hour</span>=<span class="hljs-string">&quot;{{ minHour }}&quot;</span>\n <span class="hljs-attr">max-hour</span>=<span class="hljs-string">&quot;{{ maxHour }}&quot;</span>\n <span class="hljs-attr">bind:input</span>=<span class="hljs-string">&quot;onInput&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentDate</span>: <span class="hljs-string">&#39;12:00&#39;</span>,\n <span class="hljs-attr">minHour</span>: <span class="hljs-number">10</span>,\n <span class="hljs-attr">maxHour</span>: <span class="hljs-number">20</span>,\n },\n\n <span class="hljs-title function_">onInput</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentDate</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xuan-xiang-guo-lu-qi" tabindex="-1">选项过滤器</h3><p>通过传入 <code>filter</code> 函数，可以对选项数组进行过滤，实现自定义时间间隔。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-datetime-picker</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;time&quot;</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ currentDate }}&quot;</span>\n <span class="hljs-attr">filter</span>=<span class="hljs-string">&quot;{{ filter }}&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentDate</span>: <span class="hljs-string">&#39;12:00&#39;</span>,\n <span class="hljs-title function_">filter</span>(<span class="hljs-params">type, options</span>) {\n <span class="hljs-keyword">if</span> (type === <span class="hljs-string">&#39;minute&#39;</span>) {\n <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>);\n }\n\n <span class="hljs-keyword">return</span> options;\n },\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>当前选中值</td><td><em>string | number</em></td><td>-</td></tr><tr><td>type</td><td>类型，可选值为 <code>date</code> <code>time</code> <code>year-month</code> <br> <strong>不建议动态修改</strong></td><td><em>string</em></td><td><code>datetime</code></td></tr><tr><td>min-date</td><td>可选的最小时间，精确到分钟</td><td><em>number</em></td><td>十年前</td></tr><tr><td>max-date</td><td>可选的最大时间，精确到分钟</td><td><em>number</em></td><td>十年后</td></tr><tr><td>min-hour</td><td>可选的最小小时，针对 time 类型</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>max-hour</td><td>可选的最大小时，针对 time 类型</td><td><em>number</em></td><td><code>23</code></td></tr><tr><td>min-minute</td><td>可选的最小分钟，针对 time 类型</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>max-minute</td><td>可选的最大分钟，针对 time 类型</td><td><em>number</em></td><td><code>59</code></td></tr><tr><td>filter</td><td>选项过滤函数</td><td><em>(type, values) =&gt; values</em></td><td>-</td></tr><tr><td>formatter</td><td>选项格式化函数</td><td><em>(type, value) =&gt; value</em></td><td>-</td></tr><tr><td>title</td><td>顶部栏标题</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>show-toolbar</td><td>是否显示顶部栏</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>loading</td><td>是否显示加载状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>item-height</td><td>选项高度</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>confirm-button-text</td><td>确认按钮文字</td><td><em>string</em></td><td><code>确认</code></td></tr><tr><td>cancel-button-text</td><td>取消按钮文字</td><td><em>string</em></td><td><code>取消</code></td></tr><tr><td>visible-item-count</td><td>可见的选项个数</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>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>input</td><td>当值变化时触发的事件</td><td>当前 value</td></tr><tr><td>change</td><td>当值变化时触发的事件</td><td>组件实例</td></tr><tr><td>confirm</td><td>点击完成按钮时触发的事件</td><td>当前 value</td></tr><tr><td>cancel</td><td>点击取消按钮时触发的事件</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="change-shi-jian" tabindex="-1">change 事件</h3><p>在<code>change</code>事件中，可以获取到组件实例，对组件进行相应的更新等操作：</p><table><thead><tr><th>函数</th><th>说明</th></tr></thead><tbody><tr><td>getColumnValue(index)</td><td>获取对应列中选中的值</td></tr><tr><td>setColumnValue(index, value)</td><td>设置对应列中选中的值</td></tr><tr><td>getColumnValues(index)</td><td>获取对应列中所有的备选值</td></tr><tr><td>setColumnValues(index, values)</td><td>设置对应列中所有的备选值</td></tr><tr><td>getValues()</td><td>获取所有列中被选中的值，返回一个数组</td></tr><tr><td>setValues(values)</td><td><code>values</code>为一个数组，设置所有列中被选中的值</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>active-class</td><td>选中项样式类</td></tr><tr><td>toolbar-class</td><td>顶部栏样式类</td></tr><tr><td>column-class</td><td>列样式类</td></tr></tbody></table></div>',14)],ms={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gs,js)))},vs={class:"van-doc-markdown-body"},bs=[t('<h1>Dialog 弹出框</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="xiao-xi-ti-shi" tabindex="-1">消息提示</h3><p>用于提示一些消息，只包含一个确认按钮。</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>\n</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;path/to/@vant/weapp/dist/dialog/dialog&#39;</span>;\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;标题&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;弹窗内容&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-comment">// on close</span>\n});\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;弹窗内容&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-comment">// on close</span>\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xiao-xi-que-ren" tabindex="-1">消息确认</h3><p>用于确认消息，包含取消和确认按钮。</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>\n</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;path/to/@vant/weapp/dist/dialog/dialog&#39;</span>;\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;标题&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;弹窗内容&#39;</span>,\n})\n .<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-comment">// on confirm</span>\n })\n .<span class="hljs-title function_">catch</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-comment">// on cancel</span>\n });\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-an-niu-feng-ge" tabindex="-1">圆角按钮风格</h3><p>将 theme 选项设置为 <code>round-button</code> 可以展示圆角按钮风格的弹窗。</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>\n</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;path/to/@vant/weapp/dist/dialog/dialog&#39;</span>;\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;标题&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;弹窗内容&#39;</span>,\n <span class="hljs-attr">theme</span>: <span class="hljs-string">&#39;round-button&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-comment">// on close</span>\n});\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">alert</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;弹窗内容&#39;</span>,\n <span class="hljs-attr">theme</span>: <span class="hljs-string">&#39;round-button&#39;</span>,\n}).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-comment">// on close</span>\n});\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-guan-bi" tabindex="-1">异步关闭</h3><p>通过 <code>beforeClose</code> 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。</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>\n</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;path/to/@vant/weapp/dist/dialog/dialog&#39;</span>;\n\n<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> {\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-keyword">if</span> (action === <span class="hljs-string">&#39;confirm&#39;</span>) {\n <span class="hljs-title function_">resolve</span>(<span class="hljs-literal">true</span>);\n } <span class="hljs-keyword">else</span> {\n <span class="hljs-comment">// 拦截取消操作</span>\n <span class="hljs-title function_">resolve</span>(<span class="hljs-literal">false</span>);\n }\n }, <span class="hljs-number">1000</span>);\n});\n\n<span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;标题&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;弹窗内容&#39;</span>\n beforeClose\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zu-jian-diao-yong" tabindex="-1">组件调用</h3><p>如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dialog</span>\n <span class="hljs-attr">use-slot</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标题&quot;</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">show-cancel-button</span>\n <span class="hljs-attr">confirm-button-open-type</span>=<span class="hljs-string">&quot;getUserInfo&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n <span class="hljs-attr">bind:getuserinfo</span>=<span class="hljs-string">&quot;getUserInfo&quot;</span>\n&gt;</span>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dialog</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">getUserInfo</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>Dialog</td><td><code>options</code></td><td><code>Promise</code></td><td>展示弹窗</td></tr><tr><td>Dialog.alert</td><td><code>options</code></td><td><code>Promise</code></td><td>展示消息提示弹窗</td></tr><tr><td>Dialog.confirm</td><td><code>options</code></td><td><code>Promise</code></td><td>展示消息确认弹窗</td></tr><tr><td>Dialog.setDefaultOptions</td><td><code>options</code></td><td><code>void</code></td><td>修改默认配置，对所有 Dialog 生效</td></tr><tr><td>Dialog.resetDefaultOptions</td><td>-</td><td><code>void</code></td><td>重置默认配置，对所有 Dialog 生效</td></tr><tr><td>Dialog.close</td><td>-</td><td><code>void</code></td><td>关闭弹窗</td></tr><tr><td>Dialog.stopLoading</td><td>-</td><td><code>void</code></td><td>停止按钮的加载状态</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><p>通过函数调用 Dialog 时，支持传入以下选项：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>标题</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>弹窗宽度，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>320px</code></td></tr><tr><td>message</td><td>文本内容，支持通过<code>\\n</code>换行</td><td><em>string</em></td><td>-</td></tr><tr><td>messageAlign</td><td>内容对齐方式，可选值为<code>left</code> <code>right</code></td><td><em>string</em></td><td><code>center</code></td></tr><tr><td>theme</td><td>样式风格，可选值为<code>round-button</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>zIndex</td><td>z-index 层级</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>className</td><td>自定义类名，dialog 在自定义组件内时无效</td><td><em>string</em></td><td>‘’</td></tr><tr><td>customStyle</td><td>自定义样式</td><td><em>string</em></td><td>‘’</td></tr><tr><td>selector</td><td>自定义选择器</td><td><em>string</em></td><td><code>van-dialog</code></td></tr><tr><td>showConfirmButton</td><td>是否展示确认按钮</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>showCancelButton</td><td>是否展示取消按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>confirmButtonText</td><td>确认按钮的文案</td><td><em>string</em></td><td><code>确认</code></td></tr><tr><td>cancelButtonText</td><td>取消按钮的文案</td><td><em>string</em></td><td><code>取消</code></td></tr><tr><td>overlay</td><td>是否展示遮罩层</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>overlayStyle</td><td>自定义遮罩层样式</td><td><em>object</em></td><td>-</td></tr><tr><td>closeOnClickOverlay</td><td>点击遮罩层时是否关闭弹窗</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>asyncClose</td><td>已废弃，将在 2.0.0 移除，请使用 <code>beforeClose</code> 属性代替</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>beforeClose</td><td>关闭前的回调函数，返回 <code>false</code> 可阻止关闭，支持返回 Promise</td><td><em>(action) =&gt; boolean | Promise&lt;boolean&gt;</em></td><td>-</td></tr><tr><td>context</td><td>选择器的选择范围，可以传入自定义组件的 this 作为上下文</td><td><em>object</em></td><td>当前页面</td></tr><tr><td>transition</td><td>动画名称，可选值为<code>fade</code> <code>none</code></td><td><em>string</em></td><td><code>scale</code></td></tr><tr><td>confirmButtonOpenType</td><td>确认按钮的微信开放能力，具体支持可参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">微信官方文档</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>使用<code>confirmButtonOpenType</code>后，支持以下选项：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th><th>open-type</th></tr></thead><tbody><tr><td>appParameter</td><td>打开 APP 时，向 APP 传递的参数</td><td><em>string</em></td><td>-</td><td><code>launchApp</code></td></tr><tr><td>lang</td><td>指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文</td><td><em>string</em></td><td><code>en</code></td><td><code>getUserInfo</code></td></tr><tr><td>sessionFrom</td><td>会话来源</td><td><em>string</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>businessId</td><td>客服消息子商户 id</td><td><em>number</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>sendMessageTitle</td><td>会话内消息卡片标题</td><td><em>string</em></td><td>当前标题</td><td><code>contact</code></td></tr><tr><td>sendMessagePath</td><td>会话内消息卡片点击跳转小程序路径</td><td><em>string</em></td><td>当前分享路径</td><td><code>contact</code></td></tr><tr><td>sendMessageImg</td><td>sendMessageImg</td><td><em>string</em></td><td>截图</td><td><code>contact</code></td></tr><tr><td>showMessageCard</td><td>显示会话内消息卡片</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>通过组件调用 Dialog 时，支持以下 Props:</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>show</td><td>是否显示弹窗</td><td><em>boolean</em></td><td>-</td></tr><tr><td>title</td><td>标题</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>弹窗宽度，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>320px</code></td></tr><tr><td>message</td><td>文本内容，支持通过<code>\\n</code>换行</td><td><em>string</em></td><td>-</td></tr><tr><td>theme</td><td>样式风格，可选值为<code>round-button</code></td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>message-align</td><td>内容对齐方式，可选值为<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 层级</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>class-name</td><td>自定义类名，dialog 在自定义组件内时无效</td><td><em>string</em></td><td>‘’</td></tr><tr><td>custom-style</td><td>自定义样式</td><td><em>string</em></td><td>‘’</td></tr><tr><td>show-confirm-button</td><td>是否展示确认按钮</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-cancel-button</td><td>是否展示取消按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>confirm-button-text</td><td>确认按钮的文案</td><td><em>string</em></td><td><code>确认</code></td></tr><tr><td>cancel-button-text</td><td>取消按钮的文案</td><td><em>string</em></td><td><code>取消</code></td></tr><tr><td>confirm-button-color</td><td>确认按钮的字体颜色</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>cancel-button-color</td><td>取消按钮的字体颜色</td><td><em>string</em></td><td><code>#333</code></td></tr><tr><td>overlay</td><td>是否展示遮罩层</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>overlay-style <code>v1.0.0</code></td><td>自定义遮罩层样式</td><td><em>object</em></td><td>-</td></tr><tr><td>close-on-click-overlay</td><td>点击遮罩层时是否关闭弹窗</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>是否使用自定义内容的插槽</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-title-slot</td><td>是否使用自定义标题的插槽</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>async-close</td><td>已废弃，将在 2.0.0 移除，请使用 <code>beforeClose</code> 属性代替</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>before-close</td><td>关闭前的回调函数，返回 <code>false</code> 可阻止关闭，支持返回 Promise</td><td><em>(action) =&gt; boolean | Promise&lt;boolean&gt;</em></td><td>-</td></tr><tr><td>transition</td><td>动画名称，可选值为<code>fade</code></td><td><em>string</em></td><td><code>scale</code></td></tr><tr><td>confirm-button-open-type</td><td>确认按钮的微信开放能力，具体支持可参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">微信官方文档</a></td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="opentype-props" tabindex="-1">OpenType Props</h3><p>使用<code>confirm-button-open-type</code>后，支持以下 Props：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th><th>open-type</th></tr></thead><tbody><tr><td>app-parameter</td><td>打开 APP 时，向 APP 传递的参数</td><td><em>string</em></td><td>-</td><td><code>launchApp</code></td></tr><tr><td>lang</td><td>指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文</td><td><em>string</em></td><td><code>en</code></td><td><code>getUserInfo</code></td></tr><tr><td>session-from</td><td>会话来源</td><td><em>string</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>business-id</td><td>客服消息子商户 id</td><td><em>number</em></td><td>-</td><td><code>contact</code></td></tr><tr><td>send-message-title</td><td>会话内消息卡片标题</td><td><em>string</em></td><td>当前标题</td><td><code>contact</code></td></tr><tr><td>send-message-path</td><td>会话内消息卡片点击跳转小程序路径</td><td><em>string</em></td><td>当前分享路径</td><td><code>contact</code></td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>截图</td><td><code>contact</code></td></tr><tr><td>show-message-card</td><td>显示会话内消息卡片</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>事件</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:close</td><td>弹窗关闭时触发</td><td>event.detail: 触发关闭事件的来源，<br>枚举为<code>confirm</code>,<code>cancel</code>,<code>overlay</code></td></tr><tr><td>bind:confirm</td><td>点击确认按钮时触发</td><td>-</td></tr><tr><td>bind:cancel</td><td>点击取消按钮时触发</td><td>-</td></tr><tr><td>bind:getuserinfo</td><td>点击确认按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo</td><td>-</td></tr><tr><td>bind:contact</td><td>客服消息回调</td><td>-</td></tr><tr><td>bind:getphonenumber</td><td>获取用户手机号回调</td><td>-</td></tr><tr><td>bind:error</td><td>当使用开放能力时，发生错误的回调</td><td>-</td></tr><tr><td>bind:opensetting</td><td>在打开授权设置页后回调</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>title</td><td>自定义<code>title</code>显示内容，如果设置了<code>title</code>属性则不生效</td></tr></tbody></table></div>',17)],qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vs,bs)))},ys={class:"van-doc-markdown-body"},fs=[t('<h1>Divider 分割线</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于将内容分隔为多个区域。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，默认为<code>ES6</code>版本，<code>ES5</code>引入方式参见<a href="#/quickstart">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a>。</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-yong-hairline" tabindex="-1">使用 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>\n</code></pre></div><div class="van-doc-card"><h3 id="xu-xian" tabindex="-1">虚线</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>\n</code></pre></div><div class="van-doc-card"><h3 id="wen-ben-wei-zhi" tabindex="-1">文本位置</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>文本<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<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>文本<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<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>文本<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shu-xing" tabindex="-1">自定义属性</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>文本颜色<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<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>\n border 颜色\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n<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>字体大小<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">自定义样式</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-divider</span>\n <span class="hljs-attr">contentPosition</span>=<span class="hljs-string">&quot;center&quot;</span>\n <span class="hljs-attr">customStyle</span>=<span class="hljs-string">&quot;color: #1989fa; border-color: #1989fa; font-size: 18px;&quot;</span>\n&gt;</span>\n 文本\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-divider</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>dashed</td><td>虚线</td><td><em>boolean</em></td><td>false</td></tr><tr><td>hairline</td><td>细线</td><td><em>boolean</em></td><td>false</td></tr><tr><td>content-position</td><td>文本位置，<code>left</code> <code>center</code> <code>right</code></td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>自定义样式</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>默认</td><td>自定义文本内容</td></tr></tbody></table></div>',13)],xs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ys,fs)))},ws={class:"van-doc-markdown-body"},zs=[t('<h1>DropdownMenu 下拉菜单</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>向下弹出的菜单列表。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，默认为<code>ES6</code>版本，<code>ES5</code>引入方式参见<a href="#/quickstart">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">option1</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;全部商品&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;新款商品&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;活动商品&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">2</span> },\n ],\n <span class="hljs-attr">option2</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;默认排序&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;a&#39;</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;好评排序&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;b&#39;</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;销量排序&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;c&#39;</span> },\n ],\n <span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">value2</span>: <span class="hljs-string">&#39;a&#39;</span>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-cai-dan-nei-rong" tabindex="-1">自定义菜单内容</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n <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>\n <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>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 26px&quot;</span>\n <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ switch1 }}&quot;</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onSwitch1Change&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right-icon&quot;</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;24px&quot;</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 26px&quot;</span>\n <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ switch2 }}&quot;</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onSwitch2Change&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n <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>\n <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>\n 确认\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">switchTitle1</span>: <span class="hljs-string">&#39;包邮&#39;</span>,\n <span class="hljs-attr">switchTitle2</span>: <span class="hljs-string">&#39;团购&#39;</span>,\n <span class="hljs-attr">itemTitle</span>: <span class="hljs-string">&#39;筛选&#39;</span>,\n <span class="hljs-attr">option1</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;全部商品&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">0</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;新款商品&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">1</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;活动商品&#39;</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">2</span> },\n ],\n <span class="hljs-attr">value1</span>: <span class="hljs-number">0</span>,\n },\n\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params"></span>) {\n <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>();\n },\n\n <span class="hljs-title function_">onSwitch1Change</span>(<span class="hljs-params">{ detail }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">switch1</span>: detail });\n },\n\n <span class="hljs-title function_">onSwitch2Change</span>(<span class="hljs-params">{ detail }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">switch2</span>: detail });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xuan-zhong-zhuang-tai-yan-se" tabindex="-1">自定义选中状态颜色</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>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="xiang-shang-zhan-kai" tabindex="-1">向上展开</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>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-cai-dan" tabindex="-1">禁用菜单</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n <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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-dropdown-menu</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>active-color</td><td>菜单标题和选项的选中态颜色</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>z-index</td><td>菜单栏 z-index 层级</td><td><em>number</em></td><td><code>10</code></td></tr><tr><td>duration</td><td>动画时长，单位毫秒</td><td><em>number</em></td><td><code>200</code></td></tr><tr><td>direction</td><td>菜单展开方向，可选值为 up</td><td><em>string</em></td><td><code>down</code></td></tr><tr><td>overlay</td><td>是否显示遮罩层</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>是否在点击遮罩层后关闭菜单</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-outside</td><td>是否在点击外部 menu 后关闭菜单</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>当前选中项对应的 value</td><td><em>number | string</em></td><td>-</td></tr><tr><td>title</td><td>菜单项标题</td><td><em>string</em></td><td>当前选中项文字</td></tr><tr><td>options</td><td>选项数组</td><td><em>Option[]</em></td><td><code>[]</code></td></tr><tr><td>disabled</td><td>是否禁用菜单</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-class</td><td>标题额外类名</td><td><em>string</em></td><td>-</td></tr><tr><td>popup-style</td><td>自定义弹出层样式</td><td><em>string</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-events" tabindex="-1">DropdownItem Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>点击选项导致 value 变化时触发</td><td>value</td></tr><tr><td>open</td><td>打开菜单栏时触发</td><td>-</td></tr><tr><td>close</td><td>关闭菜单栏时触发</td><td>-</td></tr><tr><td>opened</td><td>打开菜单栏且动画结束后触发</td><td>-</td></tr><tr><td>closed</td><td>关闭菜单栏且动画结束后触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dropdownitem-fang-fa" tabindex="-1">DropdownItem 方法</h3><p>通过 selectComponent(id) 可访问。</p><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th><th>返回值</th></tr></thead><tbody><tr><td>toggle</td><td>切换菜单展示状态，传<code>true</code>为显示，<code>false</code>为隐藏，不传参为取反</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 数据结构</h3><table><thead><tr><th>键名</th><th>说明</th><th>类型</th></tr></thead><tbody><tr><td>text</td><td>文字</td><td><em>string</em></td></tr><tr><td>value</td><td>标识符</td><td><em>number | string</em></td></tr><tr><td>icon</td><td>左侧<a href="#/icon">图标名称</a>或图片链接</td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',16)],ks={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ws,zs)))},_s={class:"van-doc-markdown-body"},Cs=[t('<h1>Empty 空状态</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>空状态时的占位提示。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，默认为<code>ES6</code>版本，<code>ES5</code>引入方式参见<a href="#/quickstart">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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;描述文字&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-lei-xing" tabindex="-1">图片类型</h3><p>Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- 通用错误 --&gt;</span>\n<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;描述文字&quot;</span> /&gt;</span>\n<span class="hljs-comment">&lt;!-- 网络错误 --&gt;</span>\n<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;描述文字&quot;</span> /&gt;</span>\n<span class="hljs-comment">&lt;!-- 搜索提示 --&gt;</span>\n<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;描述文字&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-pian" tabindex="-1">自定义图片</h3><p>需要自定义图片时，可以在 image 属性中传入任意图片 URL。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-empty</span>\n <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;custom-image&quot;</span>\n <span class="hljs-attr">image</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/custom-empty-image.png&quot;</span>\n <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;描述文字&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="di-bu-nei-rong" tabindex="-1">底部内容</h3><p>通过默认插槽可以在 Empty 组件的下方插入内容。</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;描述文字&quot;</span>&gt;</span>\n <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>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-empty</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css">\n <span class="hljs-selector-class">.bottom-button</span> {\n <span class="hljs-attribute">width</span>: <span class="hljs-number">160px</span>;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;\n }\n</span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>image</td><td>图片类型，可选值为 <code>error</code> <code>network</code> <code>search</code>，支持传入图片 URL</td><td><em>string</em></td><td><code>default</code></td></tr><tr><td>description</td><td>图片下方的描述文字</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义底部内容</td></tr><tr><td>image</td><td>自定义图标</td></tr><tr><td>description</td><td>自定义描述文字</td></tr></tbody></table></div>',11)],Ps={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_s,Cs)))},Ss={class:"van-doc-markdown-body"},Is=[t('<h1>Field 输入框</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用户可以在文本框内输入或编辑文字。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;&#39;</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-comment">// event.detail 为当前输入的值</span>\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shuang-xiang-bang-ding" tabindex="-1">双向绑定</h3><p>最低基础库版本在 2.9.3 以上时，可以使用<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html">简易双向绑定</a>。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">model:value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;&#39;</span>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-lei-xing" tabindex="-1">自定义类型</h3><p>根据<code>type</code>属性定义不同类型的输入框。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username }}&quot;</span>\n <span class="hljs-attr">required</span>\n <span class="hljs-attr">clearable</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;用户名&quot;</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;question-o&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span>\n <span class="hljs-attr">bind:click-icon</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span>\n /&gt;</span>\n\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ password }}&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;密码&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入密码&quot;</span>\n <span class="hljs-attr">required</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-shu-ru-kuang" tabindex="-1">禁用输入框</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;输入框已禁用&quot;</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;用户名&quot;</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;contact&quot;</span>\n <span class="hljs-attr">disabled</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="cuo-wu-ti-shi" tabindex="-1">错误提示</h3><p>通过<code>error</code>或者<code>error-message</code>属性增加对应的错误提示。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username }}&quot;</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;用户名&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span>\n <span class="hljs-attr">error</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ phone }}&quot;</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;手机号&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入手机号&quot;</span>\n <span class="hljs-attr">error-message</span>=<span class="hljs-string">&quot;手机号格式错误&quot;</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="nei-rong-dui-qi-fang-shi" tabindex="-1">内容对齐方式</h3><p>可以通过<code>input-align</code>属性设置内容的对齐方式。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ username3 }}&quot;</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;用户名&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span>\n <span class="hljs-attr">input-align</span>=<span class="hljs-string">&quot;right&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-du-zi-gua-ying" tabindex="-1">高度自适应</h3><p>对于 textarea，可以通过<code>autosize</code>属性设置高度自适应。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ message }}&quot;</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;留言&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;textarea&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入留言&quot;</span>\n <span class="hljs-attr">autosize</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="cha-ru-an-niu" tabindex="-1">插入按钮</h3><p>通过 button slot 可以在输入框尾部插入按钮。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-field</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ sms }}&quot;</span>\n <span class="hljs-attr">center</span>\n <span class="hljs-attr">clearable</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;短信验证码&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入短信验证码&quot;</span>\n <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">use-button-slot</span>\n &gt;</span>\n <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>\n 发送验证码\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-field</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n</code></pre></div><h2 id="chang-jian-wen-ti" tabindex="-1">常见问题</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">真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？</h3><p>由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。</p><p>相关的讨论可以查看<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">微信开放社区</a>。</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">真机上 placeholder 为什么会盖过 popup 等其它组件？</h3><p>由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html">原生组件说明</a>。</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 的 placeholder 在真机上为什么会偏移？</h3><p>微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 <code>padding</code>，且无法置 0。</p><p>同时 <code>placeholder-style</code> 对 <code>vertical-align</code>、<code>line-height</code> 等大量 css 属性都不生效。</p><p>这一系列的问题导致了 placeholder 在真机上可能会出现偏移。</p><p>微信已经在 <code>2.10.0</code> 基础库版本后支持移除默认的 <code>padding</code>，但低版本仍有问题。详情可以查看 <a href="https://developers.weixin.qq.com/community/develop/issue/96">微信开放社区</a>。</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">手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？</h3><p>这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 <code>blur</code> 事件中取到输入的值。</p><p>相关的讨论可以查看<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">微信开放社区</a>。</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>在表单内提交时的标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>label</td><td>输入框左侧文本</td><td><em>string</em></td><td>-</td></tr><tr><td>size</td><td>单元格大小，可选值为 <code>large</code></td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>当前输入的值</td><td><em>string | number</em></td><td>-</td></tr><tr><td>type</td><td>可设置为任意原生类型, 如 <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>如果 type 为 <code>textarea</code> 且在一个 <code>position:fixed</code> 的区域，需要显示指定属性 fixed 为 true</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>focus</td><td>获取焦点</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>是否显示内边框</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>disabled</td><td>是否禁用输入框</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>是否只读</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clearable</td><td>是否启用清除控件</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clickable</td><td>是否开启点击反馈</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>required</td><td>是否显示表单必填星号</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>center</td><td>是否使内容垂直居中</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>password</td><td>是否是密码类型</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-width</td><td>标题宽度</td><td><em>string</em></td><td><code>6.2em</code></td></tr><tr><td>maxlength</td><td>最大输入长度，设置为 -1 的时候不限制最大长度</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>placeholder</td><td>输入框为空时占位符</td><td><em>string</em></td><td>-</td></tr><tr><td>placeholder-style</td><td>指定 placeholder 的样式</td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>自定义样式</td><td><em>string</em></td><td>-</td></tr><tr><td>is-link</td><td>是否展示右侧箭头并开启点击反馈</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>arrow-direction</td><td>箭头方向，可选值为 <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>是否显示字数统计，需要设置<code>maxlength</code>属性</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error</td><td>是否将输入内容标红</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error-message</td><td>底部错误提示文案，为空时不展示</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>error-message-align</td><td>底部错误提示文案对齐方式，可选值为 <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>输入框内容对齐方式，可选值为 <code>center</code> <code>right</code></td><td><em>string</em></td><td><code>left</code></td></tr><tr><td>autosize</td><td>是否自适应内容高度，只对 textarea 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为<code>px</code></td><td><em>boolean | object</em></td><td><code>false</code></td></tr><tr><td>left-icon</td><td>左侧图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>right-icon</td><td>右侧图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>confirm-type</td><td>设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效</td><td><em>string</em></td><td><code>done</code></td></tr><tr><td>confirm-hold</td><td>点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>hold-keyboard</td><td>focus 时，点击页面的时候不收起键盘</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>cursor-spacing</td><td>输入框聚焦时底部与键盘的距离</td><td><em>number</em></td><td><code>50</code></td></tr><tr><td>adjust-position</td><td>键盘弹起时，是否自动上推页面</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-confirm-bar</td><td>是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>selection-start</td><td>光标起始位置，自动聚集时有效，需与 selection-end 搭配使用</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>selection-end</td><td>光标结束位置，自动聚集时有效，需与 selection-start 搭配使用</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>auto-focus</td><td>自动聚焦，拉起键盘</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disable-default-padding</td><td>是否去掉 iOS 下的默认内边距，只对 textarea 有效</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>cursor</td><td>指定 focus 时的光标位置</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>clear-trigger <code>v1.8.4</code></td><td>显示清除图标的时机，<code>always</code> 表示输入框不为空时展示，<br><code>focus</code> 表示输入框聚焦且不为空时展示</td><td><em>string</em></td><td><code>focus</code></td></tr><tr><td>always-embed <code>v1.9.2</code></td><td>强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)</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>事件</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:input</td><td>输入内容时触发</td><td>event.detail: 当前输入值</td></tr><tr><td>bind:change</td><td>输入内容时触发</td><td>event.detail: 当前输入值</td></tr><tr><td>bind:confirm</td><td>点击完成按钮时触发</td><td>event.detail: 当前输入值</td></tr><tr><td>bind:click-icon</td><td>点击尾部图标时触发</td><td>-</td></tr><tr><td>bind:focus</td><td>输入框聚焦时触发</td><td>event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度</td></tr><tr><td>bind:blur</td><td>输入框失焦时触发</td><td>event.detail.value: 当前输入值; <br>event.detail.cursor: 游标位置(如果 <code>type</code> 不为 <code>textarea</code>，值为 <code>0</code>)</td></tr><tr><td>bind:clear</td><td>点击清空控件时触发</td><td>-</td></tr><tr><td>bind:click-input</td><td>点击输入区域时触发</td><td>-</td></tr><tr><td>bind:linechange</td><td>输入框行数变化时调用，只对 textarea 有效</td><td>event.detail = { height: 0, heightRpx: 0, lineCount: 0 }</td></tr><tr><td>bind:keyboardheightchange</td><td>键盘高度发生变化的时候触发此事件</td><td>event.detail = { height: height, duration: duration }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>label</td><td>自定义输入框标签，如果设置了<code>label</code>属性则不生效</td></tr><tr><td>left-icon</td><td>自定义输入框头部图标</td></tr><tr><td>right-icon</td><td>自定义输入框尾部图标</td></tr><tr><td>button</td><td>自定义输入框尾部按钮</td></tr><tr><td>input</td><td>自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>label-class</td><td>左侧文本样式类</td></tr><tr><td>input-class</td><td>输入框样式类</td></tr><tr><td>right-icon-class</td><td>右侧图标样式类</td></tr></tbody></table></div>',22)],Ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ss,Is)))},Ts={class:"van-doc-markdown-body"},As=[t('<h1>GoodsAction 商品导航</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于为商品相关操作提供便捷交互。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a>。</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n <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;客服&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span> /&gt;</span>\n <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;购物车&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickIcon&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action-button</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;加入购物车&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span>\n <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickButton&quot;</span>\n /&gt;</span>\n <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;立即购买&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClickButton&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClickIcon</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;点击图标&#39;</span>);\n },\n\n <span class="hljs-title function_">onClickButton</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;点击按钮&#39;</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">提示信息</h3><p>设置<code>dot</code>属性后，会在图标右上角展示一个小红点。设置<code>info</code>属性后，会在图标右上角展示相应的徽标。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n <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;客服&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n <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;购物车&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n <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;店铺&quot;</span> /&gt;</span>\n <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;加入购物车&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>\n <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;立即购买&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu-yan-se" tabindex="-1">自定义按钮颜色</h3><p>通过<code>color</code>属性可以自定义按钮的颜色，支持传入<code>linear-gradient</code>渐变色。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n <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;客服&quot;</span> /&gt;</span>\n <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;购物车&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n <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;店铺&quot;</span> /&gt;</span>\n <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;加入购物车&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>\n <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;立即购买&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="po-su-an-niu" tabindex="-1">朴素按钮</h3><p>通过<code>plain</code>属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-goods-action</span>&gt;</span>\n <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;客服&quot;</span> /&gt;</span>\n <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;购物车&quot;</span> <span class="hljs-attr">info</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n <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;店铺&quot;</span> /&gt;</span>\n <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;加入购物&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> /&gt;</span>\n <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;立即购买&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-goods-action</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>safe-area-inset-bottom</td><td>是否为 iPhoneX 留出底部安全距离</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>text</td><td>按钮文字</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>图标类型，可选值见<code>icon</code>组件</td><td><em>string</em></td><td>-</td></tr><tr><td>info</td><td>图标右上角提示信息</td><td><em>string | number</em></td><td>-</td></tr><tr><td>url</td><td>点击后跳转的链接地址</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>链接跳转类型，可选值为 <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>标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>是否禁用按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>是否显示为加载状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>微信开放能力，具体支持可参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">微信官方文档</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>打开 APP 时，向 APP 传递的参数</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>会话来源</td><td><em>string</em></td><td>-</td></tr><tr><td>send-message-title</td><td>会话内消息卡片标题</td><td><em>string</em></td><td>当前标题</td></tr><tr><td>send-message-path</td><td>会话内消息卡片点击跳转小程序路径</td><td><em>string</em></td><td>当前分享路径</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>截图</td></tr><tr><td>show-message-card</td><td>显示会话内消息卡片</td><td><em>string</em></td><td><code>false</code></td></tr><tr><td>class-prefix <code>v1.10.1</code></td><td>类名前缀</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>text</td><td>按钮文字</td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>按钮颜色，支持传入 <code>linear-gradient</code> 渐变色</td><td><em>string</em></td><td>-</td></tr><tr><td>url</td><td>点击后跳转的链接地址</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>链接跳转类型，可选值为 <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>标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>type</td><td>按钮类型，可选值为 <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>是否为朴素按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>size</td><td>按钮尺寸，可选值为 <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>是否禁用按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>是否显示为加载状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>微信开放能力，具体支持可参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/button.html">微信官方文档</a></td><td><em>string</em></td><td>-</td></tr><tr><td>app-parameter</td><td>打开 APP 时，向 APP 传递的参数</td><td><em>string</em></td><td>-</td></tr><tr><td>lang</td><td>指定返回用户信息的语言，zh_CN 简体中文，<br>zh_TW 繁体中文，en 英文</td><td><em>string</em></td><td><code>en</code></td></tr><tr><td>session-from</td><td>会话来源</td><td><em>string</em></td><td>-</td></tr><tr><td>send-message-title</td><td>会话内消息卡片标题</td><td><em>string</em></td><td>当前标题</td></tr><tr><td>send-message-path</td><td>会话内消息卡片点击跳转小程序路径</td><td><em>string</em></td><td>当前分享路径</td></tr><tr><td>send-message-img</td><td>sendMessageImg</td><td><em>string</em></td><td>截图</td></tr><tr><td>show-message-card</td><td>显示会话内消息卡片</td><td><em>string</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>click</td><td>按钮点击事件回调</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>icon</td><td>自定义图标</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-slot" tabindex="-1">GoodsActionButton Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>按钮显示内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionicon-wai-bu-yang-shi-lei" tabindex="-1">GoodsActionIcon 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>icon-class</td><td>图标样式类</td></tr><tr><td>text-class</td><td>文字样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="goodsactionbutton-wai-bu-yang-shi-lei" tabindex="-1">GoodsActionButton 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',17)],Bs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ts,As)))},Fs={class:"van-doc-markdown-body"},Ns=[t('<h1>Grid 宫格</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">基本用法</h3><p>通过<code>icon</code>属性设置格子内的图标，<code>text</code>属性设置文字内容。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-grid</span>&gt;</span>\n <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;文字&quot;</span> /&gt;</span>\n <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;文字&quot;</span> /&gt;</span>\n <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;文字&quot;</span> /&gt;</span>\n <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;文字&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-lie-shu" tabindex="-1">自定义列数</h3><p>默认一行展示四个格子，可以通过<code>column-num</code>自定义列数。</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>\n <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;文字&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 6 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-nei-rong" tabindex="-1">自定义内容</h3><p>通过插槽可以自定义格子展示的内容。</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>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">image</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100%; height: 90px;&quot;</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-grid-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zheng-fang-xing-ge-zi" tabindex="-1">正方形格子</h3><p>设置<code>square</code>属性后，格子的高度会和宽度保持一致。</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>\n <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;文字&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 8 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="ge-zi-jian-ju" tabindex="-1">格子间距</h3><p>通过<code>gutter</code>属性设置格子之间的距离。</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>\n <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;文字&quot;</span> <span class="hljs-attr">wx:for</span>=<span class="hljs-string">&quot;{{ 8 }}&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="nei-rong-heng-pai" tabindex="-1">内容横排</h3><p>将<code>direction</code>属性设置为<code>horizontal</code>，可以让宫格的内容呈横向排列。</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>\n <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;文字&quot;</span> /&gt;</span>\n <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;文字&quot;</span> /&gt;</span>\n <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;文字&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="ye-mian-tiao-zhuan" tabindex="-1">页面跳转</h3><p>可以通过<code>url</code>属性进行页面跳转，通过<code>link-type</code>属性控制跳转类型。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;home-o&quot;</span>\n <span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;navigateTo&quot;</span>\n <span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;Navigate 跳转&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-grid-item</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;search&quot;</span>\n <span class="hljs-attr">link-type</span>=<span class="hljs-string">&quot;reLaunch&quot;</span>\n <span class="hljs-attr">url</span>=<span class="hljs-string">&quot;/pages/dashboard/index&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;ReLaunch 跳转&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">提示信息</h3><p>设置<code>dot</code>属性后，会在图标右上角展示一个小红点。设置<code>badge</code>属性后，会在图标右上角展示相应的徽标。</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>\n <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;文字&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n <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;文字&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-grid</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>column-num</td><td>列数</td><td><em>number</em></td><td><code>4</code></td></tr><tr><td>icon-size <code>v1.3.2</code></td><td>图标大小，默认单位为<code>px</code></td><td><em>string</em></td><td><code>28px</code></td></tr><tr><td>gutter</td><td>格子之间的间距，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>border</td><td>是否显示边框</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>center</td><td>是否将格子内容居中显示</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>square</td><td>是否将格子固定为正方形</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clickable</td><td>是否开启格子点击反馈</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>direction</td><td>格子内容排列的方向，可选值为 <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>是否调换图标和文本的位置</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-slot</td><td>是否使用自定义内容的插槽</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 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-props" tabindex="-1">GridItem Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>text</td><td>文字</td><td><em>string</em></td><td>-</td></tr><tr><td>icon</td><td>图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>icon-color</td><td>图标颜色</td><td><em>string</em></td><td>-</td></tr><tr><td>icon-prefix <code>v1.7.0</code></td><td>第三方图标前缀</td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>dot</td><td>是否显示图标右上角小红点</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>badge</td><td>图标右上角徽标的内容</td><td><em>string | number</em></td><td>-</td></tr><tr><td>url</td><td>点击后跳转的链接地址</td><td><em>string</em></td><td>-</td></tr><tr><td>link-type</td><td>链接跳转类型，可选值为 <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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:click</td><td>点击格子时触发</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义宫格的所有内容，需要设置<code>use-slot</code>属性</td></tr><tr><td>icon</td><td>自定义图标，如果设置了<code>use-slot</code>或者<code>icon</code>属性则不生效</td></tr><tr><td>text</td><td>自定义文字，如果设置了<code>use-slot</code>或者<code>text</code>属性则不生效</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="griditem-wai-bu-yang-shi-lei" tabindex="-1">GridItem 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>content-class</td><td>内容样式类</td></tr><tr><td>icon-class</td><td>图标样式类</td></tr><tr><td>text-class</td><td>文本样式类</td></tr></tbody></table></div>',19)],Es={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fs,Ns)))},Ls={class:"van-doc-markdown-body"},Us=[t('<h1>Icon 图标</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p><code>Icon</code>的<code>name</code>属性支持传入图标名称或图片链接。</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>\n<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>\n</code></pre></div><div class="van-doc-card"><h3 id="ti-shi-xin-xi" tabindex="-1">提示信息</h3><p>设置<code>dot</code>属性后，会在图标右上角展示一个小红点。设置<code>info</code>属性后，会在图标右上角展示相应的徽标。</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>\n<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>\n<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>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-yan-se" tabindex="-1">图标颜色</h3><p>设置<code>color</code>属性来控制图标颜色。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-biao-da-xiao" tabindex="-1">图标大小</h3><p>设置<code>size</code>属性来控制图标大小。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">自定义图标</h3><p>如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 <code>app.wxss</code> 文件中引入。</p><pre><code class="language-css"><span class="hljs-comment">/* 引入第三方或自定义的字体图标样式 */</span>\n<span class="hljs-keyword">@font-face</span> {\n <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#39;my-icon&#39;</span>;\n <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>);\n}\n\n<span class="hljs-selector-class">.my-icon</span> {\n <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&#39;my-icon&#39;</span>;\n}\n\n<span class="hljs-selector-class">.my-icon-extra</span><span class="hljs-selector-pseudo">::before</span> {\n <span class="hljs-attribute">content</span>: <span class="hljs-string">&#39;\\e626&#39;</span>;\n}\n</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- 通过 class-prefix 指定类名为 my-icon --&gt;</span>\n<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>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>图标名称或图片链接</td><td><em>string</em></td><td>-</td></tr><tr><td>dot</td><td>是否显示图标右上角小红点</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>info</td><td>图标右上角文字提示</td><td><em>string | number</em></td><td>-</td></tr><tr><td>color</td><td>图标颜色</td><td><em>string</em></td><td><code>inherit</code></td></tr><tr><td>size</td><td>图标大小，如 <code>20px</code>，<code>2em</code>，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>inherit</code></td></tr><tr><td>custom-style</td><td>自定义样式</td><td><em>string</em></td><td>-</td></tr><tr><td>class-prefix</td><td>类名前缀</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:click</td><td>点击图标时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">常见问题</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">开发者工具上提示 Failed to load font 是什么情况？</h3><p>这个是开发者工具本身的问题，可以忽略，具体可以查看<a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html">微信小程序文档</a> - 注意事项第 5 条。</p></div>',15)],Rs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ls,Us)))},Vs={class:"van-doc-markdown-body"},Gs=[t('<h1>Image 图片</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a>。</p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>基础用法与原生 <a href="(https://developers.weixin.qq.com/miniprogram/dev/component/image.html)">image</a> 标签一致，可以设置<code>src</code>、<code>width</code>、<code>height</code>等原生属性。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="tian-chong-mo-shi" tabindex="-1">填充模式</h3><p>通过<code>fit</code>属性可以设置图片填充模式，可选值见下方表格。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span>\n <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;10rem&quot;</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;10rem&quot;</span>\n <span class="hljs-attr">fit</span>=<span class="hljs-string">&quot;contain&quot;</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-xing-tu-pian" tabindex="-1">圆形图片</h3><p>通过<code>round</code>属性可以设置图片变圆，注意当图片宽高不相等且<code>fit</code>为<code>contain</code>或<code>scale-down</code>时，将无法填充一个完整的圆形。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span>\n <span class="hljs-attr">round</span>\n <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;10rem&quot;</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;10rem&quot;</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-lan-jia-zai" tabindex="-1">图片懒加载</h3><p>图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-image</span>\n <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;100&quot;</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;100&quot;</span>\n <span class="hljs-attr">lazy-load</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://img.yzcdn.cn/vant/cat.jpeg&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhong-ti-shi" tabindex="-1">加载中提示</h3><p><code>Image</code>组件提供了默认的加载中提示，支持通过<code>loading</code>插槽自定义内容。</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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-image</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-shi-bai-ti-shi" tabindex="-1">加载失败提示</h3><p><code>Image</code>组件提供了默认的加载失败提示，支持通过<code>error</code>插槽自定义内容。</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>\n <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>加载失败<span class="hljs-tag">&lt;/<span class="hljs-name">text</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-image</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>src</td><td>图片链接</td><td><em>string</em></td><td>-</td></tr><tr><td>fit</td><td>图片填充模式</td><td><em>string</em></td><td><em>fill</em></td></tr><tr><td>alt</td><td>替代文本</td><td><em>string</em></td><td>-</td></tr><tr><td>width</td><td>宽度，默认单位为<code>px</code></td><td><em>string | number</em></td><td>-</td></tr><tr><td>height</td><td>高度，默认单位为<code>px</code></td><td><em>string | number</em></td><td>-</td></tr><tr><td>radius</td><td>圆角大小，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>round</td><td>是否显示为圆形</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lazy-load</td><td>是否懒加载</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-error</td><td>是否展示图片加载失败提示</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-loading</td><td>是否展示图片加载中提示</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>use-error-slot</td><td>是否使用 error 插槽</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-loading-slot</td><td>是否使用 loading 插槽</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-menu-by-longpress</td><td>是否开启长按图片显示识别小程序码菜单</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">图片填充模式 \b</h3><table><thead><tr><th>名称</th><th>含义</th></tr></thead><tbody><tr><td>contain</td><td>保持宽高缩放图片，使图片的长边能完全显示出来</td></tr><tr><td>cover</td><td>保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边</td></tr><tr><td>fill</td><td>拉伸图片，使图片填满元素</td></tr><tr><td>widthFix</td><td>缩放模式，宽度不变，高度自动变化，保持原图宽高比不变</td></tr><tr><td>heightFix</td><td>缩放模式，高度不变，宽度自动变化，保持原图宽高比不变</td></tr><tr><td>none</td><td>保持图片原有尺寸</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>点击图片时触发</td><td>event: Event</td></tr><tr><td>load</td><td>图片加载完毕时触发</td><td>event: Event</td></tr><tr><td>error</td><td>图片加载失败时触发</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>loading</td><td>自定义加载中的提示内容</td></tr><tr><td>error</td><td>自定义加载失败时的提示内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>image-class</td><td>图片样式类</td></tr><tr><td>loading-class</td><td>loading 样式类</td></tr><tr><td>error-class</td><td>error 样式类</td></tr></tbody></table></div>',16)],Os={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Vs,Gs)))},Ms={class:"van-doc-markdown-body"},Ws=[t('<h1>IndexBar 索引栏</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于列表的索引分类显示和快速定位。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>点击索引栏时，会自动跳转到对应的<code>IndexAnchor</code>锚点位置。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-index-bar</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n ...\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-bar</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-suo-yin-lie-biao" tabindex="-1">自定义索引列表</h3><p>可以通过<code>index-list</code>属性自定义展示的索引字符列表。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n <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>标题1<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-anchor</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n <span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span>\n <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>标题2<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-anchor</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;文本&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n\n ...\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-index-bar</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <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>],\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th><th>版本</th></tr></thead><tbody><tr><td>index-list</td><td>索引字符列表</td><td><em>string[] | number[]</em></td><td><code>A-Z</code></td><td>-</td></tr><tr><td>z-index</td><td>z-index 层级</td><td><em>number</em></td><td><code>1</code></td><td>-</td></tr><tr><td>sticky</td><td>是否开启锚点自动吸顶</td><td><em>boolean</em></td><td><code>true</code></td><td>-</td></tr><tr><td>sticky-offset-top</td><td>锚点自动吸顶时与顶部的距离</td><td><em>number</em></td><td><code>0</code></td><td>-</td></tr><tr><td>highlight-color</td><td>索引字符高亮颜色</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>参数</th><th>说明</th><th>类型</th><th>默认值</th><th>版本</th></tr></thead><tbody><tr><td>use-slot</td><td>是否使用自定义内容的插槽</td><td><em>boolean</em></td><td><code>false</code></td><td>-</td></tr><tr><td>index</td><td>索引字符</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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>select</td><td>选中字符时触发</td><td>index: 索引字符</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="indexanchor-slots" tabindex="-1">IndexAnchor Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>锚点位置显示内容，默认为索引字符</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">常见问题</h2><div class="van-doc-card"><h3 id="qian-tao-zai-gun-dong-yuan-su-zhong-indexanchor-shi-xiao" tabindex="-1">嵌套在滚动元素中 IndexAnchor 失效？</h3><p>由于 <code>&lt;IndexBar /&gt;</code> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：<code>view</code> 使用 <code>overflow: scroll;</code> 或者 <code>scroll-view</code>，具体可查看<a href="https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html">微信小程序文档</a>。历史 issue: <a href="https://github.com/youzan/vant-weapp/issues/4252">#4252</a></p></div>',13)],$s={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ms,Ws)))},Hs={class:"van-doc-markdown-body"},Ks=[t('<h1>Loading 加载</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>加载图标，用于表示加载中的过渡状态。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="jia-zai-lei-xing" tabindex="-1">加载类型</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</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>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-wen-an" tabindex="-1">加载文案</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>加载中...<span class="hljs-tag">&lt;/<span class="hljs-name">van-loading</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-pai-lie" tabindex="-1">垂直排列</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>加载中...<span class="hljs-tag">&lt;/<span class="hljs-name">van-loading</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>color</td><td>颜色</td><td><em>string</em></td><td><code>#c9c9c9</code></td></tr><tr><td>type</td><td>类型，可选值为 <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>size</td><td>加载图标大小，默认单位为 <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>文字大小，默认单位为为 <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>是否垂直排列图标和文字内容</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>加载文案</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',12)],Qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Hs,Ks)))},Xs={class:"van-doc-markdown-body"},Js=[t('<h1>NavBar 导航栏</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>为页面提供导航功能，常用于页面顶部。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-nav-bar</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标题&quot;</span>\n <span class="hljs-attr">left-text</span>=<span class="hljs-string">&quot;返回&quot;</span>\n <span class="hljs-attr">right-text</span>=<span class="hljs-string">&quot;按钮&quot;</span>\n <span class="hljs-attr">left-arrow</span>\n <span class="hljs-attr">bind:click-left</span>=<span class="hljs-string">&quot;onClickLeft&quot;</span>\n <span class="hljs-attr">bind:click-right</span>=<span class="hljs-string">&quot;onClickRight&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClickLeft</span>(<span class="hljs-params"></span>) {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;点击返回&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });\n },\n <span class="hljs-title function_">onClickRight</span>(<span class="hljs-params"></span>) {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;点击按钮&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">高级用法</h3><p>通过 slot 定制内容。</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;标题&quot;</span> <span class="hljs-attr">left-text</span>=<span class="hljs-string">&quot;返回&quot;</span> <span class="hljs-attr">left-arrow</span>&gt;</span>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-nav-bar</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>标题</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>left-text</td><td>左侧文案</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>right-text</td><td>右侧文案</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>left-arrow</td><td>是否显示左侧箭头</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>fixed</td><td>是否固定在顶部</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>placeholder</td><td>固定在顶部时是否开启占位</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>是否显示下边框</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>z-index</td><td>元素 z-index</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>custom-style</td><td>根节点自定义样式</td><td><em>string</em></td><td>-</td></tr><tr><td>safe-area-inset-top</td><td>是否留出顶部安全距离（状态栏高度）</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>title</td><td>自定义标题</td></tr><tr><td>left</td><td>自定义左侧区域内容</td></tr><tr><td>right</td><td>自定义右侧区域内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:click-left</td><td>点击左侧按钮时触发</td><td>-</td></tr><tr><td>bind:click-right</td><td>点击右侧按钮时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>title-class</td><td>标题样式类</td></tr></tbody></table></div>',11)],Zs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xs,Js)))},Ys={class:"van-doc-markdown-body"},sa=[t('<h1>NoticeBar 通知栏</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于循环播放展示一组消息通知。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;volume-o&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="gun-dong-bo-fang" tabindex="-1">滚动播放</h3><p>通知栏的内容长度溢出时会自动开启滚动播放，通过 <code>scrollable</code> 属性可以控制该行为。</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 --&gt;</span>\n<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;技术是开发它的人的共同灵魂。&quot;</span> /&gt;</span>\n\n<span class="hljs-comment">&lt;!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">scrollable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="duo-xing-zhan-shi" tabindex="-1">多行展示</h3><p>文字较长时，可以通过设置 <code>wrapable</code> 属性来开启多行展示。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">wrapable</span>\n <span class="hljs-attr">scrollable</span>=<span class="hljs-string">&quot;{{ false }}&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="tong-zhi-lan-mo-shi" tabindex="-1">通知栏模式</h3><p>通知栏支持 <code>closeable</code> 和 <code>link</code> 两种模式。</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- closeable 模式，在右侧显示关闭按钮 --&gt;</span>\n<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;技术是开发它的人的共同灵魂。&quot;</span> /&gt;</span>\n\n<span class="hljs-comment">&lt;!-- link 模式，在右侧显示链接箭头 --&gt;</span>\n<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;技术是开发它的人的共同灵魂。&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">自定义样式</h3><p>通过 <code>color</code> 属性设置文本颜色，通过 <code>background</code> 属性设置背景色。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#1989fa&quot;</span>\n <span class="hljs-attr">background</span>=<span class="hljs-string">&quot;#ecf9ff&quot;</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;info-o&quot;</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;技术是开发它的人的共同灵魂。&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-gun-dong-su-lu" tabindex="-1">自定义滚动速率</h3><p>使用<code>speed</code>属性控制滚动速率。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-notice-bar</span>\n <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;{{ text }}&quot;</span>\n <span class="hljs-attr">speed</span>=<span class="hljs-string">&quot;{{speedValue}}&quot;</span>\n <span class="hljs-attr">left-icon</span>=<span class="hljs-string">&quot;//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png&quot;</span>\n/&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>mode</td><td>通知栏模式，可选值为 <code>closeable</code> <code>link</code></td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>text</td><td>通知文本内容</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>color</td><td>通知文本颜色</td><td><em>string</em></td><td><code>#ed6a0c</code></td></tr><tr><td>background</td><td>滚动条背景</td><td><em>string</em></td><td><code>#fffbe8</code></td></tr><tr><td>left-icon</td><td>左侧<a href="#/icon">图标名称</a>或图片链接</td><td><em>string</em></td><td>-</td></tr><tr><td>delay</td><td>动画延迟时间 (ms)</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>speed</td><td>滚动速率 (px/s)</td><td><em>number</em></td><td><code>60</code></td></tr><tr><td>scrollable</td><td>是否开启滚动播放，内容长度溢出时默认开启</td><td><em>boolean</em></td><td>-</td></tr><tr><td>wrapable</td><td>是否开启文本换行，只在禁用滚动时生效</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>open-type</td><td>微信开放能力</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>click</td><td>点击通知栏时触发</td><td><em>event: Event</em></td></tr><tr><td>close</td><td>关闭通知栏时触发</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>通知文本内容，仅在 <code>text</code> 属性为空时有效</td></tr><tr><td>left-icon</td><td>自定义左侧图标</td></tr><tr><td>right-icon</td><td>自定义右侧图标</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="yang-shi-bian-liang" tabindex="-1">样式变量</h3><p>组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 <a href="#/config-provider">ConfigProvider 组件</a>。</p><table><thead><tr><th>名称</th><th>默认值</th><th>描述</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)],aa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ys,sa)))},ta={class:"van-doc-markdown-body"},na=[t('<h1>Notify 消息提示</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>在页面顶部展示消息提示，支持函数调用和组件调用两种方式。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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;path/to/@vant/weapp/dist/notify/notify&#39;</span>;\n\n<span class="hljs-title class_">Notify</span>(<span class="hljs-string">&#39;通知内容&#39;</span>);\n</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- 在页面内添加对应的节点 --&gt;</span>\n<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>\n</code></pre></div><div class="van-doc-card"><h3 id="tong-zhi-lei-xing" tabindex="-1">通知类型</h3><p>支持<code>primary</code>、<code>success</code>、<code>warning</code>、<code>danger</code>四种通知类型，默认为<code>danger</code>。</p><pre><code class="language-js"><span class="hljs-comment">// 主要通知</span>\n<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;通知内容&#39;</span> });\n\n<span class="hljs-comment">// 成功通知</span>\n<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;通知内容&#39;</span> });\n\n<span class="hljs-comment">// 危险通知</span>\n<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;通知内容&#39;</span> });\n\n<span class="hljs-comment">// 警告通知</span>\n<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;通知内容&#39;</span> });\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tong-zhi" tabindex="-1">自定义通知</h3><p>自定义消息通知的颜色和展示时长。</p><pre><code class="language-js"><span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;自定义颜色&#39;</span>,\n <span class="hljs-attr">color</span>: <span class="hljs-string">&#39;#ad0000&#39;</span>,\n <span class="hljs-attr">background</span>: <span class="hljs-string">&#39;#ffe1e1&#39;</span>,\n});\n\n<span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;自定义时长&#39;</span>,\n <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>,\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xuan-ze-qi" tabindex="-1">自定义选择器</h3><pre><code class="language-js"><span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;自定义节点选择器&#39;</span>,\n <span class="hljs-attr">duration</span>: <span class="hljs-number">1000</span>,\n <span class="hljs-attr">selector</span>: <span class="hljs-string">&#39;#custom-selector&#39;</span>,\n});\n</code></pre><pre><code class="language-html"><span class="hljs-comment">&lt;!-- 在页面内添加自定义节点 --&gt;</span>\n<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>\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><table><thead><tr><th>方法名</th><th>说明</th><th>参数</th><th>返回值</th></tr></thead><tbody><tr><td>Notify</td><td>展示提示</td><td><code>options | message</code></td><td>notify 实例</td></tr><tr><td>Notify.clear</td><td>关闭提示</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type <code>v1.0.0</code></td><td>类型，可选值为 <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>展示文案，支持通过<code>\\n</code>换行</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>duration</td><td>展示时长(ms)，值为 0 时，notify 不会消失</td><td><em>number</em></td><td><code>3000</code></td></tr><tr><td>selector</td><td>自定义节点选择器</td><td><em>string</em></td><td><code>van-notify</code></td></tr><tr><td>color</td><td>字体颜色</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>top</td><td>顶部距离</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>background</td><td>背景颜色</td><td><em>string</em></td><td>-</td></tr><tr><td>context</td><td>选择器的选择范围，可以传入自定义组件的 this 作为上下文</td><td><em>object</em></td><td>当前页面</td></tr><tr><td>onClick</td><td>点击时的回调函数</td><td><em>Function</em></td><td>-</td></tr><tr><td>onOpened</td><td>完全展示后的回调函数</td><td><em>Function</em></td><td>-</td></tr><tr><td>onClose</td><td>关闭时的回调函数</td><td><em>Function</em></td><td>-</td></tr><tr><td>safeAreaInsetTop</td><td>是否留出顶部安全距离（状态栏高度）</td><td><em>boolean</em></td><td><code>false</code></td></tr></tbody></table></div>',11)],la={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ta,na)))},ea={class:"van-doc-markdown-body"},pa=[t('<h1>Overlay 遮罩层</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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>显示遮罩层<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onClickShow</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n\n <span class="hljs-title function_">onClickHide</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="qian-ru-nei-rong" tabindex="-1">嵌入内容</h3><p>通过默认插槽可以在遮罩层上嵌入任意内容。</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>嵌入内容<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<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>\n <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>\n <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>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-overlay</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">onClickShow</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n\n <span class="hljs-title function_">onClickHide</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n\n <span class="hljs-title function_">noop</span>(<span class="hljs-params"></span>) {},\n});\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.wrapper</span> {\n <span class="hljs-attribute">display</span>: flex;\n <span class="hljs-attribute">align-items</span>: center;\n <span class="hljs-attribute">justify-content</span>: center;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;\n}\n\n<span class="hljs-selector-class">.block</span> {\n <span class="hljs-attribute">width</span>: <span class="hljs-number">120px</span>;\n <span class="hljs-attribute">height</span>: <span class="hljs-number">120px</span>;\n <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>;\n}\n</code></pre></div><div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>show</td><td>是否展示遮罩层</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>z-index</td><td>z-index 层级</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>duration</td><td>动画时长，单位秒</td><td><em>string | number</em></td><td><code>0.3</code></td></tr><tr><td>class-name</td><td>自定义类名</td><td><em>string</em></td><td>-</td></tr><tr><td>custom-style</td><td>自定义样式</td><td><em>string</em></td><td>-</td></tr><tr><td>lock-scroll <code>v1.7.3</code></td><td>是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动</td><td><em>boolean</em></td><td>true</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:click</td><td>点击时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>默认插槽，用于在遮罩层上方嵌入内容</td></tr></tbody></table></div>',9)],da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ea,pa)))},ca={class:"van-doc-markdown-body"},oa=[t('<h1>Panel 面板</h1><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>面板只是一个容器，里面可以放入自定义的内容。</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;标题&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;描述信息&quot;</span> <span class="hljs-attr">status</span>=<span class="hljs-string">&quot;状态&quot;</span>&gt;</span>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-panel</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">高级用法</h3><p>使用<code>slot</code>自定义内容。</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;标题&quot;</span> <span class="hljs-attr">desc</span>=<span class="hljs-string">&quot;描述信息&quot;</span> <span class="hljs-attr">status</span>=<span class="hljs-string">&quot;状态&quot;</span>&gt;</span>\n <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>\n <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>\n <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>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <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>按钮<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-panel</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>标题</td><td><em>string</em></td><td>-</td></tr><tr><td>desc</td><td>描述</td><td><em>string</em></td><td>-</td></tr><tr><td>status</td><td>状态</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义内容</td></tr><tr><td>header</td><td>自定义 header，如果设置了<code>title</code>、<code>desc</code>、<code>status</code>属性则不生效</td></tr><tr><td>footer</td><td>自定义 footer</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>header-class</td><td>头部样式类</td></tr><tr><td>footer-class</td><td>底部样式类</td></tr></tbody></table></div>',9)],ia={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ca,oa)))},ha={class:"van-doc-markdown-body"},ra=[t('<h1>Picker 选择器</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 <a href="#/popup">弹出层</a> 组件配合使用。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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>\n</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;path/to/@vant/weapp/dist/toast/toast&#39;</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [<span class="hljs-string">&#39;杭州&#39;</span>, <span class="hljs-string">&#39;宁波&#39;</span>, <span class="hljs-string">&#39;温州&#39;</span>, <span class="hljs-string">&#39;嘉兴&#39;</span>, <span class="hljs-string">&#39;湖州&#39;</span>],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`当前值：<span class="hljs-subst">${value}</span>, 当前索引：<span class="hljs-subst">${index}</span>`</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="mo-ren-xuan-zhong-xiang" tabindex="-1">默认选中项</h3><p>单列选择器可以直接通过<code>default-index</code>属性设置初始选中项的索引值。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span>\n <span class="hljs-attr">default-index</span>=<span class="hljs-string">&quot;{{ 2 }}&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-ding-bu-lan" tabindex="-1">展示顶部栏</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">show-toolbar</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标题&quot;</span>\n <span class="hljs-attr">columns</span>=<span class="hljs-string">&quot;{{ columns }}&quot;</span>\n <span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span>\n <span class="hljs-attr">bind:confirm</span>=<span class="hljs-string">&quot;onConfirm&quot;</span>\n/&gt;</span>\n</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;path/to/@vant/weapp/dist/toast/toast&#39;</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [<span class="hljs-string">&#39;杭州&#39;</span>, <span class="hljs-string">&#39;宁波&#39;</span>, <span class="hljs-string">&#39;温州&#39;</span>, <span class="hljs-string">&#39;嘉兴&#39;</span>, <span class="hljs-string">&#39;湖州&#39;</span>],\n },\n\n <span class="hljs-title function_">onConfirm</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">`当前值：<span class="hljs-subst">${value}</span>, 当前索引：<span class="hljs-subst">${index}</span>`</span>);\n },\n\n <span class="hljs-title function_">onCancel</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;取消&#39;</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="duo-lie-lian-dong" tabindex="-1">多列联动</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>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">const</span> citys = {\n 浙江: [<span class="hljs-string">&#39;杭州&#39;</span>, <span class="hljs-string">&#39;宁波&#39;</span>, <span class="hljs-string">&#39;温州&#39;</span>, <span class="hljs-string">&#39;嘉兴&#39;</span>, <span class="hljs-string">&#39;湖州&#39;</span>],\n 福建: [<span class="hljs-string">&#39;福州&#39;</span>, <span class="hljs-string">&#39;厦门&#39;</span>, <span class="hljs-string">&#39;莆田&#39;</span>, <span class="hljs-string">&#39;三明&#39;</span>, <span class="hljs-string">&#39;泉州&#39;</span>],\n};\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [\n {\n <span class="hljs-attr">values</span>: <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(citys),\n <span class="hljs-attr">className</span>: <span class="hljs-string">&#39;column1&#39;</span>,\n },\n {\n <span class="hljs-attr">values</span>: citys[<span class="hljs-string">&#39;浙江&#39;</span>],\n <span class="hljs-attr">className</span>: <span class="hljs-string">&#39;column2&#39;</span>,\n <span class="hljs-attr">defaultIndex</span>: <span class="hljs-number">2</span>,\n },\n ],\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { picker, value, index } = event.<span class="hljs-property">detail</span>;\n picker.<span class="hljs-title function_">setColumnValues</span>(<span class="hljs-number">1</span>, citys[value[<span class="hljs-number">0</span>]]);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-xuan-xiang" tabindex="-1">禁用选项</h3><p>选项可以为对象结构，通过设置 disabled 来禁用该选项。</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>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">columns</span>: [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;杭州&#39;</span>, <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;宁波&#39;</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;温州&#39;</span> },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">加载状态</h3><p>当 Picker 数据是通过异步获取时，可以通过 <code>loading</code> 属性显示加载提示。</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>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>columns</td><td>对象数组，配置每一列显示的数据</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>show-toolbar</td><td>是否显示顶部栏</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>toolbar-position</td><td>顶部栏位置，可选值为<code>bottom</code></td><td><em>string</em></td><td><code>top</code></td></tr><tr><td>title</td><td>顶部栏标题</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>loading</td><td>是否显示加载状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>value-key</td><td>选项对象中，文字对应的 key</td><td><em>string</em></td><td><code>text</code></td></tr><tr><td>item-height</td><td>选项高度</td><td><em>number</em></td><td><code>44</code></td></tr><tr><td>confirm-button-text</td><td>确认按钮文字</td><td><em>string</em></td><td><code>确认</code></td></tr><tr><td>cancel-button-text</td><td>取消按钮文字</td><td><em>string</em></td><td><code>取消</code></td></tr><tr><td>visible-item-count</td><td>可见的选项个数</td><td><em>number</em></td><td><code>6</code></td></tr><tr><td>default-index</td><td>单列选择器的默认选中项索引，<br>多列选择器请参考下方的 Columns 配置</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 组件的事件会根据 columns 是单列或多列返回不同的参数。</p><table><thead><tr><th>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>confirm</td><td>点击完成按钮时触发</td><td>单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引</td></tr><tr><td>cancel</td><td>点击取消按钮时触发</td><td>单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引</td></tr><tr><td>change</td><td>选项改变时触发</td><td>单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="columns-shu-ju-jie-gou" tabindex="-1">Columns 数据结构</h3><p>当传入多列数据时，<code>columns</code>为一个对象数组，数组中的每一个对象配置每一列，每一列有以下<code>key</code>。</p><table><thead><tr><th>key</th><th>说明</th></tr></thead><tbody><tr><td>values</td><td>列中对应的备选值</td></tr><tr><td>defaultIndex</td><td>初始选中项的索引，默认为 0</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>active-class</td><td>选中项样式类</td></tr><tr><td>toolbar-class</td><td>顶部栏样式类</td></tr><tr><td>column-class</td><td>列样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><p>通过 selectComponent 可以获取到 picker 实例并调用实例方法。</p><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>getValues</td><td>-</td><td>values</td><td>获取所有列选中的值</td></tr><tr><td>setValues</td><td>values</td><td>-</td><td>设置所有列选中的值</td></tr><tr><td>getIndexes</td><td>-</td><td>indexes</td><td>获取所有列选中值对应的索引</td></tr><tr><td>setIndexes</td><td>indexes</td><td>-</td><td>设置所有列选中值对应的索引</td></tr><tr><td>getColumnValue</td><td>columnIndex</td><td>value</td><td>获取对应列选中的值</td></tr><tr><td>setColumnValue</td><td>columnIndex, value</td><td>-</td><td>设置对应列选中的值</td></tr><tr><td>getColumnIndex</td><td>columnIndex</td><td>optionIndex</td><td>获取对应列选中项的索引</td></tr><tr><td>setColumnIndex</td><td>columnIndex, optionIndex</td><td>-</td><td>设置对应列选中项的索引</td></tr><tr><td>getColumnValues</td><td>columnIndex</td><td>values</td><td>获取对应列中所有选项</td></tr><tr><td>setColumnValues</td><td>columnIndex, values</td><td>-</td><td>设置对应列中所有选项</td></tr></tbody></table></div>',16)],ua={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ha,ra)))},ga={class:"van-doc-markdown-body"},ja=[t('<h1>Popup 弹出层</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过<code>show</code>属性控制弹出层是否展示。</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;展示弹出层&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>\n\n<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>内容<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n },\n\n <span class="hljs-title function_">showPopup</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="dan-chu-wei-zhi" tabindex="-1">弹出位置</h3><p>通过<code>position</code>属性设置弹出位置，默认居中弹出，可以设置为<code>top</code>、<code>bottom</code>、<code>left</code>、<code>right</code>。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;top&quot;</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%;&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="guan-bi-tu-biao" tabindex="-1">关闭图标</h3><p>设置<code>closeable</code>属性后，会在弹出层的右上角显示关闭图标，并且可以通过<code>close-icon</code>属性自定义图标，使用<code>close-icon-position</code>属性可以自定义图标位置。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n\n<span class="hljs-comment">&lt;!-- 自定义图标 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">close-icon</span>=<span class="hljs-string">&quot;close&quot;</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n\n<span class="hljs-comment">&lt;!-- 图标位置 --&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">close-icon-position</span>=<span class="hljs-string">&quot;top-left&quot;</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-dan-chuang" tabindex="-1">圆角弹窗</h3><p>设置<code>round</code>属性后，弹窗会根据弹出位置添加不同的圆角样式。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-popup</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">round</span>\n <span class="hljs-attr">position</span>=<span class="hljs-string">&quot;bottom&quot;</span>\n <span class="hljs-attr">custom-style</span>=<span class="hljs-string">&quot;height: 20%&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-zhi-gun-dong-chuan-tou" tabindex="-1">禁止滚动穿透</h3><p>使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。</p><p>目前，组件可以通过 <code>lock-scroll</code> 属性处理部分滚动穿透问题。 <strong>但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。</strong> 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：</p><h4 id="page-meta" tabindex="-1"><a href="https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html">page-meta</a></h4><p>当小程序基础库最低版本在 2.9.0 以上时，即可使用 <a href="https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html">page-meta</a> 组件动态修改页面样式</p><pre><code class="language-html"><span class="hljs-comment">&lt;!-- page-meta 只能是页面内的第一个节点 --&gt;</span>\n<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>\n\n<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>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>show</td><td>是否显示弹出层</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>z-index</td><td>z-index 层级</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>overlay</td><td>是否显示遮罩层</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>position</td><td>弹出位置，可选值为 <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>动画时长，单位为毫秒</td><td><em>number | object</em></td><td><code>300</code></td></tr><tr><td>round</td><td>是否显示圆角</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>custom-style</td><td>自定义弹出层样式</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>overlay-style</td><td>自定义遮罩层样式</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>close-on-click-overlay</td><td>是否在点击遮罩层后关闭</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>closeable</td><td>是否显示关闭图标</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>close-icon</td><td>关闭图标名称或图片链接</td><td><em>string</em></td><td><code>cross</code></td></tr><tr><td>safe-area-inset-bottom</td><td>是否为 iPhoneX 留出底部安全距离</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-top</td><td>是否留出顶部安全距离（状态栏高度）</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lock-scroll <code>v1.7.3</code></td><td>是否锁定背景滚动</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:close</td><td>关闭弹出层时触发</td><td>-</td></tr><tr><td>bind:click-overlay</td><td>点击遮罩层时触发</td><td>-</td></tr><tr><td>bind:before-enter</td><td>进入前触发</td><td>-</td></tr><tr><td>bind:enter</td><td>进入中触发</td><td>-</td></tr><tr><td>bind:after-enter</td><td>进入后触发</td><td>-</td></tr><tr><td>bind:before-leave</td><td>离开前触发</td><td>-</td></tr><tr><td>bind:leave</td><td>离开中触发</td><td>-</td></tr><tr><td>bind:after-leave</td><td>离开后触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',13)],ma={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ga,ja)))},va={class:"van-doc-markdown-body"},ba=[t('<h1>Progress 进度条</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于展示操作的当前进度。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>进度条默认为蓝色，使用<code>percentage</code>属性来设置当前进度。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-tiao-cu-xi" tabindex="-1">线条粗细</h3><p>通过<code>stroke-width</code>可以设置进度条的粗细。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-hui" tabindex="-1">置灰</h3><p>设置<code>inactive</code>属性后进度条将置灰。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="yang-shi-ding-zhi" tabindex="-1">样式定制</h3><p>可以使用<code>pivot-text</code>属性自定义文字，<code>color</code>属性自定义进度条颜色。</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;橙色&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>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span> <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;红色&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>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">van-progress</span>\n <span class="hljs-attr">percentage</span>=<span class="hljs-string">&quot;75&quot;</span>\n <span class="hljs-attr">pivot-text</span>=<span class="hljs-string">&quot;紫色&quot;</span>\n <span class="hljs-attr">pivot-color</span>=<span class="hljs-string">&quot;#7232dd&quot;</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;linear-gradient(to right, #be99ff, #7232dd)&quot;</span>\n/&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>inactive</td><td>是否置灰</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>percentage</td><td>进度百分比</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>stroke-width</td><td>进度条粗细，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>4px</code></td></tr><tr><td>show-pivot</td><td>是否显示进度文字</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>color</td><td>进度条颜色</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>text-color</td><td>进度文字颜色</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>track-color</td><td>轨道颜色</td><td><em>string</em></td><td><code>#e5e5e5</code></td></tr><tr><td>pivot-text</td><td>文字显示</td><td><em>string</em></td><td>百分比文字</td></tr><tr><td>pivot-color</td><td>文字背景色</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">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',11)],qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",va,ba)))},ya={class:"van-doc-markdown-body"},fa=[t('<h1>Radio 单选框</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>在一组备选项中进行单选。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过<code>value</code>绑定值当前选中项的 name 。</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>\n <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>单选框 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>单选框 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">radio</span>: <span class="hljs-string">&#39;1&#39;</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shui-ping-pai-lie" tabindex="-1">水平排列</h3><p>将<code>direction</code>属性设置为<code>horizontal</code>后，单选框组会变成水平排列。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-radio-group</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ radio }}&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;horizontal&quot;</span>\n&gt;</span>\n <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>单选框 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>单选框 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">禁用状态</h3><p>通过<code>disabled</code>属性禁止选项切换，在<code>Radio</code>上设置<code>diabled</code>可以禁用单个选项。</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>\n <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>单选框 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>单选框 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-xing-zhuang" tabindex="-1">自定义形状</h3><p>将<code>shape</code>属性设置为<code>square</code>，单选框的形状会变成方形。</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>\n <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>单选框 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>单选框 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</h3><p>通过<code>checked-color</code>属性设置选中状态的图标颜色。</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>\n <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>单选框 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>单选框 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">自定义大小</h3><p>通过<code>icon-size</code>属性可以自定义图标的大小。</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>\n <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>单选框 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>单选框 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">自定义图标</h3><p>通过<code>icon</code>插槽自定义图标，需要设置<code>use-icon-slot</code>属性。</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>\n <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>\n 自定义图标\n <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>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>\n 自定义图标\n <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>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">radio</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">icon</span>: {\n <span class="hljs-attr">normal</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-normal.png&#39;</span>,\n <span class="hljs-attr">active</span>: <span class="hljs-string">&#39;//img.yzcdn.cn/icon-active.png&#39;</span>,\n },\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-wen-ben-dian-ji" tabindex="-1">禁用文本点击</h3><p>通过设置<code>label-disabled</code>属性可以禁用单选框文本点击。</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>\n <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>单选框 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n <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>单选框 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="yu-cell-zu-jian-yi-qi-shi-yong" tabindex="-1">与 Cell 组件一起使用</h3><p>此时你需要再引入<code>Cell</code>和<code>CellGroup</code>组件。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单选框 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>\n <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>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单选框 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>\n <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>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-radio-group</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">radio</span>: <span class="hljs-string">&#39;1&#39;</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { name } = event.<span class="hljs-property">currentTarget</span>.<span class="hljs-property">dataset</span>;\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">radio</span>: name,\n });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>在表单内提交时的标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>当前选中项的标识符</td><td><em>any</em></td><td>-</td></tr><tr><td>disabled</td><td>是否禁用所有单选框</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>direction <code>v1.6.7</code></td><td>排列方向，可选值为 <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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>形状，可选值为 <code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>disabled</td><td>是否为禁用状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-disabled</td><td>是否禁用文本内容点击</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>label-position</td><td>文本位置，可选值为 <code>left</code></td><td><em>string</em></td><td><code>right</code></td></tr><tr><td>icon-size</td><td>图标大小，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>20px</code></td></tr><tr><td>checked-color</td><td>选中状态颜色</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>use-icon-slot</td><td>是否使用 icon 插槽</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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:change</td><td>当绑定值变化时触发的事件</td><td>当前选中项的 name</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radio-wai-bu-yang-shi-lei" tabindex="-1">Radio 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>icon-class</td><td>图标样式类</td></tr><tr><td>label-class</td><td>描述信息样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="radiogroup-event" tabindex="-1">RadioGroup Event</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:change</td><td>当绑定值变化时触发的事件</td><td>当前选中项的 name</td></tr></tbody></table></div>',19)],xa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ya,fa)))},wa={class:"van-doc-markdown-body"},za=[t('<h1>Rate 评分</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于对事物进行评级操作。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">3</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">value</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">自定义图标</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">icon</span>=<span class="hljs-string">&quot;like&quot;</span>\n <span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;like-o&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">自定义样式</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;{{ 25 }}&quot;</span>\n <span class="hljs-attr">color</span>=<span class="hljs-string">&quot;#ffd21e&quot;</span>\n <span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;star&quot;</span>\n <span class="hljs-attr">void-color</span>=<span class="hljs-string">&quot;#eee&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="ban-xing" tabindex="-1">半星</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-rate</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">allow-half</span>\n <span class="hljs-attr">void-icon</span>=<span class="hljs-string">&quot;star&quot;</span>\n <span class="hljs-attr">void-color</span>=<span class="hljs-string">&quot;#eee&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">2.5</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">value</span>: event.<span class="hljs-property">detail</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shu-liang" tabindex="-1">自定义数量</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>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">禁用状态</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-du-zhuang-tai" tabindex="-1">只读状态</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>\n</code></pre></div><div class="van-doc-card"><h3 id="jian-ting-change-shi-jian" tabindex="-1">监听 change 事件</h3><p>评分变化时，会触发 <code>change</code> 事件。</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>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">2</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;当前值：&#39;</span> + event.<span class="hljs-property">detail</span>);\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>在表单内提交时的标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>当前分值</td><td><em>number</em></td><td>-</td></tr><tr><td>count</td><td>图标总数</td><td><em>number</em></td><td><code>5</code></td></tr><tr><td>size</td><td>图标大小，默认单位为 <code>px</code></td><td><em>string | number</em></td><td><code>20px</code></td></tr><tr><td>gutter</td><td>图标间距，默认单位为 <code>px</code></td><td><em>string | number</em></td><td><code>4px</code></td></tr><tr><td>color</td><td>选中时的颜色</td><td><em>string</em></td><td><code>#ffd21e</code></td></tr><tr><td>void-color</td><td>未选中时的颜色</td><td><em>string</em></td><td><code>#c7c7c7</code></td></tr><tr><td>icon</td><td>选中时的图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td><code>star</code></td></tr><tr><td>void-icon</td><td>未选中时的图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td><code>star-o</code></td></tr><tr><td>allow-half</td><td>是否允许半选</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>是否为只读状态 \b</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用评分</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled-color</td><td>禁用时的颜色</td><td><em>string</em></td><td><code>#bdbdbd</code></td></tr><tr><td>touchable</td><td>是否可以通过滑动手势选择评分</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>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>当前分值变化时触发的事件</td><td>event.detail:当前分值</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>icon-class</td><td>图标样式类</td></tr></tbody></table></div>',16)],ka={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",wa,za)))},_a={class:"van-doc-markdown-body"},Ca=[t('<h1>Search 搜索</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于搜索场景的输入框组件。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p><code>van-search</code> 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。</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;请输入搜索关键词&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shi-jian-jian-ting" tabindex="-1">事件监听</h3><p><code>van-search</code> 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入搜索关键词&quot;</span>\n <span class="hljs-attr">show-action</span>\n <span class="hljs-attr">bind:search</span>=<span class="hljs-string">&quot;onSearch&quot;</span>\n <span class="hljs-attr">bind:cancel</span>=<span class="hljs-string">&quot;onCancel&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="sou-suo-kuang-nei-rong-dui-qi" tabindex="-1">搜索框内容对齐</h3><p>通过 <code>input-align</code> 属性可以设置搜索框内容的对齐方式。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">input-align</span>=<span class="hljs-string">&quot;center&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入搜索关键词&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-sou-suo-kuang" tabindex="-1">禁用搜索框</h3><p>通过 <code>disabled</code> 属性可以将组件设置为禁用状态。</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;请输入搜索关键词&quot;</span> /&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-bei-jing-se" tabindex="-1">自定义背景色</h3><p>通过<code>background</code>属性可以设置搜索框外部的背景色，通过<code>shape</code>属性设置搜索框的形状，可选值为<code>round</code>。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">shape</span>=<span class="hljs-string">&quot;round&quot;</span>\n <span class="hljs-attr">background</span>=<span class="hljs-string">&quot;#4fc08d&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入搜索关键词&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu" tabindex="-1">自定义按钮</h3><p><code>van-search</code> 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-search</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ value }}&quot;</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;地址&quot;</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入搜索关键词&quot;</span>\n <span class="hljs-attr">use-action-slot</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n <span class="hljs-attr">bind:search</span>=<span class="hljs-string">&quot;onSearch&quot;</span>\n&gt;</span>\n <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>搜索<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-search</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-string">&#39;&#39;</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">e</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">value</span>: e.<span class="hljs-property">detail</span>,\n });\n },\n <span class="hljs-title function_">onSearch</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;搜索&#39;</span> + <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">value</span>);\n },\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params"></span>) {\n <span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;搜索&#39;</span> + <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>.<span class="hljs-property">value</span>);\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>在表单内提交时的标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>label</td><td>搜索框左侧文本</td><td><em>string</em></td><td>-</td></tr><tr><td>shape</td><td>形状，可选值为 <code>round</code></td><td><em>string</em></td><td><code>square</code></td></tr><tr><td>value</td><td>当前输入的值</td><td><em>string | number</em></td><td>-</td></tr><tr><td>background</td><td>搜索框背景色</td><td><em>string</em></td><td><code>#f2f2f2</code></td></tr><tr><td>show-action</td><td>是否在搜索框右侧显示取消按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>action-text <code>v1.0.0</code></td><td>取消按钮文字</td><td><em>string</em></td><td><code>取消</code></td></tr><tr><td>focus</td><td>获取焦点</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>error</td><td>是否将输入内容标红</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用输入框</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>readonly</td><td>是否只读</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>clearable</td><td>是否启用清除控件</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>clear-trigger <code>v1.8.4</code></td><td>显示清除图标的时机，<code>always</code> 表示输入框不为空时展示，<br><code>focus</code> 表示输入框聚焦且不为空时展示</td><td><em>string</em></td><td><code>focus</code></td></tr><tr><td>clear-icon <code>v1.8.4</code></td><td>清除<a href="#/icon">图标名称</a>或图片链接</td><td><em>string</em></td><td><code>clear</code></td></tr><tr><td>maxlength</td><td>最大输入长度，设置为 -1 的时候不限制最大长度</td><td><em>number</em></td><td><code>-1</code></td></tr><tr><td>use-action-slot</td><td>是否使用 action slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>placeholder</td><td>输入框为空时占位符</td><td><em>string</em></td><td>-</td></tr><tr><td>placeholder-style</td><td>指定占位符的样式</td><td><em>string</em></td><td>-</td></tr><tr><td>input-align</td><td>输入框内容对齐方式，可选值为 <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>是否使用输入框左侧图标 slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>use-right-icon-slot</td><td>是否使用输入框右侧图标 slot</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>left-icon</td><td>输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）</td><td><em>string</em></td><td><code>search</code></td></tr><tr><td>right-icon</td><td>输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:search</td><td>确定搜索时触发</td><td>event.detail: 当前输入值</td></tr><tr><td>bind:change</td><td>输入内容变化时触发</td><td>event.detail: 当前输入值</td></tr><tr><td>bind:cancel</td><td>取消搜索搜索时触发</td><td>-</td></tr><tr><td>bind:focus</td><td>输入框聚焦时触发</td><td>-</td></tr><tr><td>bind:blur</td><td>输入框失焦时触发</td><td>-</td></tr><tr><td>bind:clear</td><td>点击清空控件时触发</td><td>-</td></tr><tr><td>bind:click-input</td><td>点击搜索区域时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>action</td><td>自定义搜索框右侧按钮，需要在<code>use-action-slot</code>为 true 时才会显示</td></tr><tr><td>label</td><td>自定义搜索框左侧文本</td></tr><tr><td>left-icon</td><td>自定义输入框左侧图标，需要在<code>use-left-icon-slot</code>为 true 时才会显示</td></tr><tr><td>right-icon</td><td>自定义输入框右侧图标，需要在<code>use-right-icon-slot</code>为 true 时才会显示</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>field-class</td><td>搜索框样式类</td></tr><tr><td>input-class</td><td>输入框样式类</td></tr><tr><td>cancel-class</td><td>取消按钮样式类</td></tr></tbody></table></div>',15)],Pa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_a,Ca)))},Sa={class:"van-doc-markdown-body"},Ia=[t('<h1>ShareSheet 分享面板</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>分享面板通过 <code>options</code> 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。</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;显示分享面板&quot;</span> <span class="hljs-attr">bind:click</span>=<span class="hljs-string">&quot;onClick&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;立即分享给好友&quot;</span>\n <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>\n <span class="hljs-attr">bind:select</span>=<span class="hljs-string">&quot;onSelect&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;微信&#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> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;微博&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;复制链接&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;分享海报&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;二维码&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</span> },\n ],\n },\n\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n <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> });\n },\n\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params"></span>) {\n <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> });\n },\n\n <span class="hljs-title function_">onSelect</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-title class_">Toast</span>(event.<span class="hljs-property">detail</span>.<span class="hljs-property">name</span>);\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">onClose</span>();\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-duo-xing-xuan-xiang" tabindex="-1">展示多行选项</h3><p>当分享选项的数量较多时，可以将 <code>options</code> 定义为数组嵌套的格式，每个子数组会作为一行选项展示。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;立即分享给好友&quot;</span>\n <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;微信&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;微博&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },\n { <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> },\n ],\n [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;复制链接&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;分享海报&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;二维码&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</span> },\n ],\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">自定义图标</h3><p>除了使用内置的几种图标外，可以直接在 <code>icon</code> 中传入图片 URL 来使用自定义的图标。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;名称&#39;</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-fire.png&#39;</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;名称&#39;</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-light.png&#39;</span>,\n },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;名称&#39;</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/custom-icon-water.png&#39;</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-miao-shu-xin-xi" tabindex="-1">展示描述信息</h3><p>通过 <code>description</code> 属性可以设置标题下方的描述文字, 在 <code>options</code> 内设置 <code>description</code> 属性可以添加分享选项描述。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-share-sheet</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ showShare }}&quot;</span>\n <span class="hljs-attr">options</span>=<span class="hljs-string">&quot;{{ options }}&quot;</span>\n <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;立即分享给好友&quot;</span>\n <span class="hljs-attr">description</span>=<span class="hljs-string">&quot;描述信息&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">showShare</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-attr">options</span>: [\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;微信&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;wechat&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;微博&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;weibo&#39;</span> },\n {\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;复制链接&#39;</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;link&#39;</span>,\n <span class="hljs-attr">description</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;分享海报&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;poster&#39;</span> },\n { <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;二维码&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;qrcode&#39;</span> },\n ],\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>options</td><td>分享选项</td><td><em>Option[]</em></td><td><code>[]</code></td></tr><tr><td>title</td><td>顶部标题</td><td><em>string</em></td><td>-</td></tr><tr><td>cancel-text</td><td>取消按钮文字</td><td><em>string</em></td><td><code>&#39;取消&#39;</code></td></tr><tr><td>description</td><td>标题下方的辅助描述文字</td><td><em>string</em></td><td>-</td></tr><tr><td>duration</td><td>动画时长，单位毫秒</td><td><em>number | string</em></td><td><code>300</code></td></tr><tr><td>overlay</td><td>是否显示遮罩层</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>close-on-click-overlay</td><td>是否在点击遮罩层后关闭</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>safe-area-inset-bottom</td><td>是否开启底部安全区适配</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="option-shu-ju-jie-gou" tabindex="-1">Option 数据结构</h3><p><code>options</code>属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：</p><table><thead><tr><th>键名</th><th>说明</th><th>类型</th></tr></thead><tbody><tr><td>name</td><td>分享渠道名称</td><td><em>string</em></td></tr><tr><td>description</td><td>分享选项描述</td><td><em>string</em></td></tr><tr><td>icon</td><td>图标，可选值为 <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>，支持传入图片 URL</td><td><em>string</em></td></tr><tr><td>openType</td><td>按钮 <code>open-type</code>，可用于实现分享功能，可选值为 <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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>select</td><td>点击分享选项时触发</td><td><em>option: Option, index: number</em></td></tr><tr><td>close</td><td>关闭时触发</td><td>-</td></tr><tr><td>cancel</td><td>点击取消按钮时触发</td><td>-</td></tr><tr><td>click-overlay</td><td>点击遮罩层时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>title</td><td>自定义顶部标题</td></tr><tr><td>description</td><td>自定义描述文字</td></tr></tbody></table></div>',13)],Da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Sa,Ia)))},Ta={class:"van-doc-markdown-body"},Aa=[t('<h1>Sidebar 侧边导航</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>垂直展示的导航栏，用于在不同的内容区域之间进行切换。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过在<code>van-sidebar</code>上设置<code>activeKey</code>属性来控制选中项。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeKey</span>: <span class="hljs-number">0</span>,\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="hui-biao-ti-shi" tabindex="-1">徽标提示</h3><p>设置<code>dot</code>属性后，会在右上角展示一个小红点。设置<code>badge</code>属性后，会在右上角展示相应的徽标。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> <span class="hljs-attr">dot</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;5&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> <span class="hljs-attr">badge</span>=<span class="hljs-string">&quot;99+&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-xuan-xiang" tabindex="-1">禁用选项</h3><p>通过<code>disabled</code>属性禁用选项。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> <span class="hljs-attr">disabled</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jian-ting-qie-huan-shi-jian" tabindex="-1">监听切换事件</h3><p>设置<code>change</code>方法来监听切换导航项时的事件。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名 1&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名 2&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-sidebar-item</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签名 3&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sidebar</span>&gt;</span>\n\n<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>\n</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/dist/notify/notify&#39;</span>;\n\n<span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">activeKey</span>: <span class="hljs-number">0</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <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> });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>activeKey</td><td>选中项的索引</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>change</td><td>切换徽章时触发</td><td>当前选中徽章的索引</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebar-wai-bu-yang-shi-lei" tabindex="-1">Sidebar 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-props" tabindex="-1">SidebarItem Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>title</td><td>内容</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>dot</td><td>是否显示右上角小红点</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>info</td><td>图标右上角徽标的内容（已废弃，请使用 badge 属性）</td><td><em>string | number</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>badge <code>v1.5.0</code></td><td>图标右上角徽标的内容</td><td><em>string | number</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>disabled</td><td>是否禁用该项</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>title</td><td>自定义标题栏，如果设置了<code>title</code>属性则不生效</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-event" tabindex="-1">SidebarItem Event</h3><table><thead><tr><th>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>click</td><td>点击徽章时触发</td><td><code>event.detail</code> 为当前徽章的索引</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="sidebaritem-wai-bu-yang-shi-lei" tabindex="-1">SidebarItem 外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',16)],Ba={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ta,Aa)))},Fa={class:"van-doc-markdown-body"},Na=[t('<h1>Skeleton 骨架屏</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于在内容加载过程中展示一组占位图形。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过<code>title</code>属性显示标题占位图，通过<code>row</code>属性配置占位段落行数。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-shi-tou-xiang" tabindex="-1">显示头像</h3><p>通过<code>avatar</code>属性显示头像占位图。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zhan-shi-zi-zu-jian" tabindex="-1">展示子组件</h3><p>将<code>loading</code>属性设置成<code>false</code>表示内容加载完成，此时会隐藏占位图，并显示<code>Skeleton</code>的子组件。</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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-skeleton</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span>,\n },\n <span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">loading</span>: <span class="hljs-literal">false</span>,\n });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>row</td><td>段落占位图行数</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>row-width</td><td>段落占位图宽度，可传数组来设置每一行的宽度</td><td><em>string | string[]</em></td><td><code>100%</code></td></tr><tr><td>title</td><td>是否显示标题占位图</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>title-width</td><td>标题占位图宽度</td><td><em>string | number</em></td><td><code>40%</code></td></tr><tr><td>avatar</td><td>是否显示头像占位图</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>avatar-size</td><td>头像占位图大小</td><td><em>string | number</em></td><td><code>32px</code></td></tr><tr><td>avatar-shape</td><td>头像占位图形状，可选值为<code>square</code></td><td><em>string</em></td><td><code>round</code></td></tr><tr><td>loading</td><td>是否显示占位图，传<code>false</code>时会展示子组件内容</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>animate</td><td>是否开启动画</td><td><em>boolean</em></td><td><code>true</code></td></tr></tbody></table></div>',9)],Ea={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fa,Na)))},La={class:"van-doc-markdown-body"},Ua=[t('<h1>Slider 滑块</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>滑动输入条，用于在给定的范围内选择一个值。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-ben-yong-fa" tabindex="-1">基本用法</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,\n <span class="hljs-attr">title</span>: <span class="hljs-string">`当前值：<span class="hljs-subst">${event.detail}</span>`</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shuang-hua-kuai" tabindex="-1">双滑块</h3><p>添加 <code>range</code> 属性就可以开启双滑块模式，确保 <code>value</code> 的值是一个数组。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,\n <span class="hljs-attr">title</span>: <span class="hljs-string">`当前值：<span class="hljs-subst">${event.detail}</span>`</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-xuan-ze-fan-wei" tabindex="-1">指定选择范围</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>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong" tabindex="-1">禁用</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-bu-chang" tabindex="-1">指定步长</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">自定义样式</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-an-niu" tabindex="-1">自定义按钮</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>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-slider</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">currentValue</span>: <span class="hljs-number">50</span>,\n },\n\n <span class="hljs-title function_">onDrag</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">currentValue</span>: event.<span class="hljs-property">detail</span>.<span class="hljs-property">value</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="chui-zhi-fang-xiang" tabindex="-1">垂直方向</h3><p>设置 <code>vertical</code> 属性后，滑块会垂直展示，且高度为 100% 父元素高度。</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>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-slider</span>\n <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;{{ [10, 50] }}&quot;</span>\n <span class="hljs-attr">range</span>\n <span class="hljs-attr">vertical</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-left: 100px;&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,\n <span class="hljs-attr">title</span>: <span class="hljs-string">`当前值：<span class="hljs-subst">${event.detail}</span>`</span>,\n });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>当前进度百分比，在双滑块模式下为数组格式</td><td><em>number | number[]</em></td><td><code>0</code></td></tr><tr><td>disabled</td><td>是否禁用滑块</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>max</td><td>最大值</td><td><em>number</em></td><td><code>100</code></td></tr><tr><td>min</td><td>最小值</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>step</td><td>步长</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>bar-height</td><td>进度条高度，默认单位为 <code>px</code></td><td><em>string | number</em></td><td><code>2px</code></td></tr><tr><td>active-color</td><td>进度条激活态颜色</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>进度条默认颜色</td><td><em>string</em></td><td><code>#e5e5e5</code></td></tr><tr><td>use-slot-button</td><td>是否使用按钮插槽</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>range <code>v1.8.4</code></td><td>是否开启双滑块模式</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>vertical <code>v1.8.5</code></td><td>是否垂直展示</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:drag</td><td>拖动进度条时触发</td><td>event.detail.value: 当前进度</td></tr><tr><td>bind:change</td><td>进度值改变后触发</td><td>event.detail: 当前进度</td></tr><tr><td>bind:drag-start</td><td>开始拖动时触发</td><td>-</td></tr><tr><td>bind:drag-end</td><td>结束拖动时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>名称</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>button</td><td>自定义滑块按钮</td><td><em>{ value: number }</em></td></tr><tr><td>left-button <code>v1.8.4</code></td><td>自定义左侧滑块按钮（双滑块模式下）</td><td><em>{ value: number }</em></td></tr><tr><td>right-button <code>v1.8.4</code></td><td>自定义右侧滑块按钮 （双滑块模式下）</td><td><em>{ value: number }</em></td></tr></tbody></table></div>',17)],Ra={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",La,Ua)))},Va={class:"van-doc-markdown-body"},Ga=[t('<h1>Stepper 步进器</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过<code>value</code>设置输入值，可以通过<code>change</code>事件监听到输入值的变化。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(event.<span class="hljs-property">detail</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="bu-chang-she-zhi" tabindex="-1">步长设置</h3><p>通过<code>step</code>属性设置每次点击增加或减少按钮时变化的值，默认为<code>1</code>。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shu-ru-fan-wei" tabindex="-1">限制输入范围</h3><p>通过<code>min</code>和<code>max</code>属性限制输入值的范围。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shu-ru-zheng-shu" tabindex="-1">限制输入整数</h3><p>设置<code>integer</code>属性后，输入框将限制只能输入整数。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">禁用状态</h3><p>通过设置<code>disabled</code>属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="guan-bi-chang-an" tabindex="-1">关闭长按</h3><p>通过设置<code>long-press</code>属性决定步进器是否开启长按手势。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="gu-ding-xiao-shu-wei-shu" tabindex="-1">固定小数位数</h3><p>通过设置<code>decimal-length</code>属性可以保留固定的小数位数。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-bian-geng" tabindex="-1">异步变更</h3><p>如果需要异步地修改输入框的值，可以设置<code>async-change</code>属性，并在<code>change</code>事件中手动修改<code>value</code>。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">value</span>: <span class="hljs-number">1</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">value</span>) {\n <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> });\n\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {\n <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">clear</span>();\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ value });\n }, <span class="hljs-number">500</span>);\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">自定义大小</h3><p>通过<code>input-width</code>属性设置输入框宽度，通过<code>button-size</code>属性设置按钮大小和输入框高度。</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>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>在表单内提交时的标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>value</td><td>输入值</td><td><em>string | number</em></td><td>最小值</td></tr><tr><td>min</td><td>最小值</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>max</td><td>最大值</td><td><em>string | number</em></td><td>-</td></tr><tr><td>step</td><td>步长</td><td><em>string | number</em></td><td><code>1</code></td></tr><tr><td>integer</td><td>是否只允许输入整数</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disable-input</td><td>是否禁用输入框</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>async-change</td><td>是否开启异步变更，开启后需要手动控制输入值</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>input-width</td><td>输入框宽度，默认单位为 <code>px</code></td><td><em>string | number</em></td><td><code>32px</code></td></tr><tr><td>button-size</td><td>按钮大小，默认单位为 <code>px</code>，输入框高度会和按钮大小保持一致</td><td><em>string | number</em></td><td><code>28px</code></td></tr><tr><td>show-plus</td><td>是否显示增加按钮</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>show-minus</td><td>是否显示减少按钮</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>decimal-length</td><td>固定显示的小数位数</td><td><em>number</em></td><td>-</td></tr><tr><td>theme</td><td>样式风格，可选值为 <code>round</code></td><td><em>string</em></td><td>-</td></tr><tr><td>disable-plus</td><td>是否禁用增加按钮</td><td><em>boolean</em></td><td>-</td></tr><tr><td>disable-minus</td><td>是否禁用减少按钮</td><td><em>boolean</em></td><td>-</td></tr><tr><td>long-press</td><td>是否开启长按手势</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>always-embed <code>v1.9.3</code></td><td>强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)</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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:change</td><td>当绑定值变化时触发的事件</td><td>event.detail: 当前输入的值</td></tr><tr><td>bind:overlimit</td><td>点击不可用的按钮时触发</td><td>-</td></tr><tr><td>bind:plus</td><td>点击增加按钮时触发</td><td>-</td></tr><tr><td>bind:minus</td><td>点击减少按钮时触发</td><td>-</td></tr><tr><td>bind:focus</td><td>输入框聚焦时触发</td><td>-</td></tr><tr><td>bind:blur</td><td>输入框失焦时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>plus</td><td>加号按钮</td></tr><tr><td>minus</td><td>减号按钮</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>input-class</td><td>输入框样式类</td></tr><tr><td>plus-class</td><td>加号按钮样式类</td></tr><tr><td>minus-class</td><td>减号按钮样式类</td></tr></tbody></table></div>',18)],Oa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Va,Ga)))},Ma={class:"van-doc-markdown-body"},Wa=[t('<h1>Steps 步骤条</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">steps</span>: [\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤一&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤二&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤三&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤四&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yang-shi" tabindex="-1">自定义样式</h3><p>可以通过 <code>active-icon</code> 和 <code>active-color</code> 属性设置激活状态下的图标和颜色。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-steps</span>\n <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span>\n <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>\n <span class="hljs-attr">active-icon</span>=<span class="hljs-string">&quot;success&quot;</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#38f&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">自定义图标</h3><p>可以通过 <code>inactiveIcon</code> 和 <code>activeIcon</code> 属性分别设置每一项的图标。</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>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">steps</span>: [\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤一&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;location-o&#39;</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;success&#39;</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤二&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;like-o&#39;</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;plus&#39;</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤三&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;star-o&#39;</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;cross&#39;</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;步骤四&#39;</span>,\n <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;描述信息&#39;</span>,\n <span class="hljs-attr">inactiveIcon</span>: <span class="hljs-string">&#39;phone-o&#39;</span>,\n <span class="hljs-attr">activeIcon</span>: <span class="hljs-string">&#39;fail&#39;</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shu-xiang-bu-zou-tiao" tabindex="-1">竖向步骤条</h3><p>可以通过设置<code>direction</code>属性来改变步骤条的显示方式。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-steps</span>\n <span class="hljs-attr">steps</span>=<span class="hljs-string">&quot;{{ steps }}&quot;</span>\n <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>\n <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;vertical&quot;</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n/&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>active</td><td>当前步骤</td><td><em>number</em></td><td>0</td></tr><tr><td>direction</td><td>显示方向，可选值为 <code>horizontal</code> <code>vertical</code></td><td><em>string</em></td><td><code>horizontal</code></td></tr><tr><td>active-color</td><td>激活状态颜色</td><td><em>string</em></td><td><code>#07c160</code></td></tr><tr><td>inactive-color</td><td>未激活状态颜色</td><td><em>string</em></td><td><code>#969799</code></td></tr><tr><td>active-icon</td><td>激活状态底部图标，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td><code>checked</code></td></tr><tr><td>inactive-icon</td><td>未激活状态底部图标，可选值见 <a href="#/icon">Icon 组件</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>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:click-step</td><td>点击步骤时触发的事件</td><td>event.detail:当前步骤的索引</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>desc-class</td><td>描述信息样式类</td></tr></tbody></table></div>',12)],$a={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ma,Wa)))},Ha={class:"van-doc-markdown-body"},Ka=[t('<h1>Sticky 粘性布局</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>Sticky 组件与 CSS 中<code>position: sticky</code>属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>将内容包裹在<code>Sticky</code>组件内即可。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-sticky</span>&gt;</span>\n <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>基础用法<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="xi-ding-ju-chi" tabindex="-1">吸顶距离</h3><p>通过<code>offset-top</code>属性可以设置组件在吸顶时与顶部的距离。</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>\n <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>吸顶距离<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zhi-ding-rong-qi" tabindex="-1">指定容器</h3><p>通过<code>container</code>属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。</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>\n <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>\n <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>指定容器<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">container</span>: <span class="hljs-literal">null</span>,\n },\n\n <span class="hljs-title function_">onReady</span>(<span class="hljs-params"></span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <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>),\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="qian-tao-zai-scroll-view-nei-shi-yong" tabindex="-1">嵌套在 scroll-view 内使用</h3><p>通过 <code>scroll-top</code> 与 <code>offset-top</code> 属性可以实现在 scroll-view 内嵌套使用。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">scroll-view</span>\n <span class="hljs-attr">bind:scroll</span>=<span class="hljs-string">&quot;onScroll&quot;</span>\n <span class="hljs-attr">scroll-y</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;scroller&quot;</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 200px;&quot;</span>\n&gt;</span>\n <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>\n <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>\n <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>嵌套在 scroll-view 内<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-sticky</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">scroll-view</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">scrollTop</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">offsetTop</span>: <span class="hljs-number">0</span>,\n },\n\n <span class="hljs-title function_">onScroll</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">createSelectorQuery</span>()\n .<span class="hljs-title function_">select</span>(<span class="hljs-string">&#39;#scroller&#39;</span>)\n .<span class="hljs-title function_">boundingClientRect</span>(<span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">scrollTop</span>: event.<span class="hljs-property">detail</span>.<span class="hljs-property">scrollTop</span>,\n <span class="hljs-attr">offsetTop</span>: res.<span class="hljs-property">top</span>,\n });\n })\n .<span class="hljs-title function_">exec</span>();\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>offset-top</td><td>吸顶时与顶部的距离，单位<code>px</code></td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>z-index</td><td>吸顶时的 z-index</td><td><em>number</em></td><td><code>99</code></td></tr><tr><td>container</td><td>一个函数，返回容器对应的 NodesRef 节点</td><td><em>function</em></td><td>-</td></tr><tr><td>scroll-top</td><td>当前滚动区域的滚动位置，非 <code>null</code> 时会禁用页面滚动事件的监听</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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>scroll</td><td>滚动时触发</td><td>{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }</td></tr></tbody></table></div>',11)],Qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ha,Ka)))},Xa={class:"van-doc-markdown-body"},Ja=[t('<h1>SubmitBar 提交订单栏</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于展示订单金额与提交订单。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;提交订单&quot;</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">禁用状态</h3><p>禁用状态下不会触发<code>submit</code>事件。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">disabled</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;提交订单&quot;</span>\n <span class="hljs-attr">tip</span>=<span class="hljs-string">&quot;您的收货地址不支持同城送, 我们已为您推荐快递&quot;</span>\n <span class="hljs-attr">tip-icon</span>=<span class="hljs-string">&quot;info-o&quot;</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">加载状态</h3><p>加载状态下不会触发<code>submit</code>事件。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">loading</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;提交订单&quot;</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onSubmit&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">高级用法</h3><p>通过插槽插入自定义内容。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-submit-bar</span>\n <span class="hljs-attr">price</span>=<span class="hljs-string">&quot;{{ 3050 }}&quot;</span>\n <span class="hljs-attr">button-text</span>=<span class="hljs-string">&quot;提交订单&quot;</span>\n <span class="hljs-attr">bind:submit</span>=<span class="hljs-string">&quot;onClickButton&quot;</span>\n <span class="hljs-attr">tip</span>=<span class="hljs-string">&quot;{{ true }}&quot;</span>\n&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n <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>您的收货地址不支持同城送, <span class="hljs-tag">&lt;<span class="hljs-name">text</span>&gt;</span>修改地址<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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-submit-bar</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>price</td><td>价格（单位分）</td><td><em>number</em></td><td>-</td></tr><tr><td>label</td><td>价格文案</td><td><em>string</em></td><td><code>合计：</code></td></tr><tr><td>suffix-label</td><td>价格右侧文案</td><td><em>string</em></td><td>-</td></tr><tr><td>button-text</td><td>按钮文字</td><td><em>string</em></td><td>-</td></tr><tr><td>button-type</td><td>按钮类型</td><td><em>string</em></td><td><code>danger</code></td></tr><tr><td>tip</td><td>提示文案</td><td><em>string | boolean</em></td><td>-</td></tr><tr><td>tip-icon</td><td>图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>是否禁用按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>是否显示加载中的按钮</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>currency</td><td>货币符号</td><td><em>string</em></td><td><code>¥</code></td></tr><tr><td>safe-area-inset-bottom</td><td>是否为 iPhoneX 留出底部安全距离</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>decimal-length</td><td>价格小数点后位数</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>submit</td><td>按钮点击事件回调</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义订单栏左侧内容</td></tr><tr><td>top</td><td>自定义订单栏上方内容</td></tr><tr><td>tip</td><td>提示文案中的额外操作和说明</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>price-class</td><td>价格样式类</td></tr><tr><td>button-class</td><td>按钮样式类</td></tr><tr><td>bar-class</td><td>订单栏样式类</td></tr></tbody></table></div>',13)],Za={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xa,Ja)))},Ya={class:"van-doc-markdown-body"},st=[t('<h1>SwipeCell 滑动单元格</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>可以左右滑动来展示操作按钮的单元格组件。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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>\n <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>选择<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n <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>删除<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-guan-bi" tabindex="-1">异步关闭</h3><p>当开启<code>async-close</code>时， 通过绑定<code>close</code>事件，可以自定义两侧滑动内容点击时的关闭行为。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-swipe-cell</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;swipe-cell&quot;</span>\n <span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n <span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n <span class="hljs-attr">async-close</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n <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>选择<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n <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>删除<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { position, instance } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-keyword">switch</span> (position) {\n <span class="hljs-keyword">case</span> <span class="hljs-string">&#39;left&#39;</span>:\n <span class="hljs-keyword">case</span> <span class="hljs-string">&#39;cell&#39;</span>:\n instance.<span class="hljs-title function_">close</span>();\n <span class="hljs-keyword">break</span>;\n <span class="hljs-keyword">case</span> <span class="hljs-string">&#39;right&#39;</span>:\n <span class="hljs-title class_">Dialog</span>.<span class="hljs-title function_">confirm</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;确定删除吗？&#39;</span>,\n }).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> {\n instance.<span class="hljs-title function_">close</span>();\n });\n <span class="hljs-keyword">break</span>;\n }\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zhu-dong-da-kai" tabindex="-1">主动打开</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-swipe-cell</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;swipe-cell2&quot;</span>\n <span class="hljs-attr">right-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n <span class="hljs-attr">left-width</span>=<span class="hljs-string">&quot;{{ 65 }}&quot;</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;示例&quot;</span>\n <span class="hljs-attr">bind:open</span>=<span class="hljs-string">&quot;onOpen&quot;</span>\n&gt;</span>\n <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>选择<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell-group</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-cell</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;单元格&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;内容&quot;</span> /&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-cell-group</span>&gt;</span>\n <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>删除<span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-swipe-cell</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onOpen</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { position, name } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-keyword">switch</span> (position) {\n <span class="hljs-keyword">case</span> <span class="hljs-string">&#39;left&#39;</span>:\n <span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span><span class="hljs-subst">${position}</span>部分展示open事件被触发`</span>,\n });\n <span class="hljs-keyword">break</span>;\n <span class="hljs-keyword">case</span> <span class="hljs-string">&#39;right&#39;</span>:\n <span class="hljs-title class_">Notify</span>({\n <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">`<span class="hljs-subst">${name}</span><span class="hljs-subst">${position}</span>部分展示open事件被触发`</span>,\n });\n <span class="hljs-keyword">break</span>;\n }\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>标识符，可以在 close 事件的参数中获取到</td><td><em>string | number</em></td><td>-</td></tr><tr><td>left-width</td><td>左侧滑动区域宽度</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>right-width</td><td>右侧滑动区域宽度</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>async-close</td><td>是否异步关闭</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled <code>v1.3.4</code></td><td>是否禁用滑动</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义显示内容</td></tr><tr><td>left</td><td>左侧滑动内容</td></tr><tr><td>right</td><td>右侧滑动内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>click</td><td>点击时触发</td><td>关闭时的点击位置 (<code>left</code> <code>right</code> <code>cell</code> <code>outside</code>)</td></tr><tr><td>close</td><td>关闭时触发</td><td>{ position: ‘left’ | ‘right’ , instance , name: string }</td></tr><tr><td>open</td><td>打开时触发</td><td>{ position: ‘left’ | ‘right’ , name: string }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="close-can-shu" tabindex="-1">close 参数</h3><table><thead><tr><th>参数</th><th>类型</th><th>说明</th></tr></thead><tbody><tr><td>position</td><td><em>string</em></td><td>关闭时的点击位置 (<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 实例</td></tr><tr><td>name</td><td>标识符</td><td><em>string</em></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><p>通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法</p><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>open</td><td>position: <code>left | right</code></td><td>-</td><td>打开单元格侧边栏</td></tr><tr><td>close</td><td>-</td><td>-</td><td>收起单元格侧边栏</td></tr></tbody></table></div>',13)],at={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ya,st)))},tt={class:"van-doc-markdown-body"},nt=[t('<h1>Switch 开关</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于在打开和关闭状态之间进行切换。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">{ detail }</span>) {\n <span class="hljs-comment">// 需要手动对 checked 状态进行更新</span>\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">checked</span>: detail });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-zhuang-tai" tabindex="-1">禁用状态</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>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-zhuang-tai" tabindex="-1">加载状态</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-da-xiao" tabindex="-1">自定义大小</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>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-switch</span>\n <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;{{ checked }}&quot;</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;#ee0a24&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="yi-bu-kong-zhi" tabindex="-1">异步控制</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">checked</span>: <span class="hljs-literal">true</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">{ detail }</span>) {\n wx.<span class="hljs-title function_">showModal</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;提示&#39;</span>,\n <span class="hljs-attr">content</span>: <span class="hljs-string">&#39;是否切换开关？&#39;</span>,\n <span class="hljs-attr">success</span>: <span class="hljs-function">(<span class="hljs-params">res</span>) =&gt;</span> {\n <span class="hljs-keyword">if</span> (res.<span class="hljs-property">confirm</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ <span class="hljs-attr">checked2</span>: detail });\n }\n },\n });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>在表单内提交时的标识符</td><td><em>string</em></td><td>-</td></tr><tr><td>checked</td><td>开关选中状态</td><td><em>any</em></td><td><code>false</code></td></tr><tr><td>loading</td><td>是否为加载状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否为禁用状态</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>size</td><td>开关尺寸</td><td><em>string</em></td><td><code>30px</code></td></tr><tr><td>active-color</td><td>打开时的背景色</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>关闭时的背景色</td><td><em>string</em></td><td><code>#fff</code></td></tr><tr><td>active-value</td><td>打开时的值</td><td><em>any</em></td><td><code>true</code></td></tr><tr><td>inactive-value</td><td>关闭时的值</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:change</td><td>开关状态切换回调</td><td>event.detail: 是否选中开关</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>node-class</td><td>圆点样式类</td></tr></tbody></table></div>',14)],lt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",tt,nt)))},et={class:"van-doc-markdown-body"},pt=[t('<h1>Tab 标签页</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>选项卡组件，用于在不同的内容区域之间进行切换。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过<code>active</code>设定当前激活标签对应的索引值，默认情况下启用第一个标签。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 4&quot;</span>&gt;</span>内容 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">1</span>,\n },\n\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`切换到标签 <span class="hljs-subst">${event.detail.name}</span>`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tong-guo-ming-cheng-pi-pei" tabindex="-1">通过名称匹配</h3><p>在标签指定<code>name</code>属性的情况下，<code>active</code>的值为当前标签的<code>name</code>（此时无法通过索引值来匹配标签）。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;a&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;b&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;c&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="heng-xiang-gun-dong" tabindex="-1">横向滚动</h3><p>多于 5 个标签时，Tab 可以横向滚动。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 4&quot;</span>&gt;</span>内容 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 5&quot;</span>&gt;</span>内容 5<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 6&quot;</span>&gt;</span>内容 6<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="jin-yong-biao-qian" tabindex="-1">禁用标签</h3><p>设置<code>disabled</code>属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在<code>van-tabs</code>上监听<code>disabled</code>事件。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClickDisabled</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`标签 <span class="hljs-subst">${event.detail.name}</span> 已被禁用`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="yang-shi-feng-ge" tabindex="-1">样式风格</h3><p><code>Tab</code>支持两种样式风格：<code>line</code>和<code>card</code>，默认为<code>line</code>样式，可以通过<code>type</code>属性修改样式风格。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="dian-ji-shi-jian" tabindex="-1">点击事件</h3><p>可以在<code>van-tabs</code>上绑定<code>click</code>事件，在回调参数的<code>event.detail</code>中可以取得被点击标签的标题和标识符。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`点击标签 <span class="hljs-subst">${event.detail.name}</span>`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="nian-xing-bu-ju" tabindex="-1">粘性布局</h3><p>通过<code>sticky</code>属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 4&quot;</span>&gt;</span>内容 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="qie-huan-dong-hua" tabindex="-1">切换动画</h3><p>可以通过<code>animated</code>来设置是否启用切换 tab 时的动画。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 4&quot;</span>&gt;</span>内容 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="hua-dong-qie-huan" tabindex="-1">滑动切换</h3><p>通过<code>swipeable</code>属性可以开启滑动切换标签页。</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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 4&quot;</span>&gt;</span>内容 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="qian-tao-popup" tabindex="-1">嵌套 popup</h3><p>如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。</p><p>此时可以通过使用 <code>wx:if</code> 手动控制 van-tabs 的渲染来规避这种场景。</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>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 1&quot;</span>&gt;</span>内容 1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 2&quot;</span>&gt;</span>内容 2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 3&quot;</span>&gt;</span>内容 3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">van-tab</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;标签 4&quot;</span>&gt;</span>内容 4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tab</span>&gt;</span>\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-tabs</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-popup</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>样式风格，可选值为<code>card</code></td><td><em>string</em></td><td><code>line</code></td></tr><tr><td>color</td><td>标签主题色</td><td><em>string</em></td><td><code>#ee0a24</code></td></tr><tr><td>active</td><td>当前选中标签的标识符</td><td><em>string | number</em></td><td><code>0</code></td></tr><tr><td>duration</td><td>动画时间，单位秒</td><td><em>number</em></td><td><code>0.3</code></td></tr><tr><td>line-width</td><td>底部条宽度，默认单位<code>px</code></td><td><em>string | number</em></td><td><code>40px</code></td></tr><tr><td>line-height</td><td>底部条高度，默认单位<code>px</code></td><td><em>string | number</em></td><td><code>3px</code></td></tr><tr><td>animated</td><td>是否开启切换标签内容时的转场动画</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>是否展示外边框，仅在 <code>line</code> 风格下生效</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>ellipsis</td><td>是否省略过长的标题文字</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>sticky</td><td>是否使用粘性定位布局</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>swipeable</td><td>是否开启手势滑动切换</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>lazy-render</td><td>是否开启标签页内容延迟渲染</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>offset-top</td><td>粘性定位布局下与顶部的最小距离，单位<code>px</code></td><td><em>number</em></td><td>-</td></tr><tr><td>swipe-threshold</td><td>滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动</td><td><em>number</em></td><td><code>5</code></td></tr><tr><td>title-active-color</td><td>标题选中态颜色</td><td><em>string</em></td><td>-</td></tr><tr><td>title-inactive-color</td><td>标题默认态颜色</td><td><em>string</em></td><td>-</td></tr><tr><td>z-index</td><td>z-index 层级</td><td><em>number</em></td><td><code>1</code></td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tab-props" tabindex="-1">Tab Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>标签名称，作为匹配的标识符</td><td><em>string | number</em></td><td>标签的索引值</td></tr><tr><td>title</td><td>标题</td><td><em>string</em></td><td>-</td></tr><tr><td>disabled</td><td>是否禁用标签</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>dot</td><td>是否显示小红点</td><td><em>boolean</em></td><td>-</td></tr><tr><td>info</td><td>图标右上角提示信息</td><td><em>string | number</em></td><td>-</td></tr><tr><td>title-style</td><td>自定义标题样式</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>nav-left</td><td>标题左侧内容</td></tr><tr><td>nav-right</td><td>标题右侧内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tab-slot" tabindex="-1">Tab Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>标签页内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabs-event" tabindex="-1">Tabs Event</h3><table><thead><tr><th>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:click</td><td>点击标签时触发</td><td>name：标签标识符，title：标题</td></tr><tr><td>bind:change</td><td>当前激活的标签改变时触发</td><td>name：标签标识符，title：标题</td></tr><tr><td>bind:disabled</td><td>点击被禁用的标签时触发</td><td>name：标签标识符，title：标题</td></tr><tr><td>bind:scroll</td><td>滚动时触发</td><td>{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>nav-class</td><td>标签栏样式类</td></tr><tr><td>tab-class</td><td>标签样式类</td></tr><tr><td>tab-active-class</td><td>标签激活态样式类</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><p>通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。</p><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>resize</td><td>-</td><td>-</td><td>外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘</td></tr></tbody></table></div><h2 id="chang-jian-wen-ti" tabindex="-1">常见问题</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">组件从隐藏状态切换到显示状态时，底部条位置错误？</h3><p>Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。</p><h4 id="jie-jue-fang-fa" tabindex="-1">解决方法</h4><p>方法一，使用 <code>wx:if</code> 来控制组件展示，使组件重新初始化。</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>\n</code></pre><p>方法二，调用组件的 resize 方法来主动触发重绘。</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>\n</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>();\n</code></pre></div>',24)],dt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",et,pt)))},ct={class:"van-doc-markdown-body"},ot=[t('<h1>Tabbar 标签栏</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>底部导航栏，用于在不同页面之间进行切换。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</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>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-comment">// event.detail 的值为当前选中项的索引</span>\n <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> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tong-guo-ming-cheng-pi-pei" tabindex="-1">通过名称匹配</h3><p>在标签指定<code>name</code>属性的情况下，<code>v-model</code>的值为当前标签的<code>name</code>。</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>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-string">&#39;home&#39;</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <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> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xian-shi-hui-biao" tabindex="-1">显示徽标</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>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-tu-biao" tabindex="-1">自定义图标</h3><p>可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。</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>\n <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>\n <span class="hljs-tag">&lt;<span class="hljs-name">image</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon&quot;</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ icon.normal }}&quot;</span>\n <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;aspectFit&quot;</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 30px; height: 18px;&quot;</span>\n /&gt;</span>\n <span class="hljs-tag">&lt;<span class="hljs-name">image</span>\n <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;icon-active&quot;</span>\n <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;{{ icon.active }}&quot;</span>\n <span class="hljs-attr">mode</span>=<span class="hljs-string">&quot;aspectFit&quot;</span>\n <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 30px; height: 18px;&quot;</span>\n /&gt;</span>\n 自定义\n <span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">icon</span>: {\n <span class="hljs-attr">normal</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/user-inactive.png&#39;</span>,\n <span class="hljs-attr">active</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/user-active.png&#39;</span>,\n },\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <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> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tabbar</span>\n <span class="hljs-attr">active</span>=<span class="hljs-string">&quot;{{ active }}&quot;</span>\n <span class="hljs-attr">active-color</span>=<span class="hljs-string">&quot;#07c160&quot;</span>\n <span class="hljs-attr">inactive-color</span>=<span class="hljs-string">&quot;#000&quot;</span>\n <span class="hljs-attr">bind:change</span>=<span class="hljs-string">&quot;onChange&quot;</span>\n&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n },\n <span class="hljs-title function_">onChange</span>(<span class="hljs-params">event</span>) {\n <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> });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="qie-huan-biao-qian-shi-jian" tabindex="-1">切换标签事件</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>\n <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>标签1<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签2<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签3<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n <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>标签4<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tabbar</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">active</span>: <span class="hljs-number">0</span>,\n },\n <span class="hljs-title function_">onClick</span>(<span class="hljs-params">event</span>) {\n wx.<span class="hljs-title function_">showToast</span>({\n <span class="hljs-attr">title</span>: <span class="hljs-string">`点击标签 <span class="hljs-subst">${event.detail + <span class="hljs-number">1</span>}</span>`</span>,\n <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span>,\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="jie-he-zi-ding-yi-tabbar" tabindex="-1">结合自定义 tabBar</h3><p>请参考 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html">微信官方文档</a> 与 <a href="https://developers.weixin.qq.com/s/vaXgTsmQ7hnm">代码片段</a>。</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>active</td><td>当前选中标签的索引</td><td><em>number</em></td><td>-</td></tr><tr><td>fixed</td><td>是否固定在底部</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>placeholder</td><td>固定在底部时，是否在标签位置生成一个等高的占位元素</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>border</td><td>是否展示外边框</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>z-index</td><td>元素 z-index</td><td><em>number</em></td><td><code>1</code></td></tr><tr><td>active-color</td><td>选中标签的颜色</td><td><em>string</em></td><td><code>#1989fa</code></td></tr><tr><td>inactive-color</td><td>未选中标签的颜色</td><td><em>string</em></td><td><code>#7d7e80</code></td></tr><tr><td>safe-area-inset-bottom</td><td>是否为 iPhoneX 留出底部安全距离</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:change</td><td>切换标签时触发</td><td>event.detail: 当前选中标签的名称或索引值</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbaritem-props" tabindex="-1">TabbarItem Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>标签名称，作为匹配的标识符</td><td><em>string | number</em></td><td>当前标签的索引值</td></tr><tr><td>icon</td><td>图标名称或图片链接，可选值见 <a href="#/icon">Icon 组件</a></td><td><em>string</em></td><td>-</td></tr><tr><td>icon-prefix</td><td>图标类名前缀，同 Icon 组件的 <a href="#/icon#props">class-prefix 属性</a></td><td><em>string</em></td><td><code>van-icon</code></td></tr><tr><td>dot</td><td>是否显示小红点</td><td><em>boolean</em></td><td>-</td></tr><tr><td>info</td><td>图标右上角提示信息</td><td><em>string | number</em></td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="tabbaritem-slot" tabindex="-1">TabbarItem Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>icon</td><td>未选中时的图标</td></tr><tr><td>icon-active</td><td>选中时的图标</td></tr></tbody></table></div>',16)],it={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ct,ot)))},ht={class:"van-doc-markdown-body"},rt=[t('<h1>Tag 标签</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于标记关键词和概括主要内容。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>通过 <code>type</code> 属性控制标签颜色，默认为灰色。</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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="kong-xin-yang-shi" tabindex="-1">空心样式</h3><p>设置 <code>plain</code> 属性设置为空心样式。</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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="yuan-jiao-yang-shi" tabindex="-1">圆角样式</h3><p>通过 <code>round</code> 设置为圆角样式。</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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="biao-ji-yang-shi" tabindex="-1">标记样式</h3><p>通过 <code>mark</code> 设置为标记样式(半圆角)。</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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-yan-se" tabindex="-1">自定义颜色</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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="biao-qian-da-xiao" tabindex="-1">标签大小</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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<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>标签<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="ke-guan-bi-biao-qian" tabindex="-1">可关闭标签</h3><p>添加 <code>closeable</code> 属性表示标签是可关闭的，关闭标签时会触发 <code>close</code> 事件，在 <code>close</code> 事件中可以执行隐藏标签的逻辑。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span>\n <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show.primary }}&quot;</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;primary&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n 标签\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">van-tag</span>\n <span class="hljs-attr">wx:if</span>=<span class="hljs-string">&quot;{{ show.success }}&quot;</span>\n <span class="hljs-attr">closeable</span>\n <span class="hljs-attr">size</span>=<span class="hljs-string">&quot;medium&quot;</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;success&quot;</span>\n <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;success&quot;</span>\n <span class="hljs-attr">bind:close</span>=<span class="hljs-string">&quot;onClose&quot;</span>\n&gt;</span>\n 标签\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tag</span>&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">show</span>: {\n <span class="hljs-attr">primary</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">success</span>: <span class="hljs-literal">true</span>,\n },\n },\n <span class="hljs-title function_">onClose</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n [<span class="hljs-string">`show.<span class="hljs-subst">${event.target.id}</span>`</span>]: <span class="hljs-literal">false</span>,\n });\n },\n});\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>类型，可选值为 <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>大小, 可选值为 <code>large</code> <code>medium</code></td><td><em>string</em></td><td>-</td></tr><tr><td>color</td><td>标签颜色</td><td><em>string</em></td><td>-</td></tr><tr><td>plain</td><td>是否为空心样式</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>round</td><td>是否为圆角样式</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>mark</td><td>是否为标记样式</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>text-color</td><td>文本颜色，优先级高于 <code>color</code> 属性</td><td><em>string</em></td><td><code>white</code></td></tr><tr><td>closeable</td><td>是否为可关闭标签</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义 Tag 显示内容</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>close</td><td>关闭标签时触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr></tbody></table></div>',16)],ut={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ht,rt)))},gt={class:"van-doc-markdown-body"},jt=[t('<h1>Toast 轻提示</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="wen-zi-ti-shi" tabindex="-1">文字提示</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;path/to/@vant/weapp/dist/toast/toast&#39;</span>;\n\n<span class="hljs-title class_">Toast</span>(<span class="hljs-string">&#39;我是提示文案，建议不超过十五字~&#39;</span>);\n</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>\n</code></pre></div><div class="van-doc-card"><h3 id="jia-zai-ti-shi" tabindex="-1">加载提示</h3><p>使用 <code>Toast.loading</code> 方法展示加载提示，通过 <code>forbidClick</code> 属性可以禁用背景点击，通过 <code>loadingType</code> 属性可以自定义加载图标类型。</p><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;加载中...&#39;</span>,\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n});\n\n<span class="hljs-comment">// 自定义加载图标</span>\n<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">loading</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;加载中...&#39;</span>,\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">loadingType</span>: <span class="hljs-string">&#39;spinner&#39;</span>,\n});\n</code></pre></div><div class="van-doc-card"><h3 id="cheng-gong-shi-bai-ti-shi" tabindex="-1">成功/失败提示</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;成功文案&#39;</span>);\n<span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">fail</span>(<span class="hljs-string">&#39;失败文案&#39;</span>);\n</code></pre></div><div class="van-doc-card"><h3 id="dong-tai-geng-xin-ti-shi" tabindex="-1">动态更新提示</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>({\n <span class="hljs-attr">duration</span>: <span class="hljs-number">0</span>, <span class="hljs-comment">// 持续展示 toast</span>\n <span class="hljs-attr">forbidClick</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;倒计时 3 秒&#39;</span>,\n <span class="hljs-attr">selector</span>: <span class="hljs-string">&#39;#custom-selector&#39;</span>,\n});\n\n<span class="hljs-keyword">let</span> second = <span class="hljs-number">3</span>;\n<span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =&gt;</span> {\n second--;\n <span class="hljs-keyword">if</span> (second) {\n toast.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">message</span>: <span class="hljs-string">`倒计时 <span class="hljs-subst">${second}</span> 秒`</span>,\n });\n } <span class="hljs-keyword">else</span> {\n <span class="hljs-built_in">clearInterval</span>(timer);\n <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">clear</span>();\n }\n}, <span class="hljs-number">1000</span>);\n</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>\n</code></pre></div><div class="van-doc-card"><h3 id="onclose-hui-diao-han-shu" tabindex="-1">OnClose 回调函数</h3><pre><code class="language-javascript"><span class="hljs-title class_">Toast</span>({\n <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;success&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;提交成功&#39;</span>,\n <span class="hljs-attr">onClose</span>: <span class="hljs-function">() =&gt;</span> {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#39;执行OnClose函数&#39;</span>);\n },\n});\n</code></pre></div><h2 id="api" tabindex="-1">API</h2><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">方法</h3><table><thead><tr><th>方法名</th><th>参数</th><th>返回值</th><th>介绍</th></tr></thead><tbody><tr><td>Toast</td><td><code>options | message</code></td><td>toast 实例</td><td>展示提示</td></tr><tr><td>Toast.loading</td><td><code>options | message</code></td><td>toast 实例</td><td>展示加载提示</td></tr><tr><td>Toast.success</td><td><code>options | message</code></td><td>toast 实例</td><td>展示成功提示</td></tr><tr><td>Toast.fail</td><td><code>options | message</code></td><td>toast 实例</td><td>展示失败提示</td></tr><tr><td>Toast.clear</td><td><code>clearAll</code></td><td><code>void</code></td><td>关闭提示</td></tr><tr><td>Toast.setDefaultOptions</td><td><code>options</code></td><td><code>void</code></td><td>修改默认配置，对所有 Toast 生效</td></tr><tr><td>Toast.resetDefaultOptions</td><td>-</td><td><code>void</code></td><td>重置默认配置，对所有 Toast 生效</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="options" tabindex="-1">Options</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>提示类型，可选值为 <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>位置，可选值为 <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>内容</td><td><em>string</em></td><td><code>&#39;&#39;</code></td></tr><tr><td>mask</td><td>是否显示遮罩层</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>forbidClick</td><td>是否禁止背景点击</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>loadingType</td><td>加载图标类型, 可选值为 <code>spinner</code></td><td><em>string</em></td><td><code>circular</code></td></tr><tr><td>zIndex</td><td>z-index 层级</td><td><em>number</em></td><td><code>1000</code></td></tr><tr><td>duration</td><td>展示时长(ms)，值为 0 时，toast 不会消失</td><td><em>number</em></td><td><code>2000</code></td></tr><tr><td>selector</td><td>自定义选择器</td><td><em>string</em></td><td><code>van-toast</code></td></tr><tr><td>context</td><td>选择器的选择范围，可以传入自定义组件的 this 作为上下文</td><td><em>object</em></td><td>当前页面</td></tr><tr><td>onClose</td><td>关闭时的回调函数</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>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义内容</td></tr></tbody></table></div>',13)],mt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gt,jt)))},vt={class:"van-doc-markdown-body"},bt=[t('<h1>Transition 动画</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>使元素从一种样式逐渐变化为另一种样式的效果。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。</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>内容<span class="hljs-tag">&lt;/<span class="hljs-name">van-transition</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="dong-hua-lei-xing" tabindex="-1">动画类型</h3><p>transition 组件内置了多种动画，可以通过<code>name</code>字段指定动画类型。</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>\n</code></pre></div><div class="van-doc-card"><h3 id="gao-ji-yong-fa" tabindex="-1">高级用法</h3><p>可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-transition</span>\n <span class="hljs-attr">show</span>=<span class="hljs-string">&quot;{{ show }}&quot;</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;&quot;</span>\n <span class="hljs-attr">duration</span>=<span class="hljs-string">&quot;{{ { enter: 300, leave: 1000 } }}&quot;</span>\n <span class="hljs-attr">enter-class</span>=<span class="hljs-string">&quot;van-enter-class&quot;</span>\n <span class="hljs-attr">enter-active-class</span>=<span class="hljs-string">&quot;van-enter-active-class&quot;</span>\n <span class="hljs-attr">leave-active-class</span>=<span class="hljs-string">&quot;van-leave-active-class&quot;</span>\n <span class="hljs-attr">leave-to-class</span>=<span class="hljs-string">&quot;van-leave-to-class&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-css"><span class="hljs-selector-class">.van-enter-active-class</span>,\n<span class="hljs-selector-class">.van-leave-active-class</span> {\n <span class="hljs-attribute">transition-property</span>: background-color, transform;\n}\n\n<span class="hljs-selector-class">.van-enter-class</span>,\n<span class="hljs-selector-class">.van-leave-to-class</span> {\n <span class="hljs-attribute">background-color</span>: red;\n <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>);\n}\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>动画类型</td><td><em>string</em></td><td><code>fade</code></td></tr><tr><td>show</td><td>是否展示组件</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>duration</td><td>动画时长，单位为毫秒</td><td><em>number | object</em></td><td><code>300</code></td></tr><tr><td>custom-style</td><td>自定义样式</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>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>bind:before-enter</td><td>进入前触发</td><td>-</td></tr><tr><td>bind:enter</td><td>进入中触发</td><td>-</td></tr><tr><td>bind:after-enter</td><td>进入后触发</td><td>-</td></tr><tr><td>bind:before-leave</td><td>离开前触发</td><td>-</td></tr><tr><td>bind:leave</td><td>离开中触发</td><td>-</td></tr><tr><td>bind:after-leave</td><td>离开后触发</td><td>-</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式类</td></tr><tr><td>enter-class</td><td>定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。</td></tr><tr><td>enter-active-class</td><td>定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。</td></tr><tr><td>enter-to-class</td><td>定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。</td></tr><tr><td>leave-class</td><td>定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。</td></tr><tr><td>leave-active-class</td><td>定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。</td></tr><tr><td>leave-to-class</td><td>定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="dong-hua-lei-xing-1" tabindex="-1">动画类型</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>fade</td><td>淡入</td></tr><tr><td>fade-up</td><td>上滑淡入</td></tr><tr><td>fade-down</td><td>下滑淡入</td></tr><tr><td>fade-left</td><td>左滑淡入</td></tr><tr><td>fade-right</td><td>右滑淡入</td></tr><tr><td>slide-up</td><td>上滑进入</td></tr><tr><td>slide-down</td><td>下滑进入</td></tr><tr><td>slide-left</td><td>左滑进入</td></tr><tr><td>slide-right</td><td>右滑进入</td></tr></tbody></table></div>',12)],qt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vt,bt)))},yt={class:"van-doc-markdown-body"},ft=[t('<h1>TreeSelect 分类选择</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于从一组相关联的数据集合中进行选择。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，详细介绍见<a href="#/quickstart#yin-ru-zu-jian">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="dan-xuan-mo-shi" tabindex="-1">单选模式</h3><p>可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tree-select</span>\n <span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>\n <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>\n <span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>\n <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>\n <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">mainActiveIndex</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">activeId</span>: <span class="hljs-literal">null</span>,\n },\n\n <span class="hljs-title function_">onClickNav</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">mainActiveIndex</span>: detail.<span class="hljs-property">index</span> || <span class="hljs-number">0</span>,\n });\n },\n\n <span class="hljs-title function_">onClickItem</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <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>;\n\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ activeId });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="duo-xuan-mo-shi" tabindex="-1">多选模式</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tree-select</span>\n <span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>\n <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>\n <span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>\n <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;{{ max }}&quot;</span>\n <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>\n <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">mainActiveIndex</span>: <span class="hljs-number">0</span>,\n <span class="hljs-attr">activeId</span>: [],\n <span class="hljs-attr">max</span>: <span class="hljs-number">2</span>,\n },\n\n <span class="hljs-title function_">onClickNav</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({\n <span class="hljs-attr">mainActiveIndex</span>: detail.<span class="hljs-property">index</span> || <span class="hljs-number">0</span>,\n });\n },\n\n <span class="hljs-title function_">onClickItem</span>(<span class="hljs-params">{ detail = {} }</span>) {\n <span class="hljs-keyword">const</span> { activeId } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;\n\n <span class="hljs-keyword">const</span> index = activeId.<span class="hljs-title function_">indexOf</span>(detail.<span class="hljs-property">id</span>);\n <span class="hljs-keyword">if</span> (index &gt; -<span class="hljs-number">1</span>) {\n activeId.<span class="hljs-title function_">splice</span>(index, <span class="hljs-number">1</span>);\n } <span class="hljs-keyword">else</span> {\n activeId.<span class="hljs-title function_">push</span>(detail.<span class="hljs-property">id</span>);\n }\n\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ activeId });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-nei-rong" tabindex="-1">自定义内容</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-tree-select</span>\n <span class="hljs-attr">items</span>=<span class="hljs-string">&quot;{{ items }}&quot;</span>\n <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;55vw&quot;</span>\n <span class="hljs-attr">main-active-index</span>=<span class="hljs-string">&quot;{{ mainActiveIndex }}&quot;</span>\n <span class="hljs-attr">active-id</span>=<span class="hljs-string">&quot;{{ activeId }}&quot;</span>\n <span class="hljs-attr">bind:click-nav</span>=<span class="hljs-string">&quot;onClickNav&quot;</span>\n <span class="hljs-attr">bind:click-item</span>=<span class="hljs-string">&quot;onClickItem&quot;</span>\n&gt;</span>\n <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>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-tree-select</span>&gt;</span>\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>items</td><td>分类显示所需的数据</td><td><em>Array</em></td><td><code>[]</code></td></tr><tr><td>height</td><td>高度，默认单位为<code>px</code></td><td><em>number | string</em></td><td><code>300</code></td></tr><tr><td>main-active-index</td><td>左侧选中项的索引</td><td><em>number</em></td><td><code>0</code></td></tr><tr><td>active-id</td><td>右侧选中项的 id，支持传入数组</td><td><em>string | number | Array</em></td><td><code>0</code></td></tr><tr><td>max</td><td>右侧项最大选中个数</td><td><em>number</em></td><td><em>Infinity</em></td></tr><tr><td>selected-icon <code>v1.5.0</code></td><td>自定义右侧栏选中状态的图标</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>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:click-nav</td><td>左侧导航点击时，触发的事件</td><td>event.detail.index：被点击的导航的索引</td></tr><tr><td>bind:click-item</td><td>右侧选择项被点击时，会触发的事件</td><td>event.detail: 该点击项的数据</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>content</td><td>自定义右侧区域内容，如果存在 items，则插入在顶部</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="items-shu-ju-jie-gou" tabindex="-1">items 数据结构</h3><p><code>items</code> 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。</p><pre><code class="language-javascript">[\n {\n <span class="hljs-comment">// 导航名称</span>\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;所有城市&#39;</span>,\n <span class="hljs-comment">// 导航名称右上角徽标，1.5.0 版本开始支持</span>\n <span class="hljs-attr">badge</span>: <span class="hljs-number">3</span>,\n <span class="hljs-comment">// 是否在导航名称右上角显示小红点，1.5.0 版本开始支持</span>\n <span class="hljs-attr">dot</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-comment">// 禁用选项</span>\n <span class="hljs-attr">disabled</span>: <span class="hljs-literal">false</span>,\n <span class="hljs-comment">// 该导航下所有的可选项</span>\n <span class="hljs-attr">children</span>: [\n {\n <span class="hljs-comment">// 名称</span>\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;温州&#39;</span>,\n <span class="hljs-comment">// id，作为匹配选中状态的标识</span>\n <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,\n <span class="hljs-comment">// 禁用选项</span>\n <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,\n },\n {\n <span class="hljs-attr">text</span>: <span class="hljs-string">&#39;杭州&#39;</span>,\n <span class="hljs-attr">id</span>: <span class="hljs-number">2</span>,\n },\n ],\n },\n];\n</code></pre></div><div class="van-doc-card"><h3 id="wai-bu-yang-shi-lei" tabindex="-1">外部样式类</h3><table><thead><tr><th>类名</th><th>说明</th></tr></thead><tbody><tr><td>main-item-class</td><td>左侧选项样式类</td></tr><tr><td>content-item-class</td><td>右侧选项样式类</td></tr><tr><td>main-active-class</td><td>左侧选项选中样式类</td></tr><tr><td>content-active-class</td><td>右侧选项选中样式类</td></tr><tr><td>main-disabled-class</td><td>左侧选项禁用样式类</td></tr><tr><td>content-disabled-class</td><td>右侧选项禁用样式类</td></tr></tbody></table></div>',13)],xt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",yt,ft)))},wt={class:"van-doc-markdown-body"},zt=[t('<h1>Uploader 文件上传</h1><div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">介绍</h3><p>用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。</p></div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">引入</h3><p>在<code>app.json</code>或<code>index.json</code>中引入组件，默认为<code>ES6</code>版本，<code>ES5</code>引入方式参见<a href="#/quickstart">快速上手</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>\n <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>\n<span class="hljs-punctuation">}</span>\n</code></pre><blockquote><p>Vant Weapp 1.0 版本开始支持此组件，升级方式参见<a href="#/quickstart">快速上手</a></p></blockquote></div><h2 id="dai-ma-yan-shi" tabindex="-1">代码演示</h2><div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">基础用法</h3><p>文件上传完毕后会触发<code>after-read</code>回调函数，获取到对应的文件的临时地址，然后再使用<code>wx.uploadFile</code>将图片上传到远程服务器上。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [],\n },\n\n <span class="hljs-title function_">afterRead</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { file } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-comment">// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式</span>\n wx.<span class="hljs-title function_">uploadFile</span>({\n <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://example.weixin.qq.com/upload&#39;</span>, <span class="hljs-comment">// 仅为示例，非真实的接口地址</span>\n <span class="hljs-attr">filePath</span>: file.<span class="hljs-property">url</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;file&#39;</span>,\n <span class="hljs-attr">formData</span>: { <span class="hljs-attr">user</span>: <span class="hljs-string">&#39;test&#39;</span> },\n <span class="hljs-title function_">success</span>(<span class="hljs-params">res</span>) {\n <span class="hljs-comment">// 上传完成需要更新 fileList</span>\n <span class="hljs-keyword">const</span> { fileList = [] } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;\n fileList.<span class="hljs-title function_">push</span>({ ...file, <span class="hljs-attr">url</span>: res.<span class="hljs-property">data</span> });\n <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">setData</span>({ fileList });\n },\n });\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-yu-lan" tabindex="-1">图片预览</h3><p>通过向组件传入<code>file-list</code>属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;图片1&#39;</span>,\n },\n <span class="hljs-comment">// Uploader 根据文件后缀来判断是否为图片文件</span>\n <span class="hljs-comment">// 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明</span>\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;http://iph.href.lu/60x60?text=default&#39;</span>,\n <span class="hljs-attr">name</span>: <span class="hljs-string">&#39;图片2&#39;</span>,\n <span class="hljs-attr">isImage</span>: <span class="hljs-literal">true</span>,\n <span class="hljs-attr">deletable</span>: <span class="hljs-literal">true</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="tu-pian-ke-shan-chu-zhuang-tai" tabindex="-1">图片可删除状态</h3><p>通过<code>deletable</code>属性可控制是否开启所有图片的可删除状态，<code>deletable</code>默认为<code>true</code>，即所有图片都可删除。</p><p>若希望控制单张图片的可删除状态，可将<code>deletable</code>属性设置为<code>true</code>，并在<code>fileList</code>中为每一项设置<code>deletable</code>属性。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,\n },\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/tree.jpg&#39;</span>,\n <span class="hljs-attr">deletable</span>: <span class="hljs-literal">false</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="shang-chuan-zhuang-tai" tabindex="-1">上传状态</h3><p>通过<code>status</code>属性可以标识上传状态，<code>uploading</code>表示上传中，<code>failed</code>表示上传失败，<code>done</code>表示上传完成。</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>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/leaf.jpg&#39;</span>,\n <span class="hljs-attr">status</span>: <span class="hljs-string">&#39;uploading&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;上传中&#39;</span>,\n },\n {\n <span class="hljs-attr">url</span>: <span class="hljs-string">&#39;https://img.yzcdn.cn/vant/tree.jpg&#39;</span>,\n <span class="hljs-attr">status</span>: <span class="hljs-string">&#39;failed&#39;</span>,\n <span class="hljs-attr">message</span>: <span class="hljs-string">&#39;上传失败&#39;</span>,\n },\n ],\n },\n});\n</code></pre></div><div class="van-doc-card"><h3 id="xian-zhi-shang-chuan-shu-liang" tabindex="-1">限制上传数量</h3><p>通过<code>max-count</code>属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span>\n <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span>\n <span class="hljs-attr">max-count</span>=<span class="hljs-string">&quot;2&quot;</span>\n <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span>\n/&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="zi-ding-yi-shang-chuan-yang-shi" tabindex="-1">自定义上传样式</h3><p>通过插槽可以自定义上传区域的样式。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span>&gt;</span>\n <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>上传图片<span class="hljs-tag">&lt;/<span class="hljs-name">van-button</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">van-uploader</span>&gt;</span>\n</code></pre></div><div class="van-doc-card"><h3 id="shang-chuan-qian-xiao-yan" tabindex="-1">上传前校验</h3><p>将<code>use-before-read</code>属性设置为<code>true</code>，然后绑定 <code>before-read</code> 事件可以在上传前进行校验，调用 <code>callback</code> 方法传入 <code>true</code> 表示校验通过，传入 <code>false</code> 表示校验失败。</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">van-uploader</span>\n <span class="hljs-attr">file-list</span>=<span class="hljs-string">&quot;{{ fileList }}&quot;</span>\n <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;media&quot;</span>\n <span class="hljs-attr">use-before-read</span>\n <span class="hljs-attr">bind:before-read</span>=<span class="hljs-string">&quot;beforeRead&quot;</span>\n <span class="hljs-attr">bind:after-read</span>=<span class="hljs-string">&quot;afterRead&quot;</span>\n/&gt;</span>\n</code></pre><pre><code class="language-js"><span class="hljs-title class_">Page</span>({\n <span class="hljs-attr">data</span>: {\n <span class="hljs-attr">fileList</span>: [],\n },\n\n <span class="hljs-title function_">beforeRead</span>(<span class="hljs-params">event</span>) {\n <span class="hljs-keyword">const</span> { file, callback } = event.<span class="hljs-property">detail</span>;\n <span class="hljs-title function_">callback</span>(file.<span class="hljs-property">type</span> === <span class="hljs-string">&#39;image&#39;</span>);\n },\n});\n</code></pre></div><h2 id="yun-kai-fa-shi-li" tabindex="-1">云开发示例</h2><div class="van-doc-card"><h3 id="shang-chuan-tu-pian-zhi-yun-cun-chu" tabindex="-1">上传图片至云存储</h3><p>在开发中，可以利用<a href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html">小程序云开发</a>的云存储能力，将图片上传至云存储内。然后根据返回的<code>fileiId</code>来下载图片、删除图片和替换临时链接。</p><pre><code class="language-js"><span class="hljs-comment">// 上传图片</span>\n<span class="hljs-title function_">uploadToCloud</span>(<span class="hljs-params"></span>) {\n wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">init</span>();\n <span class="hljs-keyword">const</span> { fileList } = <span class="hljs-variable language_">this</span>.<span class="hljs-property">data</span>;\n <span class="hljs-keyword">if</span> (!fileList.<span class="hljs-property">length</span>) {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;请选择图片&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });\n } <span class="hljs-keyword">else</span> {\n <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));\n <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>(uploadTasks)\n .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;上传成功&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });\n <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> }));\n <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 });\n })\n .<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =&gt;</span> {\n wx.<span class="hljs-title function_">showToast</span>({ <span class="hljs-attr">title</span>: <span class="hljs-string">&#39;上传失败&#39;</span>, <span class="hljs-attr">icon</span>: <span class="hljs-string">&#39;none&#39;</span> });\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e);\n });\n }\n}\n\n<span class="hljs-title function_">uploadFilePromise</span>(<span class="hljs-params">fileName, chooseResult</span>) {\n <span class="hljs-keyword">return</span> wx.<span class="hljs-property">cloud</span>.<span class="hljs-title function_">uploadFile</span>({\n <span class="hljs-attr">cloudPath</span>: fileName,\n <span class="hljs-attr">filePath</span>: chooseResult.<span class="hljs-property">url</span>\n });\n}\n</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>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>标识符，可以在回调函数的第二项参数中获取</td><td><em>string | number</em></td><td>-</td></tr><tr><td>accept</td><td>接受的文件类型, 可选值为<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>所选的图片的尺寸, 当<code>accept</code>为<code>image</code>类型时设置所选图片的尺寸可选值为<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>预览图和上传区域的尺寸，默认单位为<code>px</code></td><td><em>string | number</em></td><td><code>80px</code></td></tr><tr><td>preview-image</td><td>是否在上传完成后展示预览图</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>preview-full-image</td><td>是否在点击预览图后展示全屏图片预览</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>multiple</td><td>是否开启图片多选，部分安卓机型不支持</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用文件上传</td><td><em>boolean</em></td><td><code>false</code></td></tr><tr><td>show-upload</td><td>是否展示文件上传按钮</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>deletable</td><td>是否展示删除按钮</td><td><em>boolean</em></td><td><code>true</code></td></tr><tr><td>capture</td><td>图片或者视频选取模式，当<code>accept</code>为<code>image</code>类型时设置<code>capture</code>可选值为<code>camera</code>可以直接调起摄像头</td><td><em>string | string[]</em></td><td><code>[&#39;album&#39;, &#39;camera&#39;]</code></td></tr><tr><td>max-size</td><td>文件大小限制，单位为<code>byte</code></td><td><em>number</em></td><td>-</td></tr><tr><td>max-count</td><td>文件上传数量限制</td><td><em>number</em></td><td>-</td></tr><tr><td>upload-text</td><td>上传区域文字提示</td><td><em>string</em></td><td>-</td></tr><tr><td>image-fit</td><td>预览图裁剪模式，可选值参考小程序<code>image</code>组件的<code>mode</code>属性</td><td><em>string</em></td><td><code>scaleToFill</code></td></tr><tr><td>use-before-read</td><td>是否开启文件读取前事件</td><td><em>boolean</em></td><td>-</td></tr><tr><td>camera</td><td>当 accept 为 <code>video</code> 时生效，可选值为 <code>back</code> <code>front</code></td><td><em>string</em></td><td>-</td></tr><tr><td>compressed</td><td>当 accept 为 <code>video</code> 时生效，是否压缩视频，默认为<code>true</code></td><td><em>boolean</em></td><td>-</td></tr><tr><td>max-duration</td><td>当 accept 为 <code>video</code> 时生效，拍摄视频最长拍摄时间，单位秒</td><td><em>number</em></td><td>-</td></tr><tr><td>upload-icon</td><td>上传区域图标，可选值见 <a href="#/icon">Icon 组件</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 的合法值</h4><table><thead><tr><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>media</code></td><td>图片和视频</td></tr><tr><td><code>image</code></td><td>图片</td></tr><tr><td><code>video</code></td><td>视频</td></tr><tr><td><code>file</code></td><td>从客户端会话选择图片和视频以外的文件</td></tr><tr><td><code>all</code></td><td>从客户端会话选择所有文件</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="filelist" tabindex="-1">FileList</h3><p><code>file-list</code> 为一个对象数组，数组中的每一个对象包含以下 <code>key</code>。</p><table><thead><tr><th>参数</th><th>说明</th></tr></thead><tbody><tr><td><code>url</code></td><td>图片和视频的网络资源地址</td></tr><tr><td><code>name</code></td><td>文件名称，视频将在全屏预览时作为标题显示</td></tr><tr><td><code>thumb</code></td><td>图片缩略图或视频封面的网络资源地址，仅对图片和视频有效</td></tr><tr><td><code>type</code></td><td>文件类型，可选值<code>image</code> <code>video</code> <code>file</code></td></tr><tr><td><code>isImage</code></td><td>手动标记图片资源</td></tr><tr><td><code>isVideo</code></td><td>手动标记视频资源</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="slot" tabindex="-1">Slot</h3><table><thead><tr><th>名称</th><th>说明</th></tr></thead><tbody><tr><td>-</td><td>自定义上传区域</td></tr></tbody></table></div><div class="van-doc-card"><h3 id="event" tabindex="-1">Event</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>bind:before-read</td><td>文件读取前，在回调函数中返回 <code>false</code> 可终止文件读取，绑定事件的同时需要将<code>use-before-read</code>属性设置为<code>true</code></td><td><code>event.detail.file</code>: 当前读取的文件，<code>event.detail.callback</code>: 回调函数，调用<code>callback(false)</code>终止文件读取</td></tr><tr><td>bind:after-read</td><td>文件读取完成后</td><td><code>event.detail.file</code>: 当前读取的文件</td></tr><tr><td>bind:oversize</td><td>文件超出大小限制</td><td>-</td></tr><tr><td>bind:click-preview</td><td>点击预览图片</td><td><code>event.detail.index</code>: 点击图片的序号值</td></tr><tr><td>bind:delete</td><td>删除图片</td><td><code>event.detail.index</code>: 删除图片的序号值</td></tr></tbody></table></div>',18)],kt={name:"vant-weapp",build:{srcDir:"packages",site:{publicPath:"/vant-weapp/"}},site:{versions:[{label:"0.x",link:"/vant-weapp/0.x"}],title:"Vant Weapp",description:"轻量、可靠的小程序 UI 组件库",logo:"https://img.yzcdn.cn/vant/logo.png",simulator:{url:"https://vant-contrib.gitee.io/vant/mobile.html?weapp=1",routeMapper:s=>`/zh-CN${{"/common":"/style","/transition":"/style"}[s]||s}`,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:"ad6b5732c36321f2dafed737ac2da92f"},nav:[{title:"开发指南",items:[{path:"home",title:"介绍"},{path:"quickstart",title:"快速上手"},{path:"changelog",title:"更新日志"},{path:"custom-style",title:"样式覆盖"},{path:"theme",title:"定制主题"}]},{title:"基础组件",items:[{path:"button",title:"Button 按钮"},{path:"cell",title:"Cell 单元格"},{path:"config-provider",title:"ConfigProvider 全局配置"},{path:"icon",title:"Icon 图标"},{path:"image",title:"Image 图片"},{path:"col",title:"Layout 布局"},{path:"popup",title:"Popup 弹出层"},{path:"common",title:"Style 内置样式"},{path:"toast",title:"Toast 轻提示"},{path:"transition",title:"transition 动画"}]},{title:"表单组件",items:[{path:"calendar",title:"Calendar 日历"},{path:"checkbox",title:"Checkbox 复选框"},{path:"datetime-picker",title:"DatetimePicker 时间选择"},{path:"field",title:"Field 输入框"},{path:"picker",title:"Picker 选择器"},{path:"radio",title:"Radio 单选框"},{path:"rate",title:"Rate 评分"},{path:"search",title:"Search 搜索"},{path:"slider",title:"Slider 滑块"},{path:"stepper",title:"Stepper 步进器"},{path:"switch",title:"Switch 开关"},{path:"uploader",title:"Uploader 文件上传"}]},{title:"反馈组件",items:[{path:"action-sheet",title:"ActionSheet 动作面板"},{path:"dialog",title:"Dialog 弹出框"},{path:"dropdown-menu",title:"DropdownMenu 下拉菜单"},{path:"loading",title:"Loading 加载"},{path:"notify",title:"Notify 消息通知"},{path:"overlay",title:"Overlay 遮罩层"},{path:"share-sheet",title:"ShareSheet 分享面板"},{path:"swipe-cell",title:"SwipeCell 滑动单元格"}]},{title:"展示组件",items:[{path:"circle",title:"Circle 环形进度条"},{path:"collapse",title:"Collapse 折叠面板"},{path:"count-down",title:"CountDown 倒计时"},{path:"divider",title:"Divider 分割线"},{path:"empty",title:"Empty 空状态"},{path:"notice-bar",title:"NoticeBar 通知栏"},{path:"progress",title:"Progress 进度条"},{path:"skeleton",title:"Skeleton 骨架屏"},{path:"steps",title:"Steps 步骤条"},{path:"sticky",title:"Sticky 粘性布局"},{path:"tag",title:"Tag 标签"}]},{title:"导航组件",items:[{path:"grid",title:"Grid 宫格"},{path:"index-bar",title:"IndexBar 索引栏"},{path:"nav-bar",title:"NavBar 导航栏"},{path:"sidebar",title:"Sidebar 侧边导航"},{path:"tab",title:"Tab 标签页"},{path:"tabbar",title:"Tabbar 标签栏"},{path:"tree-select",title:"TreeSelect 分类选择"}]},{title:"业务组件",items:[{path:"area",title:"Area 省市区选择"},{path:"card",title:"Card 商品卡片"},{path:"submit-bar",title:"SubmitBar 提交订单栏"},{path:"goods-action",title:"GoodsAction 商品导航"}]},{title:"废弃",items:[{path:"panel",title:"Panel 面板"}]}]}},_t={Changelog:d,CustomStyle:h,Home:j,Quickstart:q,Theme:w,ActionSheet:C,Area:D,Button:F,Calendar:U,Card:O,Cell:$,Checkbox:Q,Circle:Z,Col:as,Collapse:ls,Common:ds,ConfigProvider:is,CountDown:us,DatetimePicker:ms,Dialog:qs,Divider:xs,DropdownMenu:ks,Empty:Ps,Field:Ds,GoodsAction:Bs,Grid:Es,Icon:Rs,Image:Os,IndexBar:$s,Loading:Qs,NavBar:Zs,NoticeBar:aa,Notify:la,Overlay:da,Panel:ia,Picker:ua,Popup:ma,Progress:qa,Radio:xa,Rate:ka,Search:Pa,ShareSheet:Da,Sidebar:Ba,Skeleton:Ea,Slider:Ra,Stepper:Oa,Steps:$a,Sticky:Qa,SubmitBar:Za,SwipeCell:at,Switch:lt,Tab:dt,Tabbar:it,Tag:ut,Toast:mt,Transition:qt,TreeSelect:xt,Uploader:{setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",wt,zt)))}},Ct="1.10.1";let Pt="zh-CN";function St(){return Pt}function It(s){Pt=s,localStorage.setItem("vant-cli-lang",s)}function Dt(s){const a=localStorage.getItem("vant-cli-lang");Pt=a||(navigator.language&&-1!==navigator.language.indexOf("zh-")?"zh-CN":s||"en-US")}const Tt=navigator.userAgent.toLowerCase(),At=/ios|iphone|ipod|ipad|android/.test(Tt);function Bt(s,a="-"){return s.replace(/([a-z\d])([A-Z])/g,"$1"+a+"$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g,"$1"+a+"$2").toLowerCase()}let Ft=[],Nt=!1;function Et(){var s,a;const t=window.vueRouter,{path:n}=t.currentRoute.value;return(null==(s=kt.site.simulator)?void 0:s.routeMapper)?null==(a=kt.site.simulator)?void 0:a.routeMapper(n):n}function Lt(){window.top.postMessage({type:"replacePath",value:Et()},"*")}function Ut(){const s=document.querySelector("iframe");var a;s&&(a=()=>{s.contentWindow.postMessage({type:"replacePath",value:Et()},"*")},Nt?a():Ft.push(a))}function Rt(s){window.addEventListener("message",(a=>{var t,n;if("replacePath"!==(null==(t=a.data)?void 0:t.type))return;const l=(null==(n=a.data)?void 0:n.value)||"";s.currentRoute.value.path!==l&&s.replace(l).catch((()=>{}))}))}window.top===window?window.addEventListener("message",(s=>{"iframeReady"===s.data.type&&(Nt=!0,Ft.forEach((s=>s())),Ft=[])})):window.top.postMessage({type:"iframeReady"},"*");export{n as _,Dt as a,Ut as b,kt as c,_t as d,Bt as e,Lt as f,St as g,At as i,Rt as l,Ct as p,It as s};
Reference in New Issue View Git Blame Copy Permalink