diff --git a/assets/iframe-router.515bc94a.js b/assets/iframe-router.515bc94a.js deleted file mode 100644 index c26ec0bd..00000000 --- a/assets/iframe-router.515bc94a.js +++ /dev/null @@ -1 +0,0 @@ -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"},p=t('

更新日志

v1.9.1

2021-09-29

Bug Fixes

Document

Feature

v1.9.0

2021-09-27

Bug Fixes

Document

Feature

Performance

v1.8.7

2021-09-22

Features

1.8.6

2021-09-20

Features

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

1.8.4

2021-09-07

Bug Fixes

Features

v1.8.3

2021-08-30

Bug Fixes

Features

Performance Improvements

v1.8.2

2021-08-18

Bug Fixes

v1.8.1

2021-08-18

Feature

Bug Fixes

v1.8.0

2021-08-11

Feature

Performance

v1.7.2

2021-07-19

Bug Fixes

Features

1.7.1

2021-07-06

Bug Fixes

1.7.0

2021-07-04

Bug Fixes

Features

Improvements

1.6.9

2021-06-06

Bug Fixes

1.6.9-beta.2

2021-05-22

Bug Fixes

Features

1.6.8

2021-02-26

Features

Bug Fixes

Improvements

1.6.7

2021-01-27

Features

Bug Fixes

1.6.6

2021-01-21

Features

Bug Fixes

Improvements

1.6.5

2021-01-19

Features

Bug Fixes

Improvements

1.6.4

2020-12-18

Improvements

Bug Fixes

1.6.3

2020-12-09

Features

Improvements

Bug Fixes

1.6.2

2020-11-29

Features

Bug Fixes

Improvements

1.6.1

2020-11-12

Bug Fixes

1.6.0

2020-11-11

Features

Bug Fixes

1.5.2

2020-10-15

Features

Bug Fixes

1.5.1

2020-09-29

Features

Bug Fixes

1.5.0

2020-08-27

Features

Bug Fixes

1.4.4

2020-08-12

Bug Fixes

v1.4.3

2020-08-07

Features

v1.4.2

2020-08-03

Features

Bug Fixes

v1.4.1

2020-07-28

Features

Bug Fixes

v1.4.0

2020-07-17

Features

Bug Fixes

v1.3.3

2020-06-24

Features

Bug Fixes

v1.3.2

2020-06-04

Features

Bug Fixes

v1.3.1

2020-05-24

Features

Bug Fixes

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

Bug Fixes

v1.2.2

2020-04-21

Features

Bug Fixes

v1.2.1

2020-04-12

Features

Bug Fixes

v1.2.0

2020-04-04

Features

Bug Fixes

v1.1.0

2020-03-21

Features

Bug Fixes

v1.0.7

2020-03-04

Features

Bug Fixes

v1.0.6

2020-02-24

Features

Bug Fixes

v1.0.5

2020-02-07

Features

Bug Fixes

v1.0.4

2020-01-21

Features

Bug Fixes

v1.0.3

2020-01-09

Features

Bug Fixes

v1.0.2

2019-12-31

Features

Improvements

Bug Fixes

v1.0.1

2019-12-23

Features

Improvements

Bug Fixes

v1.0.0

2019-12-11

主要变动

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
Notify
SwitchCell
Transition

新特性

ActionSheet
Area
Button
Checkbox
Color
DatetimePicker
Dialog
Field
GoodsActionButton
GoodsActionIcon
GridItem
Icon
Loading
NoticeBar
Notify
Progress
Radio
Rate
SlidebarItem
Slider
SwipeCell
Switch
Stepper
Steps
Tabs
TreeSelect
',49),e=[p],d={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",l,e)))},c={class:"van-doc-markdown-body"},o=t('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',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('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),g=[u],j={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",r,g)))},m={class:"van-doc-markdown-body"},v=t('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{\n  ...\n  "setting": {\n    ...\n    "packNpmManually": true,\n    "packNpmRelationList": [\n      {\n        "packageJsonPath": "./package.json",\n        "miniprogramNpmDistDir": "./miniprogram/"\n      }\n    ]\n  }\n}\n

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

{\n  ...\n  "compilerOptions": {\n    ...\n    "baseUrl": ".",\n    "types": ["miniprogram-api-typings"],\n    "paths": {\n      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]\n    },\n    "lib": ["ES6"]\n  }\n}\n

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),b=[v],q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",m,b)))},y={class:"van-doc-markdown-body"},f=t('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

// Component Colors\n@text-color: #323233;\n@border-color: #ebedf0;\n@active-color: #f2f3f5;\n@background-color: #f8f8f8;\n@background-color-light: #fafafa;\n

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

<van-button style="{{ buttonStyle }}">\n  默认按钮\n</van-button>\n
Page({\n  data: {\n    buttonStyle: `\n      --button-border-radius: 10px;\n      --button-default-color: green;\n    `,\n  },\n\n  onLoad() {\n    setTimeout(() => {\n      this.setData({\n        buttonStyle: `\n          --button-border-radius: 2px;\n          --button-default-color: pink;\n        `,\n      });\n    }, 2000);\n  },\n});\n

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',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('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-action-sheet": "@vant/weapp/action-sheet/index"\n}\n

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),_=[k],C={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",z,_)))},P={class:"van-doc-markdown-body"},S=t('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-area": "@vant/weapp/area/index"\n}\n

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

<van-area area-list="{{ areaList }}" />\n

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

yarn add @vant/area-data\n
import { areaList } from '@vant/area-data';\n\nPage({\n  data: {\n    areaList,\n  },\n});\n

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

<van-area area-list="{{ areaList }}" value="110101" />\n

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

const db = wx.cloud.database();\n\ndb.collection('region')\n  .limit(1)\n  .get()\n  .then((res) => {\n    if (res.data && res.data.length > 0) {\n      this.setData({\n        areaList: res.data[0],\n      });\n    }\n  })\n  .catch((err) => {\n    console.log(err);\n  });\n

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',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('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

<van-button icon="star-o" type="primary" />\n<van-button icon="star-o" type="primary">按钮</van-button>\n<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">\n  按钮\n</van-button>\n

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',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('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-calendar": "@vant/weapp/calendar/index"\n}\n

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

<van-cell title="选择日期区间" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="range"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    const [start, end] = event.detail;\n    this.setData({\n      show: false,\n      date: `${this.formatDate(start)} - ${this.formatDate(end)}`,\n    });\n  },\n});\n

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

<van-calendar show="{{ show }}" show-confirm="{{ false }}" />\n

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

<van-calendar show="{{ show }}" color="#07c160" />\n

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

<van-calendar\n  show="{{ show }}"\n  min-date="{{ minDate }}"\n  max-date="{{ maxDate }}"\n/>\n
Page({\n  data: {\n    show: false,\n    minDate: new Date(2010, 0, 1).getTime(),\n    maxDate: new Date(2010, 0, 31).getTime(),\n  },\n});\n

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

<van-calendar show="{{ show }}" round="false" position="right" />\n

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

<van-calendar type="range" max-range="{{ 3 }}" />\n

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

<van-calendar first-day-of-week="{{ 1 }}" />\n

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60
readonly v1.9.1是否为只读状态，只读状态下不能选择日期booleanfalse

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),L=[E],U={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",N,L)))},R={class:"van-doc-markdown-body"},G=t('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-card": "@vant/weapp/card/index"\n}\n

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10),V=[G],O={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",R,V)))},M={class:"van-doc-markdown-body"},W=[t('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-cell": "@vant/weapp/cell/index",\n  "van-cell-group": "@vant/weapp/cell-group/index"\n}\n

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],$={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",M,W)))},H={class:"van-doc-markdown-body"},K=[t('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-checkbox": "@vant/weapp/checkbox/index",\n  "van-checkbox-group": "@vant/weapp/checkbox-group/index"\n}\n

代码演示

基础用法

通过value绑定复选框的勾选状态。

<van-checkbox value="{{ checked }}" bind:change="onChange">复选框</van-checkbox>\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange(event) {\n    this.setData({\n      checked: event.detail,\n    });\n  },\n});\n

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

<van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">\n  自定义图标\n  <image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" />\n</van-checkbox>\n
Page({\n  data: {\n    checked: true,\n    activeIcon: '//img.yzcdn.cn/icon-active.png',\n    inactiveIcon: '//img.yzcdn.cn/icon-normal.png',\n  },\n\n  onChange(event) {\n    this.setData({\n      checked: event.detail,\n    });\n  },\n});\n

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

<van-checkbox-group value="{{ result }}" bind:change="onChange">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n
Page({\n  data: {\n    result: ['a', 'b'],\n  },\n\n  onChange(event) {\n    this.setData({\n      result: event.detail,\n    });\n  },\n});\n

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

<van-checkbox-group value="{{ result }}" bind:change="onChange">\n  <van-cell-group>\n    <van-cell\n      wx:for="{{ list }}"\n      wx:key="index"\n      title="复选框 {{ item }}"\n      value-class="value-class"\n      clickable\n      data-index="{{ index }}"\n      bind:click="toggle"\n    >\n      <van-checkbox\n        catch:tap="noop"\n        class="checkboxes-{{ index }}"\n        name="{{ item }}"\n      />\n    </van-cell>\n  </van-cell-group>\n</van-checkbox-group>\n
Page({\n  data: {\n    list: ['a', 'b', 'c'],\n    result: ['a', 'b'],\n  },\n\n  onChange(event) {\n    this.setData({\n      result: event.detail,\n    });\n  },\n\n  toggle(event) {\n    const { index } = event.currentTarget.dataset;\n    const checkbox = this.selectComponent(`.checkboxes-${index}`);\n    checkbox.toggle();\n  },\n\n  noop() {},\n});\n
.value-class {\n  flex: none !important;\n}\n

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],Q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",H,K)))},X={class:"van-doc-markdown-body"},Z=[t('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-circle": "@vant/weapp/circle/index"\n}\n

代码演示

基础用法

value属性表示进度条的目标进度。

<van-circle value="{{ 30 }}" text="text" />\n

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

<van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />\n
Page({\n  data: {\n    value: 25,\n    gradientColor: {\n      '0%': '#ffd01e',\n      '100%': '#ee0a24',\n    },\n  },\n});\n

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],J={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",X,Z)))},Y={class:"van-doc-markdown-body"},ss=[t('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-row": "@vant/weapp/row/index",\n  "van-col": "@vant/weapp/col/index"\n}\n

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

<van-row>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n  <van-col span="4">span: 4</van-col>\n  <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n</van-row>\n\n<van-row>\n  <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

<van-row gutter="20">\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],as={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Y,ss)))},ts={class:"van-doc-markdown-body"},ns=[t('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-collapse": "@vant/weapp/collapse/index",\n  "van-collapse-item": "@vant/weapp/collapse-item/index"\n}\n

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],ls={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ts,ns)))},ps={class:"van-doc-markdown-body"},es=[t('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ps,es)))},cs={class:"van-doc-markdown-body"},os=[t('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-config-provider": "@vant/weapp/config-provider/index"\n}\n

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

<van-config-provider theme-vars="{{ themeVars }}">\n  <van-cell-group>\n    <van-field label="评分">\n      <view slot="input" style="width: 100%">\n        <van-rate\n          model:value="{{ rate }}"\n          data-key="rate"\n          bind:change="onChange"\n        />\n      </view>\n    </van-field>\n    <van-field label="滑块" border="{{ false }}">\n      <view slot="input" style="width: 100%">\n        <van-slider\n          value="{{ slider }}"\n          data-key="slider"\n          bind:change="onChange"\n        />\n      </view>\n    </van-field>\n  </van-cell-group>\n\n  <view style="margin: 16px">\n    <van-button round block type="primary">提交</van-button>\n  </view>\n</van-config-provider>\n
import Page from '../../common/page';\n\nPage({\n  data: {\n    rate: 4,\n    slider: 50,\n    themeVars: {\n      rateIconFullColor: '#07c160',\n      sliderBarHeight: '4px',\n      sliderButtonWidth: '20px',\n      sliderButtonHeight: '20px',\n      sliderActiveBackgroundColor: '#07c160',\n      buttonPrimaryBorderColor: '#07c160',\n      buttonPrimaryBackgroundColor: '#07c160',\n    },\n  },\n\n  onChange(event) {\n    const { key } = event.currentTarget.dataset;\n    this.setData({\n      [key]: event.detail,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],is={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",cs,os)))},hs={class:"van-doc-markdown-body"},rs=[t('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-count-down": "@vant/weapp/count-down/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

<van-count-down time="{{ time }}" />\n
Page({\n  data: {\n    time: 30 * 60 * 60 * 1000,\n  },\n});\n

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

<van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />\n

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

<van-count-down use-slot time="{{ time }}" bind:change="onChange">\n  <text class="item">{{ timeData.hours }}</text>\n  <text class="item">{{ timeData.minutes }}</text>\n  <text class="item">{{ timeData.seconds }}</text>\n</van-count-down>\n
Page({\n  data: {\n    time: 30 * 60 * 60 * 1000,\n    timeData: {},\n  },\n\n  onChange(e) {\n    this.setData({\n      timeData: e.detail,\n    });\n  },\n});\n
.item {\n  display: inline-block;\n  width: 22px;\n  margin-right: 5px;\n  color: #fff;\n  font-size: 12px;\n  text-align: center;\n  background-color: #1989fa;\n  border-radius: 2px;\n}\n

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],us={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",hs,rs)))},gs={class:"van-doc-markdown-body"},js=[t('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-datetime-picker": "@vant/weapp/datetime-picker/index"\n}\n

代码演示

选择完整时间

value 为时间戳。

<van-datetime-picker\n  type="datetime"\n  value="{{ currentDate }}"\n  min-date="{{ minDate }}"\n  max-date="{{ maxDate }}"\n  bind:input="onInput"\n/>\n
Page({\n  data: {\n    minHour: 10,\n    maxHour: 20,\n    minDate: new Date().getTime(),\n    maxDate: new Date(2019, 10, 1).getTime(),\n    currentDate: new Date().getTime(),\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

<van-datetime-picker\n  type="date"\n  value="{{ currentDate }}"\n  bind:input="onInput"\n  min-date="{{ minDate }}"\n  formatter="{{ formatter }}"\n/>\n
Page({\n  data: {\n    currentDate: new Date().getTime(),\n    minDate: new Date().getTime(),\n    formatter(type, value) {\n      if (type === 'year') {\n        return `${value}年`;\n      }\n      if (type === 'month') {\n        return `${value}月`;\n      }\n      return value;\n    },\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选择日期（年月）

value 为时间戳。

<van-datetime-picker\n  type="year-month"\n  value="{{ currentDate }}"\n  min-date="{{ minDate }}"\n  bind:input="onInput"\n/>\n
Page({\n  data: {\n    currentDate: new Date().getTime(),\n    minDate: new Date().getTime(),\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选择时间

value 为字符串。

<van-datetime-picker\n  type="time"\n  value="{{ currentDate }}"\n  min-hour="{{ minHour }}"\n  max-hour="{{ maxHour }}"\n  bind:input="onInput"\n/>\n
Page({\n  data: {\n    currentDate: '12:00',\n    minHour: 10,\n    maxHour: 20,\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

<van-datetime-picker\n  type="time"\n  value="{{ currentDate }}"\n  filter="{{ filter }}"\n/>\n
Page({\n  data: {\n    currentDate: '12:00',\n    filter(type, options) {\n      if (type === 'minute') {\n        return options.filter((option) => option % 5 === 0);\n      }\n\n      return options;\n    },\n  },\n});\n

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],ms={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gs,js)))},vs={class:"van-doc-markdown-body"},bs=[t('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-dialog": "@vant/weapp/dialog/index"\n}\n

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

<van-dialog\n  use-slot\n  title="标题"\n  show="{{ show }}"\n  show-cancel-button\n  confirm-button-open-type="getUserInfo"\n  bind:close="onClose"\n  bind:getuserinfo="getUserInfo"\n>\n  <image src="https://img.yzcdn.cn/1.jpg" />\n</van-dialog>\n
Page({\n  data: {\n    show: true,\n  },\n\n  getUserInfo(event) {\n    console.log(event.detail);\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vs,bs)))},ys={class:"van-doc-markdown-body"},fs=[t('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

"usingComponents": {\n  "van-divider": "@vant/weapp/divider/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

<van-divider\n  contentPosition="center"\n  customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"\n>\n  文本\n</van-divider>\n

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],xs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ys,fs)))},ws={class:"van-doc-markdown-body"},zs=[t('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",\n  "van-dropdown-item": "@vant/weapp/dropdown-item/index"\n}\n

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

<van-dropdown-menu active-color="#1989fa">\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n

向上展开

<van-dropdown-menu direction="up">\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n

禁用菜单

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />\n</van-dropdown-menu>\n

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string
',15)],ks={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ws,zs)))},_s={class:"van-doc-markdown-body"},Cs=[t('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-empty": "@vant/weapp/empty/index"\n}\n

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Ps={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_s,Cs)))},Ss={class:"van-doc-markdown-body"},Is=[t('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-field": "@vant/weapp/field/index"\n}\n

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ss,Is)))},Ts={class:"van-doc-markdown-body"},As=[t('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-goods-action": "@vant/weapp/goods-action/index",\n  "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",\n  "van-goods-action-button": "@vant/weapp/goods-action-button/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],Bs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ts,As)))},Fs={class:"van-doc-markdown-body"},Ns=[t('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-grid": "@vant/weapp/grid/index",\n  "van-grid-item": "@vant/weapp/grid-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

<van-grid column-num="3">\n  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}" />\n</van-grid>\n

自定义内容

通过插槽可以自定义格子展示的内容。

<van-grid column-num="3" border="{{ false }}">\n  <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">\n    <image\n      style="width: 100%; height: 90px;"\n      src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg"\n    />\n  </van-grid-item>\n</van-grid>\n

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

<van-grid square>\n  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />\n</van-grid>\n

格子间距

通过gutter属性设置格子之间的距离。

<van-grid gutter="{{ 10 }}">\n  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />\n</van-grid>\n

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-grid clickable column-num="2">\n  <van-grid-item\n    icon="home-o"\n    link-type="navigateTo"\n    url="/pages/dashboard/index"\n    text="Navigate 跳转"\n  />\n  <van-grid-item\n    icon="search"\n    link-type="reLaunch"\n    url="/pages/dashboard/index"\n    text="ReLaunch 跳转"\n  />\n</van-grid>\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

<van-grid column-num="2">\n  <van-grid-item icon="home-o" text="文字" dot />\n  <van-grid-item icon="search" text="文字" badge="99+" />\n</van-grid>\n

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],Es={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fs,Ns)))},Ls={class:"van-doc-markdown-body"},Us=[t('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-icon": "@vant/weapp/icon/index"\n}\n

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

<van-icon name="close" />\n<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-icon name="chat" dot />\n<van-icon name="chat" info="9" />\n<van-icon name="chat" info="99+" />\n

图标颜色

设置color属性来控制图标颜色。

<van-icon name="chat" color="red" />\n

图标大小

设置size属性来控制图标大小。

<van-icon name="chat" size="50px" />\n

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],Rs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ls,Us)))},Gs={class:"van-doc-markdown-body"},Vs=[t('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-image": "@vant/weapp/image/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />\n

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

<van-image\n  width="10rem"\n  height="10rem"\n  fit="contain"\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

<van-image\n  round\n  width="10rem"\n  height="10rem"\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

<van-image\n  width="100"\n  height="100"\n  lazy-load\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

<van-image use-loading-slot>\n  <van-loading slot="loading" type="spinner" size="20" vertical />\n</van-image>\n

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],Os={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Gs,Vs)))},Ms={class:"van-doc-markdown-body"},Ws=[t('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-index-bar": "@vant/weapp/index-bar/index",\n  "van-index-anchor": "@vant/weapp/index-anchor/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],$s={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ms,Ws)))},Hs={class:"van-doc-markdown-body"},Ks=[t('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-loading": "@vant/weapp/loading/index"\n}\n

代码演示

加载类型

<van-loading /> <van-loading type="spinner" />\n

自定义颜色

<van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />\n

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],Qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Hs,Ks)))},Xs={class:"van-doc-markdown-body"},Zs=[t('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-nav-bar": "@vant/weapp/nav-bar/index"\n}\n

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],Js={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xs,Zs)))},Ys={class:"van-doc-markdown-body"},sa=[t('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-notice-bar": "@vant/weapp/notice-bar/index"\n}\n

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

<van-notice-bar\n  text="{{ text }}"\n  speed="{{speedValue}}"\n  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"\n/>\n

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],aa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ys,sa)))},ta={class:"van-doc-markdown-body"},na=[t('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-notify": "@vant/weapp/notify/index"\n}\n

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],la={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ta,na)))},pa={class:"van-doc-markdown-body"},ea=[t('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-overlay": "@vant/weapp/overlay/index"\n}\n

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

<van-button type="primary" bind:click="onClickShow">嵌入内容</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide">\n  <view class="wrapper">\n    <view class="block" catch:tap="noop" />\n  </view>\n</van-overlay>\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n\n  noop() {},\n});\n
.wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.block {\n  width: 120px;\n  height: 120px;\n  background-color: #fff;\n}\n

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",pa,ea)))},ca={class:"van-doc-markdown-body"},oa=[t('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-panel": "@vant/weapp/panel/index"\n}\n

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],ia={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ca,oa)))},ha={class:"van-doc-markdown-body"},ra=[t('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-picker": "@vant/weapp/picker/index"\n}\n

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

<van-picker\n  columns="{{ columns }}"\n  default-index="{{ 2 }}"\n  bind:change="onChange"\n/>\n

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

<van-picker columns="{{ columns }}" loading />\n

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],ua={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ha,ra)))},ga={class:"van-doc-markdown-body"},ja=[t('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-popup": "@vant/weapp/popup/index"\n}\n

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

<van-popup\n  show="{{ show }}"\n  position="top"\n  custom-style="height: 20%;"\n  bind:close="onClose"\n/>\n

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

<van-popup\n  show="{{ show }}"\n  round\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],ma={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ga,ja)))},va={class:"van-doc-markdown-body"},ba=[t('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-progress": "@vant/weapp/progress/index"\n}\n

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

<van-progress percentage="50" />\n

线条粗细

通过stroke-width可以设置进度条的粗细。

<van-progress :percentage="50" stroke-width="8" />\n

置灰

设置inactive属性后进度条将置灰。

<van-progress inactive percentage="50" />\n

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",va,ba)))},ya={class:"van-doc-markdown-body"},fa=[t('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-radio": "@vant/weapp/radio/index",\n  "van-radio-group": "@vant/weapp/radio-group/index"\n}\n

代码演示

基础用法

通过value绑定值当前选中项的 name 。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n
Page({\n  data: {\n    radio: '1',\n  },\n\n  onChange(event) {\n    this.setData({\n      radio: event.detail,\n    });\n  },\n});\n

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio use-icon-slot value="{{ radio }}" name="1">\n    自定义图标\n    <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />\n  </van-radio>\n  <van-radio use-icon-slot value="{{ radio }}" name="2">\n    自定义图标\n    <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />\n  </van-radio>\n</van-radio-group>\n
Page({\n  data: {\n    radio: true,\n    icon: {\n      normal: '//img.yzcdn.cn/icon-normal.png',\n      active: '//img.yzcdn.cn/icon-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({\n      radio: event.detail,\n    });\n  },\n});\n

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-cell-group>\n    <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">\n      <van-radio slot="right-icon" name="1" />\n    </van-cell>\n    <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">\n      <van-radio slot="right-icon" name="2" />\n    </van-cell>\n  </van-cell-group>\n</van-radio-group>\n
Page({\n  data: {\n    radio: '1',\n  },\n\n  onChange(event) {\n    this.setData({\n      radio: event.detail,\n    });\n  },\n\n  onClick(event) {\n    const { name } = event.currentTarget.dataset;\n    this.setData({\n      radio: name,\n    });\n  },\n});\n

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],xa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ya,fa)))},wa={class:"van-doc-markdown-body"},za=[t('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-rate": "@vant/weapp/rate/index"\n}\n

代码演示

基础用法

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 3,\n  },\n\n  onChange(event) {\n    this.setData({\n      value: event.detail,\n    });\n  },\n});\n

自定义图标

<van-rate\n  value="{{ value }}"\n  icon="like"\n  void-icon="like-o"\n  bind:change="onChange"\n/>\n

自定义样式

<van-rate\n  value="{{ value }}"\n  size="{{ 25 }}"\n  color="#ffd21e"\n  void-icon="star"\n  void-color="#eee"\n  bind:change="onChange"\n/>\n

半星

<van-rate\n  value="{{ value }}"\n  allow-half\n  void-icon="star"\n  void-color="#eee"\n  bind:change="onChange"\n/>\n
Page({\n  data: {\n    value: 2.5,\n  },\n\n  onChange(event) {\n    this.setData({\n      value: event.detail,\n    });\n  },\n});\n

自定义数量

<van-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />\n

禁用状态

<van-rate disabled value="{{ value }}" bind:change="onChange" />\n

只读状态

<van-rate readonly value="{{ value }}" bind:change="onChange" />\n

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],ka={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",wa,za)))},_a={class:"van-doc-markdown-body"},Ca=[t('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-search": "@vant/weapp/search/index"\n}\n

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Pa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_a,Ca)))},Sa={class:"van-doc-markdown-body"},Ia=[t('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Sa,Ia)))},Ta={class:"van-doc-markdown-body"},Aa=[t('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],Ba={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ta,Aa)))},Fa={class:"van-doc-markdown-body"},Na=[t('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],Ea={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fa,Na)))},La={class:"van-doc-markdown-body"},Ua=[t('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],Ra={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",La,Ua)))},Ga={class:"van-doc-markdown-body"},Va=[t('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],Oa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ga,Va)))},Ma={class:"van-doc-markdown-body"},Wa=[t('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],$a={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ma,Wa)))},Ha={class:"van-doc-markdown-body"},Ka=[t('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],Qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ha,Ka)))},Xa={class:"van-doc-markdown-body"},Za=[t('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],Ja={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xa,Za)))},Ya={class:"van-doc-markdown-body"},st=[t('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],at={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ya,st)))},tt={class:"van-doc-markdown-body"},nt=[t('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],lt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",tt,nt)))},pt={class:"van-doc-markdown-body"},et=[t('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],dt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",pt,et)))},ct={class:"van-doc-markdown-body"},ot=[t('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],it={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ct,ot)))},ht={class:"van-doc-markdown-body"},rt=[t('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],ut={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ht,rt)))},gt={class:"van-doc-markdown-body"},jt=[t('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],mt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gt,jt)))},vt={class:"van-doc-markdown-body"},bt=[t('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],qt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vt,bt)))},yt={class:"van-doc-markdown-body"},ft=[t('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],xt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",yt,ft)))},wt={class:"van-doc-markdown-body"},zt=[t('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',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:J,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:Js,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:Ja,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.9.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}; diff --git a/assets/iframe-router.fef98aab.js b/assets/iframe-router.fef98aab.js new file mode 100644 index 00000000..dfd4e1eb --- /dev/null +++ b/assets/iframe-router.fef98aab.js @@ -0,0 +1 @@ +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"},p=t('

更新日志

v1.9.2

2021-10-28

Bug Fixes

Feature

v1.9.1

2021-09-29

Bug Fixes

Document

Feature

v1.9.0

2021-09-27

Bug Fixes

Document

Feature

Performance

v1.8.7

2021-09-22

Features

1.8.6

2021-09-20

Features

Bug Fixes

1.8.5

2021-09-15

Bug Fixes

1.8.4

2021-09-07

Bug Fixes

Features

v1.8.3

2021-08-30

Bug Fixes

Features

Performance Improvements

v1.8.2

2021-08-18

Bug Fixes

v1.8.1

2021-08-18

Feature

Bug Fixes

v1.8.0

2021-08-11

Feature

Performance

v1.7.2

2021-07-19

Bug Fixes

Features

1.7.1

2021-07-06

Bug Fixes

1.7.0

2021-07-04

Bug Fixes

Features

Improvements

1.6.9

2021-06-06

Bug Fixes

1.6.9-beta.2

2021-05-22

Bug Fixes

Features

1.6.8

2021-02-26

Features

Bug Fixes

Improvements

1.6.7

2021-01-27

Features

Bug Fixes

1.6.6

2021-01-21

Features

Bug Fixes

Improvements

1.6.5

2021-01-19

Features

Bug Fixes

Improvements

1.6.4

2020-12-18

Improvements

Bug Fixes

1.6.3

2020-12-09

Features

Improvements

Bug Fixes

1.6.2

2020-11-29

Features

Bug Fixes

Improvements

1.6.1

2020-11-12

Bug Fixes

1.6.0

2020-11-11

Features

Bug Fixes

1.5.2

2020-10-15

Features

Bug Fixes

1.5.1

2020-09-29

Features

Bug Fixes

1.5.0

2020-08-27

Features

Bug Fixes

1.4.4

2020-08-12

Bug Fixes

v1.4.3

2020-08-07

Features

v1.4.2

2020-08-03

Features

Bug Fixes

v1.4.1

2020-07-28

Features

Bug Fixes

v1.4.0

2020-07-17

Features

Bug Fixes

v1.3.3

2020-06-24

Features

Bug Fixes

v1.3.2

2020-06-04

Features

Bug Fixes

v1.3.1

2020-05-24

Features

Bug Fixes

v1.3.0

2020-05-08

支持简易双向绑定

1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

Slider #3107

Search #3106

Rate #3105

Features

Bug Fixes

v1.2.2

2020-04-21

Features

Bug Fixes

v1.2.1

2020-04-12

Features

Bug Fixes

v1.2.0

2020-04-04

Features

Bug Fixes

v1.1.0

2020-03-21

Features

Bug Fixes

v1.0.7

2020-03-04

Features

Bug Fixes

v1.0.6

2020-02-24

Features

Bug Fixes

v1.0.5

2020-02-07

Features

Bug Fixes

v1.0.4

2020-01-21

Features

Bug Fixes

v1.0.3

2020-01-09

Features

Bug Fixes

v1.0.2

2019-12-31

Features

Improvements

Bug Fixes

v1.0.1

2019-12-23

Features

Improvements

Bug Fixes

v1.0.0

2019-12-11

主要变动

新组件

在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件：

样式定制

在 1.0 迭代计划确定之初，我们就不断思考这样一个问题 – 该如何给用户提供动态切换主题样式的功能呢？

微信小程序的环境是非常特殊的。不具有动态加载代码的机制，同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿，不再适合微信小程序的环境。

微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM，幸运的是，小程序也支持了 CSS 自定义属性 的特性。最终，我们基于 CSS 自定义属性设计了样式定制的方案，开发者使用灵活、方便，组件维护也更简单。

从 1.0 版本开始，Vant Weapp 中的所有组件都支持通过 CSS 组定义属性 进行样式定制，具体使用姿势可查看相关文档

定制主题

不兼容更新

1.0 版本中包含少量不兼容更新，主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目，请按照下方的列表依次检查，大部分项目可以无痛升级。

Badge
Notify
SwitchCell
Transition

新特性

ActionSheet
Area
Button
Checkbox
Color
DatetimePicker
Dialog
Field
GoodsActionButton
GoodsActionIcon
GridItem
Icon
Loading
NoticeBar
Notify
Progress
Radio
Rate
SlidebarItem
Slider
SwipeCell
Switch
Stepper
Steps
Tabs
TreeSelect
',50),e=[p],d={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",l,e)))},c={class:"van-doc-markdown-body"},o=t('

样式覆盖

介绍

Vant Weapp 基于微信小程序的机制，为开发者提供了以下 3 种修改组件样式的方法

解除样式隔离

样式隔离的相关背景知识请查阅微信小程序文档


Vant Weapp 的所有组件都开启了addGlobalClass: true以接受外部样式的影响，可以使用如下 2 种方式覆盖组件样式

在页面中使用 Vant Weapp 组件时，可直接在页面的样式文件中覆盖样式

<van-button type="primary">主要按钮</van-button>\n
/* page.wxss */\n.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

<van-button type="primary">主要按钮</van-button>\n
Component({\n  options: {\n    styleIsolation: 'shared',\n  },\n});\n
.van-button--primary {\n  font-size: 20px;\n  background-color: pink;\n}\n

使用外部样式类

外部样式类的相关知识背景请查阅微信小程序文档


Vant Weapp 开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的“外部样式类”部分。

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此使用时请添加!important以保证外部样式类的优先级。

<van-cell\n  title="单元格"\n  value="内容"\n  title-class="cell-title"\n  value-class="cell-value"\n/>\n
.cell-title {\n  color: pink !important;\n  font-size: 20px !important;\n}\n\n.cell-value {\n  color: green !important;\n  font-size: 12px !important;\n}\n

使用 CSS 变量

Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题

',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('

Vant Weapp

轻量、可靠的小程序 UI 组件库

介绍

Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 版本和微信小程序版本，并由社区团队维护 React 版本。

预览

扫描下方小程序二维码，体验组件库示例：

快速上手

请参考 快速上手

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们，当然，我们也非常欢迎你给我们发 PR

加入我们

有赞前端团队是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。

我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：

我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

链接

开源协议

本项目基于 MIT 协议，请自由地享受和参与开源

',8),g=[u],j={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",r,g)))},m={class:"van-doc-markdown-body"},v=t('

快速上手

背景知识

使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。

安装

步骤一 通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装\nnpm i @vant/weapp -S --production\n\n# 通过 yarn 安装\nyarn add @vant/weapp --production\n\n# 安装 0.x 版本\nnpm i vant-weapp -S --production\n

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{\n  ...\n  "setting": {\n    ...\n    "packNpmManually": true,\n    "packNpmRelationList": [\n      {\n        "packageJsonPath": "./package.json",\n        "miniprogramNpmDistDir": "./miniprogram/"\n      }\n    ]\n  }\n}\n

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

步骤四 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

步骤五 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装\nnpm i -D miniprogram-api-typings\n\n# 通过 yarn 安装\nyarn add -D miniprogram-api-typings\n

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。

请将path/to/node_modules/@vant/weapp修改为项目的 node_modules 中 @vant/weapp 所在的目录。

{\n  ...\n  "compilerOptions": {\n    ...\n    "baseUrl": ".",\n    "types": ["miniprogram-api-typings"],\n    "paths": {\n      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]\n    },\n    "lib": ["ES6"]\n  }\n}\n

示例工程

我们提供了一个示例工程，示例工程会帮助你了解如下内容：

使用

引入组件

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装\n// app.json\n"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n
// 通过下载源码使用 es6版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/dist/button/index"\n}\n
// 通过下载源码使用 es5版本\n// app.json\n"usingComponents": {\n  "van-button": "path/to/@vant/weapp/lib/button/index"\n}\n

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>\n

其他

在开发者工具中预览示例小程序

\n# 将项目克隆到本地\ngit clone git@github.com:youzan/vant-weapp.git\n\n# 安装项目依赖\ncd vant-weapp && npm install\n\n# 执行组件编译\nnpm run dev\n\n

接着打开微信开发者工具，导入example目录的项目就可以预览示例了。

',14),b=[v],q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",m,b)))},y={class:"van-doc-markdown-body"},f=t('

定制主题

背景知识

小程序基于 Shadow DOM 来实现自定义组件，所以 Vant Weapp 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识，避免许多不必要的困扰。

CSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备，定制主题将不会生效，不过不必担心，默认样式仍会生效。

样式变量

定制使用的 CSS 变量 与 Less 变量 同名，下面是一些基本的样式变量，所有可用的颜色变量请参考 配置文件。

// Component Colors\n@text-color: #323233;\n@border-color: #ebedf0;\n@active-color: #f2f3f5;\n@background-color: #f8f8f8;\n@background-color-light: #fafafa;\n

定制方法

定制单个组件的主题样式

在 wxss 中为组件设置 CSS 变量

<van-button class="my-button">\n  默认按钮\n</van-button>\n
.my-button {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n}\n

或通过 style 属性来设置 CSS 变量，这使你能够轻松实现主题的动态切换

<van-button style="{{ buttonStyle }}">\n  默认按钮\n</van-button>\n
Page({\n  data: {\n    buttonStyle: `\n      --button-border-radius: 10px;\n      --button-default-color: green;\n    `,\n  },\n\n  onLoad() {\n    setTimeout(() => {\n      this.setData({\n        buttonStyle: `\n          --button-border-radius: 2px;\n          --button-default-color: pink;\n        `,\n      });\n    }, 2000);\n  },\n});\n

定制多个组件的主题样式

与单个组件的定制方式类似，只需用一个 container 节点包裹住需要定制的组件，并将 CSS 变量 设置在 container 节点上

<view class="container">\n  <van-button bind:click="onClick">\n    默认按钮\n  </van-button>\n\n  <van-toast id="van-toast" />\n</view>\n
import Toast from 'path/to/vant-weapp/dist/toast/toast';\n\nPage({\n  onClick() {\n    Toast('我是提示文案，建议不超过十五字~');\n  },\n});\n
.container {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n

定制全局主题样式

在 app.wxss 中，写入 CSS 变量，即可对全局生效

page {\n  --button-border-radius: 10px;\n  --button-default-color: #f2f3f5;\n  --toast-max-width: 100px;\n  --toast-background-color: pink;\n}\n
',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('

ActionSheet 动作面板

介绍

底部弹起的模态面板，包含与当前情境相关的多个选项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-action-sheet": "@vant/weapp/action-sheet/index"\n}\n

代码演示

基础用法

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:select="onSelect"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n      },\n      {\n        name: '选项',\n        subname: '描述信息',\n        openType: 'share',\n      },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onSelect(event) {\n    console.log(event.detail);\n  },\n});\n

选项状态

选项可以设置为加载状态或禁用状态。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '着色选项', color: '#ee0a24' },\n      { loading: true },\n      { name: '禁用选项', disabled: true },\n    ],\n  },\n});\n

展示取消按钮

设置cancel-text属性后，会在底部展示取消按钮，点击后关闭当前菜单。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  cancel-text="取消"\n/>\n

展示描述信息

设置description属性后，会在选项上方显示描述信息。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  description="这是一段描述信息"\n/>\n

展示标题栏

通过设置title属性展示标题栏，同时可以使用插槽自定义菜单内容。

<van-action-sheet show="{{ show }}" title="标题">\n  <view>内容</view>\n</van-action-sheet>\n

微信开放能力

需要传入一个actions的数组，数组的每一项是一个对象，对象属性见文档下方表格。

<van-action-sheet\n  show="{{ show }}"\n  actions="{{ actions }}"\n  bind:close="onClose"\n  bind:getuserinfo="onGetUserInfo"\n/>\n
Page({\n  data: {\n    show: false,\n    actions: [\n      { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },\n    ],\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n\n  onGetUserInfo(e) {\n    console.log(e.detail);\n  },\n});\n

API

Props

参数说明类型默认值
show是否显示动作面板boolean-
actions菜单选项Array[]
title标题string-
description v1.0.0选项上方的描述信息string-
z-indexz-index 层级number100
cancel-text取消按钮文字string-
overlay是否显示遮罩层boolean-
round v1.0.0是否显示圆角booleantrue
close-on-click-action是否在点击选项后关闭booleantrue
close-on-click-overlay点击遮罩是否关闭菜单boolean-
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Events

事件名说明参数
bind:select选中选项时触发，禁用或加载状态下不会触发event.detail: 选项对应的对象
bind:close关闭时触发-
bind:cancel取消按钮点击时触发-
bind:click-overlay点击遮罩层时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效-
bind:contact客服消息回调，openType="contact"时有效-
bind:getphonenumber获取用户手机号回调，openType="getPhoneNumber"时有效-
bind:error当使用开放能力时，发生错误的回调，openType="launchApp"时有效-
bind:launchapp打开 APP 成功的回调，openType="launchApp"时有效-
bind:opensetting在打开授权设置页后回调，openType="openSetting"时有效-

actions

API中的actions为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key：

键名说明类型默认值
name标题string-
subname二级标题string-
color选项文字颜色string-
loading是否为加载状态boolean-
disabled是否为禁用状态boolean-
className为对应列添加额外的 class 类名string-
openType微信开放能力，具体支持可参考 微信官方文档string-
lang指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文stringen
sessionFrom会话来源，openType="contact"时有效string-
sendMessageTitle会话内消息卡片标题，openType="contact"时有效string当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径，openType="contact"时有效string当前分享路径
sendMessageImg会话内消息卡片图片，openType="contact"时有效string截图
showMessageCard是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效stringfalse
appParameter打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效string-
',14),_=[k],C={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",z,_)))},P={class:"van-doc-markdown-body"},S=t('

Area 省市区选择

介绍

省市区选择组件通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-area": "@vant/weapp/area/index"\n}\n

代码演示

基础用法

初始化省市区组件时，需要通过 area-list 属性传入省市区数据。

<van-area area-list="{{ areaList }}" />\n

areaList 格式

areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

示例数据如下：

const areaList = {\n  province_list: {\n    110000: '北京市',\n    120000: '天津市',\n  },\n  city_list: {\n    110100: '北京市',\n    120100: '天津市',\n  },\n  county_list: {\n    110101: '东城区',\n    110102: '西城区',\n    // ....\n  },\n};\n

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

yarn add @vant/area-data\n
import { areaList } from '@vant/area-data';\n\nPage({\n  data: {\n    areaList,\n  },\n});\n

选中省市区

如果想选中某个省市区，需要传入一个value属性，绑定对应的省市区code。

<van-area area-list="{{ areaList }}" value="110101" />\n

配置显示列

可以通过columns-num属性配置省市区显示的列数，默认情况下会显示省市区，当你设置为2，则只会显示省市选择。

<van-area area-list="{{ areaList }}" columns-num="{{ 2 }}" title="标题" />\n

配置列占位提示文字

可以通过columns-placeholder属性配置每一列的占位提示文字。

<van-area\n  area-list="{{ areaList }}"\n  columns-placeholder="{{ ['请选择', '请选择', '请选择'] }}"\n  title="标题"\n/>\n

云开发示例

使用云开发获取省市区数据

实际项目中，可以通过小程序云开发的能力，将省市区数据保存在云开发的数据库中，并在小程序中使用云开发的接口异步获取数据。

在小程序中使用云能力之前需要先调用wx.could.init方法完成云能力的初始化。

const db = wx.cloud.database();\n\ndb.collection('region')\n  .limit(1)\n  .get()\n  .then((res) => {\n    if (res.data && res.data.length > 0) {\n      this.setData({\n        areaList: res.data[0],\n      });\n    }\n  })\n  .catch((err) => {\n    console.log(err);\n  });\n

API

Props

参数说明类型默认值
value当前选中的省市区codestring-
title顶部栏标题string-
area-list省市区数据，格式见下方object-
columns-num省市区显示列数，3-省市区，2-省市，1-省string | number3
columns-placeholder列占位提示文字string[][]
loading是否显示加载状态booleanfalse
item-height选项高度number44
visible-item-count可见的选项个数number6
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消

Events

事件说明回调参数
bind:confirm点击右上方完成按钮一个数组参数，具体格式看下方数据格式章节
bind:cancel点击取消按钮时-
bind:change选项改变时触发Picker 实例，所有列选中值，当前列对应的索引

方法

通过 selectComponent 可以获取到 Area 实例并调用实例方法。

方法名参数返回值介绍
resetcode: string-根据 code 重置所有选项，若不传 code，则重置到第一项

点击完成时返回的数据格式

返回的数据整体为一个 Object，包含 values, indexs 两个 key。

values 整体为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中的数据。

code 代表被选中的地区编码， name 代表被选中的地区名称。

[\n  {\n    code: '110000',\n    name: '北京市',\n  },\n  {\n    code: '110100',\n    name: '北京市',\n  },\n  {\n    code: '110101',\n    name: '东城区',\n  },\n];\n

indexs 为一个数组，数组内包含 columnsNum 个数据， 每个数据对应一列选项中被选中项的序号。

',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('

Button 按钮

介绍

按钮用于触发一个操作，如提交表单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-button": "@vant/weapp/button/index"\n}\n

代码演示

按钮类型

支持default、primary、info、warning、danger五种类型，默认为default。

<van-button type="default">默认按钮</van-button>\n<van-button type="primary">主要按钮</van-button>\n<van-button type="info">信息按钮</van-button>\n<van-button type="warning">警告按钮</van-button>\n<van-button type="danger">危险按钮</van-button>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-button plain type="primary">朴素按钮</van-button>\n<van-button plain type="info">朴素按钮</van-button>\n

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现。

<van-button plain hairline type="primary">细边框按钮</van-button>\n<van-button plain hairline type="info">细边框按钮</van-button>\n

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发。

<van-button disabled type="primary">禁用状态</van-button>\n<van-button disabled type="info">禁用状态</van-button>\n

加载状态

<van-button loading type="primary" />\n<van-button loading type="primary" loading-type="spinner" />\n<van-button loading type="info" loading-text="加载中..." />\n

按钮形状

<van-button square type="primary">方形按钮</van-button>\n<van-button round type="info">圆形按钮</van-button>\n

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。

<van-button icon="star-o" type="primary" />\n<van-button icon="star-o" type="primary">按钮</van-button>\n<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">\n  按钮\n</van-button>\n

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal。

<van-button type="primary" size="large">大号按钮</van-button>\n<van-button type="primary" size="normal">普通按钮</van-button>\n<van-button type="primary" size="small">小型按钮</van-button>\n<van-button type="primary" size="mini">迷你按钮</van-button>\n

块级元素

通过block属性可以将按钮的元素类型设置为块级元素。

<van-button type="primary" block>块级元素</van-button>\n

自定义颜色

通过color属性可以自定义按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>\n<van-button color="#7232dd" plain>单色按钮</van-button>\n<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n  渐变色按钮\n</van-button>\n

API

Props

参数说明类型默认值
id标识符string-
type按钮类型，可选值为 primary info warning dangerstringdefault
size按钮尺寸，可选值为 normal large small ministringnormal
color v1.0.0按钮颜色，支持传入linear-gradient渐变色string-
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
plain是否为朴素按钮booleanfalse
block是否为块级元素booleanfalse
round是否为圆形按钮booleanfalse
square是否为方形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载状态图标类型，可选值为 spinnerstringcircular
loading-size加载图标大小string20px
custom-style自定义样式string-
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
business-id客服消息子商户 idnumber-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any-
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string-

Events

事件名说明参数
bind:click点击按钮，且按钮状态不为加载或禁用时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

类名说明
custom-class根节点样式类
loading-class加载图标样式类
',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('

Calendar 日历

介绍

日历组件用于选择日期或日期区间。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-calendar": "@vant/weapp/calendar/index"\n}\n

代码演示

选择单个日期

下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发confirm事件。

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: this.formatDate(event.detail),\n    });\n  },\n});\n

选择多个日期

设置type为multiple后可以选择多个日期，此时confirm事件返回的 date 为数组结构，数组包含若干个选中的日期。

<van-cell title="选择多个日期" value="{{ text }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="multiple"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    text: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  onConfirm(event) {\n    this.setData({\n      show: false,\n      date: `选择了 ${event.detail.length} 个日期`,\n    });\n  },\n});\n

选择日期区间

设置type为range后可以选择日期区间，此时confirm事件返回的 date 为数组结构，数组第一项为开始时间，第二项为结束时间。

<van-cell title="选择日期区间" value="{{ date }}" bind:click="onDisplay" />\n<van-calendar\n  show="{{ show }}"\n  type="range"\n  bind:close="onClose"\n  bind:confirm="onConfirm"\n/>\n
Page({\n  data: {\n    date: '',\n    show: false,\n  },\n\n  onDisplay() {\n    this.setData({ show: true });\n  },\n  onClose() {\n    this.setData({ show: false });\n  },\n  formatDate(date) {\n    date = new Date(date);\n    return `${date.getMonth() + 1}/${date.getDate()}`;\n  },\n  onConfirm(event) {\n    const [start, end] = event.detail;\n    this.setData({\n      show: false,\n      date: `${this.formatDate(start)} - ${this.formatDate(end)}`,\n    });\n  },\n});\n

Tips: 默认情况下，日期区间的起止时间不能为同一天，可以通过设置 allow-same-day 属性来允许选择同一天。

快捷选择

将show-confirm设置为false可以隐藏确认按钮，这种情况下选择完成后会立即触发confirm事件。

<van-calendar show="{{ show }}" show-confirm="{{ false }}" />\n

自定义颜色

通过color属性可以自定义日历的颜色，对选中日期和底部按钮生效。

<van-calendar show="{{ show }}" color="#07c160" />\n

自定义日期范围

通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。

<van-calendar\n  show="{{ show }}"\n  min-date="{{ minDate }}"\n  max-date="{{ maxDate }}"\n/>\n
Page({\n  data: {\n    show: false,\n    minDate: new Date(2010, 0, 1).getTime(),\n    maxDate: new Date(2010, 0, 31).getTime(),\n  },\n});\n

自定义按钮文字

通过confirm-text设置按钮文字，通过confirm-disabled-text设置按钮禁用时的文字。

<van-calendar\n  show="{{ show }}"\n  type="range"\n  confirm-text="完成"\n  confirm-disabled-text="请选择结束时间"\n/>\n

自定义日期文案

通过传入formatter函数来对日历上每一格的内容进行格式化

<van-calendar show="{{ show }}" type="range" formatter="{{ formatter }}" />\n
Page({\n  data: {\n    formatter(day) {\n      const month = day.date.getMonth() + 1;\n      const date = day.date.getDate();\n\n      if (month === 5) {\n        if (date === 1) {\n          day.topInfo = '劳动节';\n        } else if (date === 4) {\n          day.topInfo = '五四青年节';\n        } else if (date === 11) {\n          day.text = '今天';\n        }\n      }\n\n      if (day.type === 'start') {\n        day.bottomInfo = '入住';\n      } else if (day.type === 'end') {\n        day.bottomInfo = '离店';\n      }\n\n      return day;\n    },\n  },\n});\n

自定义弹出位置

通过position属性自定义弹出层的弹出位置，可选值为top、left、right。

<van-calendar show="{{ show }}" round="false" position="right" />\n

日期区间最大范围

选择日期区间时，可以通过max-range属性来指定最多可选天数，选择的范围超过最多可选天数时，会弹出相应的提示文案。

<van-calendar type="range" max-range="{{ 3 }}" />\n

自定义周起始日

通过 first-day-of-week 属性设置一周从哪天开始。

<van-calendar first-day-of-week="{{ 1 }}" />\n

平铺展示

将poppable设置为false，日历会直接展示在页面内，而不是以弹层的形式出现。

<van-calendar\n  title="日历"\n  poppable="{{ false }}"\n  show-confirm="{{ false }}"\n  class="calendar"\n/>\n
.calendar {\n  --calendar-height: 500px;\n}\n

API

Props

参数说明类型默认值
type选择类型:
single表示选择单个日期，
multiple表示选择多个日期，
range表示选择日期区间		stringsingle
title日历标题string日期选择
color主题色，对底部按钮和选中日期生效string#ee0a24
min-date可选择的最小日期timestamp当前日期
max-date可选择的最大日期timestamp当前日期的六个月后
default-date默认选中的日期，type为multiple或range时为数组timestamp | timestamp[]今天
row-height日期行高number | string64
formatter日期格式化函数(day: Day) => Day-
poppable是否以弹层的形式展示日历booleantrue
show-mark是否显示月份背景水印booleantrue
show-title是否展示日历标题booleantrue
show-subtitle是否展示日历副标题（年月）booleantrue
show-confirm是否展示确认按钮booleantrue
confirm-text确认按钮的文字string确定
confirm-disabled-text确认按钮处于禁用状态时的文字string确定
first-day-of-week设置周起始日0~60
readonly v1.9.1是否为只读状态，只读状态下不能选择日期booleanfalse

Poppable Props

当 Calendar 的 poppable 为 true 时，支持以下 props:

参数说明类型默认值
show是否显示日历弹窗booleanfalse
position弹出位置，可选值为 top right leftstringbottom
round是否显示圆角弹窗booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Range Props

当 Calendar 的 type 为 range 时，支持以下 props:

参数说明类型默认值
max-range日期区间最多可选天数，默认无限制number | string-
range-prompt范围选择超过最多可选天数时的提示文案string | null选择天数不能超过 xx 天
show-range-prompt范围选择超过最多可选天数时，是否展示提示文案booleantrue
allow-same-day是否允许日期范围的起止时间为同一天booleanfalse

Day 数据结构

日历中的每个日期都对应一个 Day 对象，通过formatter属性可以自定义 Day 对象的内容。

键名说明类型
date日期对应的 Date 对象Date
type日期类型，可选值为selected、start、middle、end、disabledstring
text中间显示的文字string
topInfo上方的提示信息string
bottomInfo下方的提示信息string
className自定义 classNamestring

Events

事件名说明回调参数
select点击任意日期时触发value: Date | Date[]
unselect当 Calendar 的 type 为 multiple 时,点击已选中的日期时触发value: Date
confirm日期选择完成后触发，若show-confirm为true，则点击确认按钮后触发value: Date | Date[]
open打开弹出层时触发-
close关闭弹出层时触发-
opened打开弹出层且动画结束后触发-
closed关闭弹出层且动画结束后触发-
over-range范围选择超过最多可选天数时触发-
click-subtitle v1.8.1点击日历副标题时触发WechatMiniprogram.TouchEvent

Slots

名称说明
title自定义标题
footer自定义底部区域内容

方法

通过 selectComponent 可以获取到 Calendar 实例并调用实例方法。

方法名说明参数返回值
reset重置选中的日期到默认值--
',24),L=[E],U={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",N,L)))},R={class:"van-doc-markdown-body"},G=t('

Card 商品卡片

介绍

商品卡片，用于展示商品的图片、价格等信息。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-card": "@vant/weapp/card/index"\n}\n

代码演示

基础用法

<van-card\n  num="2"\n  price="2.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n/>\n

高级用法

可以通过插槽添加定制内容。

<van-card\n  num="2"\n  tag="标签"\n  price="10.00"\n  desc="描述信息"\n  title="商品标题"\n  thumb="{{ imageURL }}"\n>\n  <view slot="footer">\n    <van-button size="mini">按钮</van-button>\n    <van-button size="mini">按钮</van-button>\n  </view>\n</van-card>\n

API

Props

参数说明类型默认值
thumb左侧图片string-
thumb-mode左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值stringaspectFit
title标题string-
desc描述string-
tag标签string-
num商品数量string | number-
price商品价格string | number-
origin-price商品划线原价string | number-
centered内容是否垂直居中stringfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
lazy-load是否开启图片懒加载booleanfalse

Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效
desc自定义描述栏，如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价，如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片，如果设置了thumb属性则不生效
tag自定义图片角标，如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类
',10),V=[G],O={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",R,V)))},M={class:"van-doc-markdown-body"},W=[t('

Cell 单元格

介绍

单元格为列表中的单个展示项。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-cell": "@vant/weapp/cell/index",\n  "van-cell-group": "@vant/weapp/cell-group/index"\n}\n

代码演示

基础用法

Cell可以单独使用，也可以与CellGroup搭配使用。CellGroup可以为Cell提供上下外边框。

<van-cell-group>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" border="{{ false }}" />\n</van-cell-group>\n

卡片风格

通过 CellGroup 的 inset 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。

<van-cell-group inset>\n  <van-cell title="单元格" value="内容" />\n  <van-cell title="单元格" value="内容" label="描述信息" />\n</van-cell-group>\n

单元格大小

通过size属性可以控制单元格的大小。

<van-cell title="单元格" value="内容" size="large" />\n<van-cell title="单元格" value="内容" size="large" label="描述信息" />\n

展示图标

通过icon属性在标题左侧展示图标。

<van-cell title="单元格" icon="location-o" />\n

展示箭头

设置is-link属性后会在单元格右侧显示箭头，并且可以通过arrow-direction属性控制箭头方向。

<van-cell title="单元格" is-link />\n<van-cell title="单元格" is-link value="内容" />\n<van-cell title="单元格" is-link value="内容" arrow-direction="down" />\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-cell\n  is-link\n  title="单元格"\n  link-type="navigateTo"\n  url="/pages/dashboard/index"\n/>\n

分组标题

通过CellGroup的title属性可以指定分组标题。

<van-cell-group title="分组1">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n<van-cell-group title="分组2">\n  <van-cell title="单元格" value="内容" />\n</van-cell-group>\n

使用插槽

如以上用法不能满足你的需求，可以使用插槽来自定义内容。

<van-cell value="内容" icon="shop-o" is-link>\n  <view slot="title">\n    <view class="van-cell-text">单元格</view>\n    <van-tag type="danger">标签</van-tag>\n  </view>\n</van-cell>\n<van-cell title="单元格">\n  <van-icon slot="right-icon" name="search" class="custom-icon" />\n</van-cell>\n

垂直居中

通过center属性可以让Cell的左右内容都垂直居中。

<van-cell center title="单元格" value="内容" label="描述信息" />\n

API

CellGroup Props

参数说明类型默认值
title分组标题string-
inset v1.7.2是否展示为圆角卡片风格booleanfalse
border是否显示外边框booleantrue

CellGroup 外部样式类

类名说明
custom-class根节点样式类

Cell Props

参数说明类型默认值
icon左侧图标名称或图片链接，可选值见 Icon 组件string-
title左侧标题string | number-
title-width标题宽度，须包含单位string-
value右侧内容string | number-
label标题下方的描述信息string-
size单元格大小，可选值为 largestring-
border是否显示下边框booleantrue
center是否使内容垂直居中booleanfalse
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
clickable是否开启点击反馈booleanfalse
is-link是否展示右侧箭头并开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
use-label-slot是否使用 label slotbooleanfalse
title-style v1.4.0标题样式string-

Cell Event

事件名说明参数
bind:click点击单元格时触发-

Cell Slot

名称说明
-自定义value显示内容，如果设置了value属性则不生效
title自定义title显示内容，如果设置了title属性则不生效
label自定义label显示内容，需要设置 use-label-slot属性
icon自定义icon显示内容，如果设置了icon属性则不生效
right-icon自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
label-class描述信息样式类
value-class右侧内容样式类
',20)],$={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",M,W)))},H={class:"van-doc-markdown-body"},K=[t('

Checkbox 复选框

介绍

在一组备选项中进行多选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-checkbox": "@vant/weapp/checkbox/index",\n  "van-checkbox-group": "@vant/weapp/checkbox-group/index"\n}\n

代码演示

基础用法

通过value绑定复选框的勾选状态。

<van-checkbox value="{{ checked }}" bind:change="onChange">复选框</van-checkbox>\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange(event) {\n    this.setData({\n      checked: event.detail,\n    });\n  },\n});\n

禁用状态

通过设置disabled属性可以禁用复选框。

<van-checkbox disabled value="{{ checked }}" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义形状

将shape属性设置为square，复选框的形状会变成方形。

<van-checkbox value="{{ checked }}" shape="square" bind:change="onChange">\n  复选框\n</van-checkbox>\n

自定义颜色

通过checked-color属性可以自定义选中状态下的图标颜色。

<van-checkbox\n  value="{{ checked }}"\n  checked-color="#07c160"\n  bind:change="onChange"\n>\n  复选框\n</van-checkbox>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-checkbox value="{{ checked }}" icon-size="25px">复选框</van-checkbox>\n

自定义图标

通过 icon 插槽自定义图标。

<van-checkbox use-icon-slot value="{{ checked }}" bind:change="onChange">\n  自定义图标\n  <image slot="icon" src="{{ checked ? activeIcon : inactiveIcon }}" />\n</van-checkbox>\n
Page({\n  data: {\n    checked: true,\n    activeIcon: '//img.yzcdn.cn/icon-active.png',\n    inactiveIcon: '//img.yzcdn.cn/icon-normal.png',\n  },\n\n  onChange(event) {\n    this.setData({\n      checked: event.detail,\n    });\n  },\n});\n

禁用文本点击

通过设置label-disabled属性可以禁用复选框文本点击。

<van-checkbox value="{{ checked }}" label-disabled>复选框</van-checkbox>\n

复选框组

需要与van-checkbox-group一起使用，选中值是一个数组，通过value绑定在van-checkbox-group上，数组中的项即为选中的Checkbox的name属性设置的值。

<van-checkbox-group value="{{ result }}" bind:change="onChange">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n
Page({\n  data: {\n    result: ['a', 'b'],\n  },\n\n  onChange(event) {\n    this.setData({\n      result: event.detail,\n    });\n  },\n});\n

限制最大可选数

<van-checkbox-group value="{{ result }}" bind:change="onChange" max="{{ 2 }}">\n  <van-checkbox name="a">复选框 a</van-checkbox>\n  <van-checkbox name="b">复选框 b</van-checkbox>\n  <van-checkbox name="c">复选框 c</van-checkbox>\n</van-checkbox-group>\n

搭配单元格组件使用

此时你需要再引入Cell和CellGroup组件，并通过 checkbox 的 toggle 方法手动触发切换。

<van-checkbox-group value="{{ result }}" bind:change="onChange">\n  <van-cell-group>\n    <van-cell\n      wx:for="{{ list }}"\n      wx:key="index"\n      title="复选框 {{ item }}"\n      value-class="value-class"\n      clickable\n      data-index="{{ index }}"\n      bind:click="toggle"\n    >\n      <van-checkbox\n        catch:tap="noop"\n        class="checkboxes-{{ index }}"\n        name="{{ item }}"\n      />\n    </van-cell>\n  </van-cell-group>\n</van-checkbox-group>\n
Page({\n  data: {\n    list: ['a', 'b', 'c'],\n    result: ['a', 'b'],\n  },\n\n  onChange(event) {\n    this.setData({\n      result: event.detail,\n    });\n  },\n\n  toggle(event) {\n    const { index } = event.currentTarget.dataset;\n    const checkbox = this.selectComponent(`.checkboxes-${index}`);\n    checkbox.toggle();\n  },\n\n  noop() {},\n});\n
.value-class {\n  flex: none !important;\n}\n

API

Checkbox Props

参数说明类型默认值
name标识 Checkbox 名称string-
shape形状，可选值为 round squarestringround
value是否为选中状态booleanfalse
disabled是否禁用单选框booleanfalse
label-disabled是否禁用单选框内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
use-icon-slot是否使用 icon slotbooleanfalse
checked-color选中状态颜色string#1989fa
icon-sizeicon 大小string | number20px

CheckboxGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value所有选中项的 nameArray-
disabled是否禁用所有单选框booleanfalse
max设置最大可选数number0（无限制）
direction v1.7.0排列方向，可选值为 horizontalstringvertical

Checkbox Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

CheckboxGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前组件的值

Checkbox Slot

名称说明
-自定义文本
icon自定义图标

Checkbox 方法

通过 selectComponent 可以获取到 checkbox 实例并调用实例方法。

方法名参数返回值介绍
toggle--切换选中状态
',22)],Q={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",H,K)))},X={class:"van-doc-markdown-body"},Z=[t('

Circle 环形进度条

介绍

圆环形的进度条组件，支持进度渐变动画。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-circle": "@vant/weapp/circle/index"\n}\n

代码演示

基础用法

value属性表示进度条的目标进度。

<van-circle value="{{ 30 }}" text="text" />\n

宽度定制

通过stroke-width属性来控制进度条宽度。

<van-circle value="{{ value }}" stroke-width="6" text="宽度定制" />\n

颜色定制

通过color属性来控制进度条颜色，layer-color属性来控制轨道颜色。

<van-circle\n  value="{{ value }}"\n  layer-color="#eeeeee"\n  color="#ee0a24"\n  text="颜色定制"\n/>\n

渐变色

color属性支持传入对象格式来定义渐变色。

<van-circle value="{{ value }}" color="{{ gradientColor }}" text="渐变色" />\n
Page({\n  data: {\n    value: 25,\n    gradientColor: {\n      '0%': '#ffd01e',\n      '100%': '#ee0a24',\n    },\n  },\n});\n

逆时针方向

将clockwise设置为false，进度会从逆时针方向开始。

<van-circle\n  value="{{ value }}"\n  color="#07c160"\n  clockwise="{{ false }}"\n  text="逆时针"\n/>\n

大小定制

通过size属性设置圆环直径。

<van-circle value="{{ value }}" size="120" text="大小定制" />\n

API

Props

参数说明类型默认值
value目标进度number0
type指定 canvas 类型，可选值为 2dstring-
size圆环直径，默认单位为 pxnumber100
color进度条颜色，传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色string#fff
fill填充颜色string-
speed动画速度（单位为 value/s）number50
text文字string-
stroke-width进度条宽度number4
clockwise是否顺时针增加booleantrue

Slots

名称说明
-自定义文字内容，如果设置了fill，插槽内容会被原生组件覆盖
',13)],J={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",X,Z)))},Y={class:"van-doc-markdown-body"},ss=[t('

Layout 布局

介绍

Layout 提供了van-row和van-col两个组件来进行行列布局。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-row": "@vant/weapp/row/index",\n  "van-col": "@vant/weapp/col/index"\n}\n

代码演示

基本用法

Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

<van-row>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n  <van-col span="4">span: 4</van-col>\n  <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n</van-row>\n\n<van-row>\n  <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n

设置列元素间距

通过gutter属性可以设置列元素之间的间距，默认间距为 0。

<van-row gutter="20">\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n

API

Row Props

参数说明类型默认值
gutter列元素之间的间距（单位为 px）string | number-

Col Props

参数说明类型默认值
span列元素宽度string | number-
offset列元素偏移距离string | number-

外部样式类

类名说明
custom-class根节点样式类
',10)],as={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Y,ss)))},ts={class:"van-doc-markdown-body"},ns=[t('

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-collapse": "@vant/weapp/collapse/index",\n  "van-collapse-item": "@vant/weapp/collapse-item/index"\n}\n

代码演示

基础用法

通过value控制展开的面板列表，activeNames为数组格式。

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3" disabled>\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。

<van-collapse accordion value="{{ activeName }}" bind:change="onChange">\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeName: '1',\n  },\n  onChange(event) {\n    this.setData({\n      activeName: event.detail,\n    });\n  },\n});\n

事件监听

van-collapse 提供了 change, open 和 close 事件。change 事件在面板切换时触发，open 事件在面板展开时触发，close 事件在面板关闭时触发。

<van-collapse\n  value="{{ activeNames }}"\n  bind:change="onChange"\n  bind:open="onOpen"\n  bind:close="onClose"\n>\n  <van-collapse-item title="有赞微商城" name="1">\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n  <van-collapse-item title="有赞美业" name="3">\n    线上拓客，随时预约，贴心顺手的开单收银\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n  onOpen(event) {\n    Toast(`展开: ${event.detail}`);\n  },\n  onClose(event) {\n    Toast(`关闭: ${event.detail}`);\n  },\n});\n

自定义标题内容

<van-collapse value="{{ activeNames }}" bind:change="onChange">\n  <van-collapse-item name="1">\n    <view slot="title">有赞微商城<van-icon name="question-o" /></view>\n    提供多样店铺模板，快速搭建网上商城\n  </van-collapse-item>\n  <van-collapse-item title="有赞零售" name="2" icon="shop-o">\n    网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失\n  </van-collapse-item>\n</van-collapse>\n
Page({\n  data: {\n    activeNames: ['1'],\n  },\n  onChange(event) {\n    this.setData({\n      activeNames: event.detail,\n    });\n  },\n});\n

API

Collapse Props

参数说明类型默认值
value当前展开面板的 name非手风琴模式：(string | number)[]
手风琴模式：string | number		-
accordion是否开启手风琴模式booleanfalse
border是否显示外边框booleantrue

Collapse Event

事件名说明参数
change切换面板时触发activeNames: string | Array
open展开面板时触发currentName: string | number
close关闭面板时触发currentName: string | number

CollapseItem Props

参数说明类型默认值
name唯一标识符，默认为索引值string | numberindex
title标题栏左侧内容string | number-
icon标题栏左侧图标名称或图片链接，可选值见 Icon 组件string-
value标题栏右侧内容string | number-
label标题栏描述信息string-
border是否显示内边框booleantrue
is-link是否展示标题栏右侧箭头并开启点击反馈booleantrue
clickable是否开启点击反馈booleanfalse
disabled是否禁用面板booleanfalse

CollapseItem Slot

名称说明
-面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮，默认是arrow

Collapse 外部样式类

类名说明
custom-class根节点样式类

CollapseItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
',15)],ls={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ts,ns)))},ps={class:"van-doc-markdown-body"},es=[t('

内置样式

介绍

Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。

引入

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';\n

代码演示

文字省略

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">\n  这是一段宽度限制 250px 的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示两行 -->\n<view class="van-multi-ellipsis--l2">\n  这是一段最多显示两行的文字，后面的内容会省略。\n</view>\n\n<!-- 最多显示三行 -->\n<view class="van-multi-ellipsis--l3">\n  这是一段最多显示三行的文字，后面的内容会省略。\n</view>\n

1px 边框

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<!-- 上边框 -->\n<view class="van-hairline--top"></view>\n\n<!-- 下边框 -->\n<view class="van-hairline--bottom"></view>\n\n<!-- 左边框 -->\n<view class="van-hairline--left"></view>\n\n<!-- 右边框 -->\n<view class="van-hairline--right"></view>\n\n<!-- 上下边框 -->\n<view class="van-hairline--top-bottom"></view>\n\n<!-- 全边框 -->\n<view class="van-hairline--surround"></view>\n

全局字体

推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。

page {\n  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n    sans-serif;\n}\n
',7)],ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ps,es)))},cs={class:"van-doc-markdown-body"},os=[t('

ConfigProvider 全局配置

介绍

用于配置 Vant Weapp 组件的主题样式，从 v1.7.0 版本开始支持。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-config-provider": "@vant/weapp/config-provider/index"\n}\n

定制主题

介绍

Vant Weapp 组件通过丰富的 CSS 变量 来组织样式，通过覆盖这些 CSS 变量，可以实现定制主题、动态切换主题等效果。

示例

以 Button 组件为例，查看组件的样式，可以看到 .van-button--primary 类名上存在以下变量：

.van-button--primary {\n  color: var(--button-primary-color, #fff);\n  background: var(--button-primary-background-color, #07c160);\n  border: var(--button-border-width, 1px) solid var(\n      --button-primary-border-color,\n      #07c160\n    );\n}\n

自定义 CSS 变量

通过 CSS 覆盖

你可以直接在代码中覆盖这些 CSS 变量，Button 组件的样式会随之发生改变：

/* 添加这段样式后，Primary Button 会变成红色 */\npage {\n  --button-primary-background-color: red;\n}\n

通过 ConfigProvider 覆盖

ConfigProvider 组件提供了覆盖 CSS 变量的能力，你需要在根节点包裹一个 ConfigProvider 组件，并通过 theme-vars 属性来配置一些主题变量。

<van-config-provider theme-vars="{{ themeVars }}">\n  <van-cell-group>\n    <van-field label="评分">\n      <view slot="input" style="width: 100%">\n        <van-rate\n          model:value="{{ rate }}"\n          data-key="rate"\n          bind:change="onChange"\n        />\n      </view>\n    </van-field>\n    <van-field label="滑块" border="{{ false }}">\n      <view slot="input" style="width: 100%">\n        <van-slider\n          value="{{ slider }}"\n          data-key="slider"\n          bind:change="onChange"\n        />\n      </view>\n    </van-field>\n  </van-cell-group>\n\n  <view style="margin: 16px">\n    <van-button round block type="primary">提交</van-button>\n  </view>\n</van-config-provider>\n
import Page from '../../common/page';\n\nPage({\n  data: {\n    rate: 4,\n    slider: 50,\n    themeVars: {\n      rateIconFullColor: '#07c160',\n      sliderBarHeight: '4px',\n      sliderButtonWidth: '20px',\n      sliderButtonHeight: '20px',\n      sliderActiveBackgroundColor: '#07c160',\n      buttonPrimaryBorderColor: '#07c160',\n      buttonPrimaryBackgroundColor: '#07c160',\n    },\n  },\n\n  onChange(event) {\n    const { key } = event.currentTarget.dataset;\n    this.setData({\n      [key]: event.detail,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
theme-vars自定义主题变量object-
',8)],is={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",cs,os)))},hs={class:"van-doc-markdown-body"},rs=[t('

CountDown 倒计时

介绍

用于实时展示倒计时数值，支持毫秒精度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-count-down": "@vant/weapp/count-down/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基本用法

time属性表示倒计时总时长，单位为毫秒。

<van-count-down time="{{ time }}" />\n
Page({\n  data: {\n    time: 30 * 60 * 60 * 1000,\n  },\n});\n

自定义格式

通过format属性设置倒计时文本的内容。

<van-count-down time="{{ time }}" format="DD 天 HH 时 mm 分 ss 秒" />\n

毫秒级渲染

倒计时默认每秒渲染一次，设置millisecond属性可以开启毫秒级渲染。

<van-count-down millisecond time="{{ time }}" format="HH:mm:ss:SSS" />\n

自定义样式

设置use-slot属性后可以自定义倒计时样式，需要通过bind:change事件获取timeData对象并自行渲染，格式见下方表格。

<van-count-down use-slot time="{{ time }}" bind:change="onChange">\n  <text class="item">{{ timeData.hours }}</text>\n  <text class="item">{{ timeData.minutes }}</text>\n  <text class="item">{{ timeData.seconds }}</text>\n</van-count-down>\n
Page({\n  data: {\n    time: 30 * 60 * 60 * 1000,\n    timeData: {},\n  },\n\n  onChange(e) {\n    this.setData({\n      timeData: e.detail,\n    });\n  },\n});\n
.item {\n  display: inline-block;\n  width: 22px;\n  margin-right: 5px;\n  color: #fff;\n  font-size: 12px;\n  text-align: center;\n  background-color: #1989fa;\n  border-radius: 2px;\n}\n

手动控制

通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。

<van-count-down\n  class="control-count-down"\n  millisecond\n  time="{{ 3000 }}"\n  auto-start="{{ false }}"\n  format="ss:SSS"\n  bind:finish="finished"\n/>\n\n<van-grid clickable column-num="3">\n  <van-grid-item text="开始" icon="play-circle-o" bindclick="start" />\n  <van-grid-item text="暂停" icon="pause-circle-o" bindclick="pause" />\n  <van-grid-item text="重置" icon="replay" bindclick="reset" />\n</van-grid>\n
Page({\n  start() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.start();\n  },\n\n  pause() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.pause();\n  },\n\n  reset() {\n    const countDown = this.selectComponent('.control-count-down');\n    countDown.reset();\n  },\n\n  finished() {\n    Toast('倒计时结束');\n  },\n});\n

API

Props

参数说明类型默认值
time倒计时时长，单位毫秒number-
format时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒stringHH:mm:ss
auto-start是否自动开始倒计时booleantrue
millisecond是否开启毫秒级渲染booleanfalse
use-slot是否使用自定义样式插槽booleanfalse

Events

事件名说明回调参数
finish倒计时结束时触发-
change时间变化时触发，仅在开启use-slot后才会触发timeData

timeData 格式

名称说明类型
days剩余天数number
hours剩余小时number
minutes剩余分钟number
seconds剩余秒数number
milliseconds剩余毫秒number

方法

通过 selectComponent 可以获取到 CountDown 实例并调用实例方法。

方法名参数返回值介绍
start--开始倒计时
pause--暂停倒计时
reset--重设倒计时，若auto-start为true，重设后会自动开始倒计时
',14)],us={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",hs,rs)))},gs={class:"van-doc-markdown-body"},js=[t('

DatetimePicker 时间选择

介绍

用于选择时间，支持日期、时分等时间维度，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-datetime-picker": "@vant/weapp/datetime-picker/index"\n}\n

代码演示

选择完整时间

value 为时间戳。

<van-datetime-picker\n  type="datetime"\n  value="{{ currentDate }}"\n  min-date="{{ minDate }}"\n  max-date="{{ maxDate }}"\n  bind:input="onInput"\n/>\n
Page({\n  data: {\n    minHour: 10,\n    maxHour: 20,\n    minDate: new Date().getTime(),\n    maxDate: new Date(2019, 10, 1).getTime(),\n    currentDate: new Date().getTime(),\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选择日期（年月日）

value 为时间戳，通过传入 formatter 函数对选项文字进行处理。

<van-datetime-picker\n  type="date"\n  value="{{ currentDate }}"\n  bind:input="onInput"\n  min-date="{{ minDate }}"\n  formatter="{{ formatter }}"\n/>\n
Page({\n  data: {\n    currentDate: new Date().getTime(),\n    minDate: new Date().getTime(),\n    formatter(type, value) {\n      if (type === 'year') {\n        return `${value}年`;\n      }\n      if (type === 'month') {\n        return `${value}月`;\n      }\n      return value;\n    },\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选择日期（年月）

value 为时间戳。

<van-datetime-picker\n  type="year-month"\n  value="{{ currentDate }}"\n  min-date="{{ minDate }}"\n  bind:input="onInput"\n/>\n
Page({\n  data: {\n    currentDate: new Date().getTime(),\n    minDate: new Date().getTime(),\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选择时间

value 为字符串。

<van-datetime-picker\n  type="time"\n  value="{{ currentDate }}"\n  min-hour="{{ minHour }}"\n  max-hour="{{ maxHour }}"\n  bind:input="onInput"\n/>\n
Page({\n  data: {\n    currentDate: '12:00',\n    minHour: 10,\n    maxHour: 20,\n  },\n\n  onInput(event) {\n    this.setData({\n      currentDate: event.detail,\n    });\n  },\n});\n

选项过滤器

通过传入 filter 函数，可以对选项数组进行过滤，实现自定义时间间隔。

<van-datetime-picker\n  type="time"\n  value="{{ currentDate }}"\n  filter="{{ filter }}"\n/>\n
Page({\n  data: {\n    currentDate: '12:00',\n    filter(type, options) {\n      if (type === 'minute') {\n        return options.filter((option) => option % 5 === 0);\n      }\n\n      return options;\n    },\n  },\n});\n

API

Props

参数说明类型默认值
value当前选中值string | number-
type类型，可选值为 date time year-month
不建议动态修改		stringdatetime
min-date可选的最小时间，精确到分钟number十年前
max-date可选的最大时间，精确到分钟number十年后
min-hour可选的最小小时，针对 time 类型number0
max-hour可选的最大小时，针对 time 类型number23
min-minute可选的最小分钟，针对 time 类型number0
max-minute可选的最大分钟，针对 time 类型number59
filter选项过滤函数(type, values) => values-
formatter选项格式化函数(type, value) => value-
title顶部栏标题string''
show-toolbar是否显示顶部栏booleantrue
loading是否显示加载状态booleanfalse
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6

Events

事件名称说明回调参数
input当值变化时触发的事件当前 value
change当值变化时触发的事件组件实例
confirm点击完成按钮时触发的事件当前 value
cancel点击取消按钮时触发的事件-

change 事件

在change事件中，可以获取到组件实例，对组件进行相应的更新等操作：

函数说明
getColumnValue(index)获取对应列中选中的值
setColumnValue(index, value)设置对应列中选中的值
getColumnValues(index)获取对应列中所有的备选值
setColumnValues(index, values)设置对应列中所有的备选值
getValues()获取所有列中被选中的值，返回一个数组
setValues(values)values为一个数组，设置所有列中被选中的值

外部样式类

类名说明
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类
',14)],ms={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gs,js)))},vs={class:"van-doc-markdown-body"},bs=[t('

Dialog 弹出框

介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-dialog": "@vant/weapp/dialog/index"\n}\n

代码演示

消息提示

用于提示一些消息，只包含一个确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n}).then(() => {\n  // on close\n});\n

消息确认

用于确认消息，包含取消和确认按钮。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容',\n})\n  .then(() => {\n    // on confirm\n  })\n  .catch(() => {\n    // on cancel\n  });\n

圆角按钮风格

将 theme 选项设置为 round-button 可以展示圆角按钮风格的弹窗。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nDialog.alert({\n  title: '标题',\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n\nDialog.alert({\n  message: '弹窗内容',\n  theme: 'round-button',\n}).then(() => {\n  // on close\n});\n

异步关闭

通过 beforeClose 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。

<van-dialog id="van-dialog" />\n
import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';\n\nconst beforeClose = (action) => new Promise((resolve) => {\n  setTimeout(() => {\n    if (action === 'confirm') {\n      resolve(true);\n    } else {\n      // 拦截取消操作\n      resolve(false);\n    }\n  }, 1000);\n});\n\nDialog.confirm({\n  title: '标题',\n  message: '弹窗内容'\n  beforeClose\n});\n

组件调用

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

<van-dialog\n  use-slot\n  title="标题"\n  show="{{ show }}"\n  show-cancel-button\n  confirm-button-open-type="getUserInfo"\n  bind:close="onClose"\n  bind:getuserinfo="getUserInfo"\n>\n  <image src="https://img.yzcdn.cn/1.jpg" />\n</van-dialog>\n
Page({\n  data: {\n    show: true,\n  },\n\n  getUserInfo(event) {\n    console.log(event.detail);\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

API

方法

方法名参数返回值介绍
DialogoptionsPromise展示弹窗
Dialog.alertoptionsPromise展示消息提示弹窗
Dialog.confirmoptionsPromise展示消息确认弹窗
Dialog.setDefaultOptionsoptionsvoid修改默认配置，对所有 Dialog 生效
Dialog.resetDefaultOptions-void重置默认配置，对所有 Dialog 生效
Dialog.close-void关闭弹窗
Dialog.stopLoading-void停止按钮的加载状态

Options

通过函数调用 Dialog 时，支持传入以下选项：

参数说明类型默认值
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
messageAlign内容对齐方式，可选值为left rightstringcenter
theme样式风格，可选值为round-buttonstringdefault
zIndexz-index 层级number100
className自定义类名，dialog 在自定义组件内时无效string‘’
customStyle自定义样式string‘’
selector自定义选择器stringvan-dialog
showConfirmButton是否展示确认按钮booleantrue
showCancelButton是否展示取消按钮booleanfalse
confirmButtonText确认按钮的文案string确认
cancelButtonText取消按钮的文案string取消
overlay是否展示遮罩层booleantrue
overlayStyle自定义遮罩层样式object-
closeOnClickOverlay点击遮罩层时是否关闭弹窗booleanfalse
asyncClose已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
beforeClose关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
transition动画名称，可选值为fade nonestringscale
confirmButtonOpenType确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Options

使用confirmButtonOpenType后，支持以下选项：

参数说明类型默认值open-type
appParameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
sessionFrom会话来源string-contact
businessId客服消息子商户 idnumber-contact
sendMessageTitle会话内消息卡片标题string当前标题contact
sendMessagePath会话内消息卡片点击跳转小程序路径string当前分享路径contact
sendMessageImgsendMessageImgstring截图contact
showMessageCard显示会话内消息卡片stringfalsecontact

Props

通过组件调用 Dialog 时，支持以下 Props:

参数说明类型默认值
show是否显示弹窗boolean-
title标题string-
width弹窗宽度，默认单位为pxstring | number320px
message文本内容，支持通过\\n换行string-
theme样式风格，可选值为round-buttonstringdefault
message-align内容对齐方式，可选值为left rightstringcenter
z-indexz-index 层级number100
class-name自定义类名，dialog 在自定义组件内时无效string‘’
custom-style自定义样式string‘’
show-confirm-button是否展示确认按钮booleantrue
show-cancel-button是否展示取消按钮booleanfalse
confirm-button-text确认按钮的文案string确认
cancel-button-text取消按钮的文案string取消
confirm-button-color确认按钮的字体颜色string#ee0a24
cancel-button-color取消按钮的字体颜色string#333
overlay是否展示遮罩层booleantrue
overlay-style v1.0.0自定义遮罩层样式object-
close-on-click-overlay点击遮罩层时是否关闭弹窗booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse
use-title-slot是否使用自定义标题的插槽booleanfalse
async-close已废弃，将在 2.0.0 移除，请使用 beforeClose 属性代替booleanfalse
before-close关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise(action) => boolean | Promise<boolean>-
transition动画名称，可选值为fadestringscale
confirm-button-open-type确认按钮的微信开放能力，具体支持可参考 微信官方文档string-

OpenType Props

使用confirm-button-open-type后，支持以下 Props：

参数说明类型默认值open-type
app-parameter打开 APP 时，向 APP 传递的参数string-launchApp
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringengetUserInfo
session-from会话来源string-contact
business-id客服消息子商户 idnumber-contact
send-message-title会话内消息卡片标题string当前标题contact
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径contact
send-message-imgsendMessageImgstring截图contact
show-message-card显示会话内消息卡片stringfalsecontact

Events

事件说明回调参数
bind:close弹窗关闭时触发event.detail: 触发关闭事件的来源，
枚举为confirm,cancel,overlay
bind:confirm点击确认按钮时触发-
bind:cancel点击取消按钮时触发-
bind:getuserinfo点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo		-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-
bind:opensetting在打开授权设置页后回调-

Slot

名称说明
title自定义title显示内容，如果设置了title属性则不生效
',17)],qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vs,bs)))},ys={class:"van-doc-markdown-body"},fs=[t('

Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手

"usingComponents": {\n  "van-divider": "@vant/weapp/divider/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-divider />\n

使用 hairline

<van-divider hairline />\n

虚线

<van-divider dashed />\n

文本位置

<van-divider contentPosition="center">文本</van-divider>\n<van-divider contentPosition="left">文本</van-divider>\n<van-divider contentPosition="right">文本</van-divider>\n

自定义属性

<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>\n<van-divider contentPosition="center" borderColor="#1989fa">\n  border 颜色\n</van-divider>\n<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>\n

自定义样式

<van-divider\n  contentPosition="center"\n  customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"\n>\n  文本\n</van-divider>\n

API

Props

参数说明类型默认值
dashed虚线booleanfalse
hairline细线booleanfalse
content-position文本位置，left center rightstring-
custom-style自定义样式string-

Slot

名称说明
默认自定义文本内容
',13)],xs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ys,fs)))},ws={class:"van-doc-markdown-body"},zs=[t('

DropdownMenu 下拉菜单

介绍

向下弹出的菜单列表。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",\n  "van-dropdown-item": "@vant/weapp/dropdown-item/index"\n}\n

代码演示

基础用法

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n
Page({\n  data: {\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    option2: [\n      { text: '默认排序', value: 'a' },\n      { text: '好评排序', value: 'b' },\n      { text: '销量排序', value: 'c' },\n    ],\n    value1: 0,\n    value2: 'a',\n  },\n});\n

自定义菜单内容

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item id="item" title="{{ itemTitle }}">\n    <van-cell title="{{ switchTitle1 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch1 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch1Change"\n      />\n    </van-cell>\n    <van-cell title="{{ switchTitle2 }}">\n      <van-switch\n        slot="right-icon"\n        size="24px"\n        style="height: 26px"\n        checked="{{ switch2 }}"\n        active-color="#ee0a24"\n        bind:change="onSwitch2Change"\n      />\n    </van-cell>\n    <view style="padding: 5px 16px;">\n      <van-button type="danger" block round bind:click="onConfirm">\n        确认\n      </van-button>\n    </view>\n  </van-dropdown-item>\n</van-dropdown-menu>\n
Page({\n  data: {\n    switchTitle1: '包邮',\n    switchTitle2: '团购',\n    itemTitle: '筛选',\n    option1: [\n      { text: '全部商品', value: 0 },\n      { text: '新款商品', value: 1 },\n      { text: '活动商品', value: 2 },\n    ],\n    value1: 0,\n  },\n\n  onConfirm() {\n    this.selectComponent('#item').toggle();\n  },\n\n  onSwitch1Change({ detail }) {\n    this.setData({ switch1: detail });\n  },\n\n  onSwitch2Change({ detail }) {\n    this.setData({ switch2: detail });\n  },\n});\n

自定义选中状态颜色

<van-dropdown-menu active-color="#1989fa">\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n

向上展开

<van-dropdown-menu direction="up">\n  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />\n</van-dropdown-menu>\n

禁用菜单

<van-dropdown-menu>\n  <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />\n  <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />\n</van-dropdown-menu>\n

API

参数说明类型默认值
active-color菜单标题和选项的选中态颜色string#ee0a24
z-index菜单栏 z-index 层级number10
duration动画时长，单位毫秒number200
direction菜单展开方向，可选值为 upstringdown
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭菜单booleantrue
close-on-click-outside是否在点击外部 menu 后关闭菜单booleantrue
参数说明类型默认值
value当前选中项对应的 valuenumber | string-
title菜单项标题string当前选中项文字
options选项数组Option[][]
disabled是否禁用菜单booleanfalse
title-class标题额外类名string-
popup-style自定义弹出层样式string-
事件名说明回调参数
change点击选项导致 value 变化时触发value
open打开菜单栏时触发-
close关闭菜单栏时触发-
opened打开菜单栏且动画结束后触发-
closed关闭菜单栏且动画结束后触发-

通过 selectComponent(id) 可访问。

方法名说明参数返回值
toggle切换菜单展示状态，传true为显示，false为隐藏，不传参为取反show?: boolean-

Option 数据结构

键名说明类型
text文字string
value标识符number | string
icon左侧图标名称或图片链接string

外部样式类

类名说明
custom-class根节点样式类
',16)],ks={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ws,zs)))},_s={class:"van-doc-markdown-body"},Cs=[t('

Empty 空状态

介绍

空状态时的占位提示。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-empty": "@vant/weapp/empty/index"\n}\n

代码演示

基础用法

<van-empty description="描述文字" />\n

图片类型

Empty 组件内置了多种占位图片类型，可以在不同业务场景下使用。

<!-- 通用错误 -->\n<van-empty image="error" description="描述文字" />\n<!-- 网络错误 -->\n<van-empty image="network" description="描述文字" />\n<!-- 搜索提示 -->\n<van-empty image="search" description="描述文字" />\n

自定义图片

需要自定义图片时，可以在 image 属性中传入任意图片 URL。

<van-empty\n  class="custom-image"\n  image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n  description="描述文字"\n/>\n

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<van-empty description="描述文字">\n  <van-button round type="danger" class="bottom-button">按钮</van-button>\n</van-empty>\n\n<style>\n  .bottom-button {\n    width: 160px;\n    height: 40px;\n  }\n</style>\n

API

Props

参数说明类型默认值
image图片类型，可选值为 error network search，支持传入图片 URLstringdefault
description图片下方的描述文字string-

Slots

名称说明
-自定义底部内容
image自定义图标
description自定义描述文字
',11)],Ps={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_s,Cs)))},Ss={class:"van-doc-markdown-body"},Is=[t('

Field 输入框

介绍

用户可以在文本框内输入或编辑文字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-field": "@vant/weapp/field/index"\n}\n

代码演示

基础用法

<van-cell-group>\n  <van-field\n    value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n    bind:change="onChange"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n\n  onChange(event) {\n    // event.detail 为当前输入的值\n    console.log(event.detail);\n  },\n});\n

双向绑定

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。

<van-cell-group>\n  <van-field\n    model:value="{{ value }}"\n    placeholder="请输入用户名"\n    border="{{ false }}"\n  />\n</van-cell-group>\n
Page({\n  data: {\n    value: '',\n  },\n});\n

自定义类型

根据type属性定义不同类型的输入框。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    required\n    clearable\n    label="用户名"\n    icon="question-o"\n    placeholder="请输入用户名"\n    bind:click-icon="onClickIcon"\n  />\n\n  <van-field\n    value="{{ password }}"\n    type="password"\n    label="密码"\n    placeholder="请输入密码"\n    required\n    border="{{ false }}"\n  />\n</van-cell-group>\n

禁用输入框

<van-cell-group>\n  <van-field\n    value="输入框已禁用"\n    label="用户名"\n    left-icon="contact"\n    disabled\n    border="{{ false }}"\n  />\n</van-cell-group>\n

错误提示

通过error或者error-message属性增加对应的错误提示。

<van-cell-group>\n  <van-field\n    value="{{ username }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    error\n  />\n  <van-field\n    value="{{ phone }}"\n    label="手机号"\n    placeholder="请输入手机号"\n    error-message="手机号格式错误"\n    border="{{ false }}"\n  />\n</van-cell-group>\n

内容对齐方式

可以通过input-align属性设置内容的对齐方式。

<van-cell-group>\n  <van-field\n    value="{{ username3 }}"\n    label="用户名"\n    placeholder="请输入用户名"\n    input-align="right"\n  />\n</van-cell-group>\n

高度自适应

对于 textarea，可以通过autosize属性设置高度自适应。

<van-cell-group>\n  <van-field\n    value="{{ message }}"\n    label="留言"\n    type="textarea"\n    placeholder="请输入留言"\n    autosize\n    border="{{ false }}"\n  />\n</van-cell-group>\n

插入按钮

通过 button slot 可以在输入框尾部插入按钮。

<van-cell-group>\n  <van-field\n    value="{{ sms }}"\n    center\n    clearable\n    label="短信验证码"\n    placeholder="请输入短信验证码"\n    border="{{ false }}"\n    use-button-slot\n  >\n    <van-button slot="button" size="small" type="primary">\n      发送验证码\n    </van-button>\n  </van-field>\n</van-cell-group>\n

常见问题

真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象？

由于微信小程序的 input 组件和 textarea 组件是原生组件，聚焦时会将原生的输入框覆盖在对应位置上，导致了这个现象的产生。

相关的讨论可以查看微信开放社区。

真机上 placeholder 为什么会盖过 popup 等其它组件？

由于微信小程序的 input 组件和 textarea 组件是原生组件，遵循原生组件的限制，详情可以查看原生组件说明。

textarea 的 placeholder 在真机上为什么会偏移？

微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同，在 iOS 中会有默认的 padding，且无法置 0。

同时 placeholder-style 对 vertical-align、line-height 等大量 css 属性都不生效。

这一系列的问题导致了 placeholder 在真机上可能会出现偏移。

微信已经在 2.10.0 基础库版本后支持移除默认的 padding，但低版本仍有问题。详情可以查看 微信开放社区。

手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件？

这是微信小程序的 input 组件本身的问题，如果需要兼容手写输入法的场景，可以在 blur 事件中取到输入的值。

相关的讨论可以查看微信开放社区。

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label输入框左侧文本string-
size单元格大小，可选值为 largestring-
value当前输入的值string | number-
type可设置为任意原生类型, 如 number idcard textarea digitstringtext
fixed如果 type 为 textarea 且在一个 position:fixed 的区域，需要显示指定属性 fixed 为 truebooleanfalse
focus获取焦点booleanfalse
border是否显示内边框booleantrue
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleanfalse
clickable是否开启点击反馈booleanfalse
required是否显示表单必填星号booleanfalse
center是否使内容垂直居中booleanfalse
password是否是密码类型booleanfalse
title-width标题宽度string6.2em
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
custom-style自定义样式string-
is-link是否展示右侧箭头并开启点击反馈booleanfalse
arrow-direction箭头方向，可选值为 left up downstring-
show-word-limit是否显示字数统计，需要设置maxlength属性booleanfalse
error是否将输入内容标红booleanfalse
error-message底部错误提示文案，为空时不展示string''
error-message-align底部错误提示文案对齐方式，可选值为 center rightstring''
input-align输入框内容对齐方式，可选值为 center rightstringleft
autosize是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为px		boolean | objectfalse
left-icon左侧图标名称或图片链接，可选值见 Icon 组件string-
right-icon右侧图标名称或图片链接，可选值见 Icon 组件string-
confirm-type设置键盘右下角按钮的文字，仅在 type=‘text’ 时生效stringdone
confirm-hold点击键盘右下角按钮时是否保持键盘不收起，在 type=‘textarea’ 时无效booleanfalse
hold-keyboardfocus 时，点击页面的时候不收起键盘booleanfalse
cursor-spacing输入框聚焦时底部与键盘的距离number50
adjust-position键盘弹起时，是否自动上推页面booleantrue
show-confirm-bar是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效booleantrue
selection-start光标起始位置，自动聚集时有效，需与 selection-end 搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与 selection-start 搭配使用number-1
auto-focus自动聚焦，拉起键盘booleanfalse
disable-default-padding是否去掉 iOS 下的默认内边距，只对 textarea 有效booleantrue
cursor指定 focus 时的光标位置number-1
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
always-embed v1.9.2强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)booleanfalse

Events

事件说明回调参数
bind:input输入内容时触发event.detail: 当前输入值
bind:change输入内容时触发event.detail: 当前输入值
bind:confirm点击完成按钮时触发event.detail: 当前输入值
bind:click-icon点击尾部图标时触发-
bind:focus输入框聚焦时触发event.detail.value: 当前输入值;
event.detail.height: 键盘高度
bind:blur输入框失焦时触发event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 type 不为 textarea，值为 0)
bind:clear点击清空控件时触发-
bind:click-input点击输入区域时触发-
bind:linechange输入框行数变化时调用，只对 textarea 有效event.detail = { height: 0, heightRpx: 0, lineCount: 0 }
bind:keyboardheightchange键盘高度发生变化的时候触发此事件event.detail = { height: height, duration: duration }

Slot

名称说明
label自定义输入框标签，如果设置了label属性则不生效
left-icon自定义输入框头部图标
right-icon自定义输入框尾部图标
button自定义输入框尾部按钮
input自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效

外部样式类

类名说明
label-class左侧文本样式类
input-class输入框样式类
right-icon-class右侧图标样式类
',22)],Ds={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ss,Is)))},Ts={class:"van-doc-markdown-body"},As=[t('

GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-goods-action": "@vant/weapp/goods-action/index",\n  "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",\n  "van-goods-action-button": "@vant/weapp/goods-action-button/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />\n  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />\n  <van-goods-action-button\n    text="加入购物车"\n    type="warning"\n    bind:click="onClickButton"\n  />\n  <van-goods-action-button text="立即购买" bind:click="onClickButton" />\n</van-goods-action>\n
Page({\n  onClickIcon() {\n    Toast('点击图标');\n  },\n\n  onClickButton() {\n    Toast('点击按钮');\n  },\n});\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" dot />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button text="加入购物车" type="warning" />\n  <van-goods-action-button text="立即购买" />\n</van-goods-action>\n

自定义按钮颜色

通过color属性可以自定义按钮的颜色，支持传入linear-gradient渐变色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />\n  <van-goods-action-button color="#7232dd" text="立即购买" />\n</van-goods-action>\n

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

<van-goods-action>\n  <van-goods-action-icon icon="chat-o" text="客服" />\n  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />\n  <van-goods-action-icon icon="shop-o" text="店铺" />\n  <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />\n  <van-goods-action-button plain color="#7232dd" text="立即购买" />\n</van-goods-action>\n

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型，可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色，支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型，可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸，可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力，具体支持可参考 微信官方文档string-
app-parameter打开 APP 时，向 APP 传递的参数string-
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类
',17)],Bs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ts,As)))},Fs={class:"van-doc-markdown-body"},Ns=[t('

Grid 宫格

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-grid": "@vant/weapp/grid/index",\n  "van-grid-item": "@vant/weapp/grid-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基本用法

通过icon属性设置格子内的图标，text属性设置文字内容。

<van-grid>\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

自定义列数

默认一行展示四个格子，可以通过column-num自定义列数。

<van-grid column-num="3">\n  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}" />\n</van-grid>\n

自定义内容

通过插槽可以自定义格子展示的内容。

<van-grid column-num="3" border="{{ false }}">\n  <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">\n    <image\n      style="width: 100%; height: 90px;"\n      src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg"\n    />\n  </van-grid-item>\n</van-grid>\n

正方形格子

设置square属性后，格子的高度会和宽度保持一致。

<van-grid square>\n  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />\n</van-grid>\n

格子间距

通过gutter属性设置格子之间的距离。

<van-grid gutter="{{ 10 }}">\n  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}" />\n</van-grid>\n

内容横排

将direction属性设置为horizontal，可以让宫格的内容呈横向排列。

<van-grid direction="horizontal" column-num="2">\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n  <van-grid-item icon="photo-o" text="文字" />\n</van-grid>\n

页面跳转

可以通过url属性进行页面跳转，通过link-type属性控制跳转类型。

<van-grid clickable column-num="2">\n  <van-grid-item\n    icon="home-o"\n    link-type="navigateTo"\n    url="/pages/dashboard/index"\n    text="Navigate 跳转"\n  />\n  <van-grid-item\n    icon="search"\n    link-type="reLaunch"\n    url="/pages/dashboard/index"\n    text="ReLaunch 跳转"\n  />\n</van-grid>\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置badge属性后，会在图标右上角展示相应的徽标。

<van-grid column-num="2">\n  <van-grid-item icon="home-o" text="文字" dot />\n  <van-grid-item icon="search" text="文字" badge="99+" />\n</van-grid>\n

API

Grid Props

参数说明类型默认值
column-num列数number4
icon-size v1.3.2图标大小，默认单位为pxstring28px
gutter格子之间的间距，默认单位为pxstring | number0
border是否显示边框booleantrue
center是否将格子内容居中显示booleantrue
square是否将格子固定为正方形booleanfalse
clickable是否开启格子点击反馈booleanfalse
direction格子内容排列的方向，可选值为 horizontalstringvertical
reverse v1.7.0是否调换图标和文本的位置booleanfalse
use-slot是否使用自定义内容的插槽booleanfalse

Grid 外部样式类

类名说明
custom-class根节点样式类

GridItem Props

参数说明类型默认值
text文字string-
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-color图标颜色string-
icon-prefix v1.7.0第三方图标前缀stringvan-icon
dot是否显示图标右上角小红点booleanfalse
badge图标右上角徽标的内容string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型，可选值为 redirectTo switchTab reLaunchstringnavigateTo

GridItem Events

事件名说明回调参数
bind:click点击格子时触发-

GridItem Slots

名称说明
-自定义宫格的所有内容，需要设置use-slot属性
icon自定义图标，如果设置了use-slot或者icon属性则不生效
text自定义文字，如果设置了use-slot或者text属性则不生效

GridItem 外部样式类

类名说明
custom-class根节点样式类
content-class内容样式类
icon-class图标样式类
text-class文本样式类
',19)],Es={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fs,Ns)))},Ls={class:"van-doc-markdown-body"},Us=[t('

Icon 图标

介绍

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-icon": "@vant/weapp/icon/index"\n}\n

代码演示

基础用法

Icon的name属性支持传入图标名称或图片链接。

<van-icon name="close" />\n<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />\n

提示信息

设置dot属性后，会在图标右上角展示一个小红点。设置info属性后，会在图标右上角展示相应的徽标。

<van-icon name="chat" dot />\n<van-icon name="chat" info="9" />\n<van-icon name="chat" info="99+" />\n

图标颜色

设置color属性来控制图标颜色。

<van-icon name="chat" color="red" />\n

图标大小

设置size属性来控制图标大小。

<van-icon name="chat" size="50px" />\n

自定义图标

如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 app.wxss 文件中引入。

/* 引入第三方或自定义的字体图标样式 */\n@font-face {\n  font-family: 'my-icon';\n  src: url('./my-icon.ttf') format('truetype');\n}\n\n.my-icon {\n  font-family: 'my-icon';\n}\n\n.my-icon-extra::before {\n  content: '\\e626';\n}\n
<!-- 通过 class-prefix 指定类名为 my-icon -->\n<van-icon class-prefix="my-icon" name="extra" />\n

API

Props

参数说明类型默认值
name图标名称或图片链接string-
dot是否显示图标右上角小红点booleanfalse
info图标右上角文字提示string | number-
color图标颜色stringinherit
size图标大小，如 20px，2em，默认单位为pxstring | numberinherit
custom-style自定义样式string-
class-prefix类名前缀stringvan-icon

Events

事件名说明参数
bind:click点击图标时触发-

外部样式类

类名说明
custom-class根节点样式类

常见问题

开发者工具上提示 Failed to load font 是什么情况？

这个是开发者工具本身的问题，可以忽略，具体可以查看微信小程序文档 - 注意事项第 5 条。

',15)],Rs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ls,Us)))},Gs={class:"van-doc-markdown-body"},Vs=[t('

Image 图片

介绍

增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-image": "@vant/weapp/image/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手。

代码演示

基础用法

基础用法与原生 image 标签一致，可以设置src、width、height等原生属性。

<van-image width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />\n

填充模式

通过fit属性可以设置图片填充模式，可选值见下方表格。

<van-image\n  width="10rem"\n  height="10rem"\n  fit="contain"\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

<van-image\n  round\n  width="10rem"\n  height="10rem"\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

图片懒加载

图片懒加载，在即将进入一定范围（上下三屏）时才开始加载。

<van-image\n  width="100"\n  height="100"\n  lazy-load\n  src="https://img.yzcdn.cn/vant/cat.jpeg"\n/>\n

加载中提示

Image组件提供了默认的加载中提示，支持通过loading插槽自定义内容。

<van-image use-loading-slot>\n  <van-loading slot="loading" type="spinner" size="20" vertical />\n</van-image>\n

加载失败提示

Image组件提供了默认的加载失败提示，支持通过error插槽自定义内容。

<van-image use-error-slot>\n  <text slot="error">加载失败</text>\n</van-image>\n

API

Props

参数说明类型默认值
src图片链接string-
fit图片填充模式stringfill
alt替代文本string-
width宽度，默认单位为pxstring | number-
height高度，默认单位为pxstring | number-
radius圆角大小，默认单位为pxstring | number0
round是否显示为圆形booleanfalse
lazy-load是否懒加载booleanfalse
show-error是否展示图片加载失败提示booleantrue
show-loading是否展示图片加载中提示booleantrue
use-error-slot是否使用 error 插槽booleanfalse
use-loading-slot是否使用 loading 插槽booleanfalse
show-menu-by-longpress是否开启长按图片显示识别小程序码菜单booleanfalse

图片填充模式 \b

名称含义
contain保持宽高缩放图片，使图片的长边能完全显示出来
cover保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
fill拉伸图片，使图片填满元素
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
none保持图片原有尺寸

Events

事件名说明回调参数
click点击图片时触发event: Event
load图片加载完毕时触发event: Event
error图片加载失败时触发event: Event

Slots

名称说明
loading自定义加载中的提示内容
error自定义加载失败时的提示内容

外部样式类

类名说明
custom-class根节点样式类
image-class图片样式类
loading-classloading 样式类
error-classerror 样式类
',16)],Os={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Gs,Vs)))},Ms={class:"van-doc-markdown-body"},Ws=[t('

IndexBar 索引栏

介绍

用于列表的索引分类显示和快速定位。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-index-bar": "@vant/weapp/index-bar/index",\n  "van-index-anchor": "@vant/weapp/index-anchor/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置。

<van-index-bar>\n  <view>\n    <van-index-anchor index="A" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="B" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n

自定义索引列表

可以通过index-list属性自定义展示的索引字符列表。

<van-index-bar index-list="{{ indexList }}">\n  <view>\n    <van-index-anchor index="1">标题1</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  <view>\n    <van-index-anchor index="2">标题2</van-index-anchor>\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n    <van-cell title="文本" />\n  </view>\n\n  ...\n</van-index-bar>\n
Page({\n  data: {\n    indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n  },\n});\n

API

IndexBar Props

参数说明类型默认值版本
index-list索引字符列表string[] | number[]A-Z-
z-indexz-index 层级number1-
sticky是否开启锚点自动吸顶booleantrue-
sticky-offset-top锚点自动吸顶时与顶部的距离number0-
highlight-color索引字符高亮颜色string#07c160-

IndexAnchor Props

参数说明类型默认值版本
use-slot是否使用自定义内容的插槽booleanfalse-
index索引字符string | number--

IndexBar Events

事件名说明回调参数
select选中字符时触发index: 索引字符

IndexAnchor Slots

名称说明
-锚点位置显示内容，默认为索引字符

常见问题

嵌套在滚动元素中 IndexAnchor 失效？

由于 <IndexBar /> 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：view 使用 overflow: scroll; 或者 scroll-view，具体可查看微信小程序文档。历史 issue: #4252

',13)],$s={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ms,Ws)))},Hs={class:"van-doc-markdown-body"},Ks=[t('

Loading 加载

介绍

加载图标，用于表示加载中的过渡状态。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-loading": "@vant/weapp/loading/index"\n}\n

代码演示

加载类型

<van-loading /> <van-loading type="spinner" />\n

自定义颜色

<van-loading color="#1989fa" /> <van-loading type="spinner" color="#1989fa" />\n

加载文案

<van-loading size="24px">加载中...</van-loading>\n

垂直排列

<van-loading size="24px" vertical>加载中...</van-loading>\n

API

Props

参数说明类型默认值
color颜色string#c9c9c9
type类型，可选值为 spinnerstringcircular
size加载图标大小，默认单位为 pxstring | number30px
text-size v1.0.0文字大小，默认单位为为 pxstring | number14px
vertical v1.0.0是否垂直排列图标和文字内容booleanfalse

Slots

名称说明
-加载文案

外部样式类

类名说明
custom-class根节点样式类
',12)],Qs={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Hs,Ks)))},Xs={class:"van-doc-markdown-body"},Zs=[t('

NavBar 导航栏

介绍

为页面提供导航功能，常用于页面顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-nav-bar": "@vant/weapp/nav-bar/index"\n}\n

代码演示

基础用法

<van-nav-bar\n  title="标题"\n  left-text="返回"\n  right-text="按钮"\n  left-arrow\n  bind:click-left="onClickLeft"\n  bind:click-right="onClickRight"\n/>\n
Page({\n  onClickLeft() {\n    wx.showToast({ title: '点击返回', icon: 'none' });\n  },\n  onClickRight() {\n    wx.showToast({ title: '点击按钮', icon: 'none' });\n  },\n});\n

高级用法

通过 slot 定制内容。

<van-nav-bar title="标题" left-text="返回" left-arrow>\n  <van-icon name="search" slot="right" />\n</van-nav-bar>\n

API

Props

参数说明类型默认值
title标题string''
left-text左侧文案string''
right-text右侧文案string''
left-arrow是否显示左侧箭头booleanfalse
fixed是否固定在顶部booleanfalse
placeholder固定在顶部时是否开启占位booleanfalse
border是否显示下边框booleantrue
z-index元素 z-indexnumber1
custom-style根节点自定义样式string-
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleantrue

Slot

名称说明
title自定义标题
left自定义左侧区域内容
right自定义右侧区域内容

Events

事件名说明参数
bind:click-left点击左侧按钮时触发-
bind:click-right点击右侧按钮时触发-

外部样式类

类名说明
custom-class根节点样式类
title-class标题样式类
',11)],Js={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xs,Zs)))},Ys={class:"van-doc-markdown-body"},sa=[t('

NoticeBar 通知栏

介绍

用于循环播放展示一组消息通知。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-notice-bar": "@vant/weapp/notice-bar/index"\n}\n

代码演示

基础用法

<van-notice-bar\n  left-icon="volume-o"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

滚动播放

通知栏的内容长度溢出时会自动开启滚动播放，通过 scrollable 属性可以控制该行为。

<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->\n<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />\n\n<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->\n<van-notice-bar\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

多行展示

文字较长时，可以通过设置 wrapable 属性来开启多行展示。

<van-notice-bar\n  wrapable\n  scrollable="{{ false }}"\n  text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n/>\n

通知栏模式

通知栏支持 closeable 和 link 两种模式。

<!-- closeable 模式，在右侧显示关闭按钮 -->\n<van-notice-bar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n\n<!-- link 模式，在右侧显示链接箭头 -->\n<van-notice-bar mode="link" text="技术是开发它的人的共同灵魂。" />\n

自定义样式

通过 color 属性设置文本颜色，通过 background 属性设置背景色。

<van-notice-bar\n  color="#1989fa"\n  background="#ecf9ff"\n  left-icon="info-o"\n  text="技术是开发它的人的共同灵魂。"\n/>\n

自定义滚动速率

使用speed属性控制滚动速率。

<van-notice-bar\n  text="{{ text }}"\n  speed="{{speedValue}}"\n  left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"\n/>\n

API

Props

参数说明类型默认值
mode通知栏模式，可选值为 closeable linkstring''
text通知文本内容string''
color通知文本颜色string#ed6a0c
background滚动条背景string#fffbe8
left-icon左侧图标名称或图片链接string-
delay动画延迟时间 (s)number1
speed滚动速率 (px/s)number60
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean-
wrapable是否开启文本换行，只在禁用滚动时生效booleanfalse
open-type微信开放能力stringnavigate

Events

事件名说明参数
click点击通知栏时触发event: Event
close关闭通知栏时触发event: Event

Slot

名称说明
-通知文本内容，仅在 text 属性为空时有效
left-icon自定义左侧图标
right-icon自定义右侧图标

外部样式类

类名说明
custom-class根节点样式类
',15)],aa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ys,sa)))},ta={class:"van-doc-markdown-body"},na=[t('

Notify 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-notify": "@vant/weapp/notify/index"\n}\n

代码演示

基础用法

import Notify from 'path/to/@vant/weapp/dist/notify/notify';\n\nNotify('通知内容');\n
<!-- 在页面内添加对应的节点 -->\n<van-notify id="van-notify" />\n

通知类型

支持primary、success、warning、danger四种通知类型，默认为danger。

// 主要通知\nNotify({ type: 'primary', message: '通知内容' });\n\n// 成功通知\nNotify({ type: 'success', message: '通知内容' });\n\n// 危险通知\nNotify({ type: 'danger', message: '通知内容' });\n\n// 警告通知\nNotify({ type: 'warning', message: '通知内容' });\n

自定义通知

自定义消息通知的颜色和展示时长。

Notify({\n  message: '自定义颜色',\n  color: '#ad0000',\n  background: '#ffe1e1',\n});\n\nNotify({\n  message: '自定义时长',\n  duration: 1000,\n});\n

自定义选择器

Notify({\n  message: '自定义节点选择器',\n  duration: 1000,\n  selector: '#custom-selector',\n});\n
<!-- 在页面内添加自定义节点 -->\n<van-notify id="custom-selector" />\n

API

方法

方法名说明参数返回值
Notify展示提示options | messagenotify 实例
Notify.clear关闭提示optionsvoid

Options

参数说明类型默认值
type v1.0.0类型，可选值为 primary success warningstringdanger
message v1.0.0展示文案，支持通过\\n换行string''
duration展示时长(ms)，值为 0 时，notify 不会消失number3000
selector自定义节点选择器stringvan-notify
color字体颜色string#fff
top顶部距离number0
background背景颜色string-
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClick点击时的回调函数Function-
onOpened完全展示后的回调函数Function-
onClose关闭时的回调函数Function-
safeAreaInsetTop是否留出顶部安全距离（状态栏高度）booleanfalse
',11)],la={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ta,na)))},pa={class:"van-doc-markdown-body"},ea=[t('

Overlay 遮罩层

介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-overlay": "@vant/weapp/overlay/index"\n}\n

代码演示

基础用法

<van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide" />\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n});\n

嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容。

<van-button type="primary" bind:click="onClickShow">嵌入内容</van-button>\n<van-overlay show="{{ show }}" bind:click="onClickHide">\n  <view class="wrapper">\n    <view class="block" catch:tap="noop" />\n  </view>\n</van-overlay>\n
Page({\n  data: {\n    show: false,\n  },\n\n  onClickShow() {\n    this.setData({ show: true });\n  },\n\n  onClickHide() {\n    this.setData({ show: false });\n  },\n\n  noop() {},\n});\n
.wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.block {\n  width: 120px;\n  height: 120px;\n  background-color: #fff;\n}\n

Props

参数说明类型默认值
show是否展示遮罩层booleanfalse
z-indexz-index 层级string | number1
duration动画时长，单位秒string | number0.3
class-name自定义类名string-
custom-style自定义样式string-
lock-scroll v1.7.3是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动booleantrue

Events

事件名说明回调参数
bind:click点击时触发-

Slots

名称说明
-默认插槽，用于在遮罩层上方嵌入内容
',9)],da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",pa,ea)))},ca={class:"van-doc-markdown-body"},oa=[t('

Panel 面板

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-panel": "@vant/weapp/panel/index"\n}\n

代码演示

基础用法

面板只是一个容器，里面可以放入自定义的内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n</van-panel>\n

高级用法

使用slot自定义内容。

<van-panel title="标题" desc="描述信息" status="状态">\n  <view>内容</view>\n  <view slot="footer">\n    <van-button size="small">按钮</van-button>\n    <van-button size="small" type="danger">按钮</van-button>\n  </view>\n</van-panel>\n

API

Props

参数说明类型默认值
title标题string-
desc描述string-
status状态string-

Slot

名称说明
-自定义内容
header自定义 header，如果设置了title、desc、status属性则不生效
footer自定义 footer

外部样式类

类名说明
custom-class根节点样式类
header-class头部样式类
footer-class底部样式类
',9)],ia={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ca,oa)))},ha={class:"van-doc-markdown-body"},ra=[t('

Picker 选择器

介绍

提供多个选项集合供用户选择，支持单列选择和多列级联，通常与 弹出层 组件配合使用。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-picker": "@vant/weapp/picker/index"\n}\n

代码演示

基础用法

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n});\n

默认选中项

单列选择器可以直接通过default-index属性设置初始选中项的索引值。

<van-picker\n  columns="{{ columns }}"\n  default-index="{{ 2 }}"\n  bind:change="onChange"\n/>\n

展示顶部栏

<van-picker\n  show-toolbar\n  title="标题"\n  columns="{{ columns }}"\n  bind:cancel="onCancel"\n  bind:confirm="onConfirm"\n/>\n
import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nPage({\n  data: {\n    columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  },\n\n  onConfirm(event) {\n    const { picker, value, index } = event.detail;\n    Toast(`当前值：${value}, 当前索引：${index}`);\n  },\n\n  onCancel() {\n    Toast('取消');\n  },\n});\n

多列联动

<van-picker columns="{{ columns }}" bind:change="onChange" />\n
const citys = {\n  浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n  福建: ['福州', '厦门', '莆田', '三明', '泉州'],\n};\n\nPage({\n  data: {\n    columns: [\n      {\n        values: Object.keys(citys),\n        className: 'column1',\n      },\n      {\n        values: citys['浙江'],\n        className: 'column2',\n        defaultIndex: 2,\n      },\n    ],\n  },\n\n  onChange(event) {\n    const { picker, value, index } = event.detail;\n    picker.setColumnValues(1, citys[value[0]]);\n  },\n});\n

禁用选项

选项可以为对象结构，通过设置 disabled 来禁用该选项。

<van-picker columns="{{ columns }}" />\n
Page({\n  data: {\n    columns: [\n      { text: '杭州', disabled: true },\n      { text: '宁波' },\n      { text: '温州' },\n    ],\n  },\n});\n

加载状态

当 Picker 数据是通过异步获取时，可以通过 loading 属性显示加载提示。

<van-picker columns="{{ columns }}" loading />\n

API

Props

参数说明类型默认值
columns对象数组，配置每一列显示的数据Array[]
show-toolbar是否显示顶部栏booleanfalse
toolbar-position顶部栏位置，可选值为bottomstringtop
title顶部栏标题string''
loading是否显示加载状态booleanfalse
value-key选项对象中，文字对应的 keystringtext
item-height选项高度number44
confirm-button-text确认按钮文字string确认
cancel-button-text取消按钮文字string取消
visible-item-count可见的选项个数number6
default-index单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置		number0

Events

Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。

事件名说明参数
confirm点击完成按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
cancel点击取消按钮时触发单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引
change选项改变时触发单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引

Columns 数据结构

当传入多列数据时，columns为一个对象数组，数组中的每一个对象配置每一列，每一列有以下key。

key说明
values列中对应的备选值
defaultIndex初始选中项的索引，默认为 0

外部样式类

类名说明
custom-class根节点样式类
active-class选中项样式类
toolbar-class顶部栏样式类
column-class列样式类

方法

通过 selectComponent 可以获取到 picker 实例并调用实例方法。

方法名参数返回值介绍
getValues-values获取所有列选中的值
setValuesvalues-设置所有列选中的值
getIndexes-indexes获取所有列选中值对应的索引
setIndexesindexes-设置所有列选中值对应的索引
getColumnValuecolumnIndexvalue获取对应列选中的值
setColumnValuecolumnIndex, value-设置对应列选中的值
getColumnIndexcolumnIndexoptionIndex获取对应列选中项的索引
setColumnIndexcolumnIndex, optionIndex-设置对应列选中项的索引
getColumnValuescolumnIndexvalues获取对应列中所有选项
setColumnValuescolumnIndex, values-设置对应列中所有选项
',16)],ua={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ha,ra)))},ga={class:"van-doc-markdown-body"},ja=[t('

Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-popup": "@vant/weapp/popup/index"\n}\n

代码演示

基础用法

通过show属性控制弹出层是否展示。

<van-cell title="展示弹出层" is-link bind:click="showPopup" />\n\n<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>\n
Page({\n  data: {\n    show: false,\n  },\n\n  showPopup() {\n    this.setData({ show: true });\n  },\n\n  onClose() {\n    this.setData({ show: false });\n  },\n});\n

弹出位置

通过position属性设置弹出位置，默认居中弹出，可以设置为top、bottom、left、right。

<van-popup\n  show="{{ show }}"\n  position="top"\n  custom-style="height: 20%;"\n  bind:close="onClose"\n/>\n

关闭图标

设置closeable属性后，会在弹出层的右上角显示关闭图标，并且可以通过close-icon属性自定义图标，使用close-icon-position属性可以自定义图标位置。

<van-popup\n  show="{{ show }}"\n  closeable\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 自定义图标 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon="close"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n\n<!-- 图标位置 -->\n<van-popup\n  show="{{ show }}"\n  closeable\n  close-icon-position="top-left"\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

圆角弹窗

设置round属性后，弹窗会根据弹出位置添加不同的圆角样式。

<van-popup\n  show="{{ show }}"\n  round\n  position="bottom"\n  custom-style="height: 20%"\n  bind:close="onClose"\n/>\n

禁止滚动穿透

使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。

目前，组件可以通过 lock-scroll 属性处理部分滚动穿透问题。 但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：

page-meta

当小程序基础库最低版本在 2.9.0 以上时，即可使用 page-meta 组件动态修改页面样式

<!-- page-meta 只能是页面内的第一个节点 -->\n<page-meta page-style="{{ show ? 'overflow: hidden;' : '' }}" />\n\n<van-popup show="{{ show }}" catch:touchstart />\n

API

Props

参数说明类型默认值
show是否显示弹出层booleanfalse
z-indexz-index 层级number100
overlay是否显示遮罩层booleantrue
position弹出位置，可选值为 top bottom right leftstringcenter
duration动画时长，单位为毫秒number | object300
round是否显示圆角booleanfalse
custom-style自定义弹出层样式string''
overlay-style自定义遮罩层样式string''
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
closeable是否显示关闭图标booleanfalse
close-icon关闭图标名称或图片链接stringcross
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
safe-area-inset-top是否留出顶部安全距离（状态栏高度）booleanfalse
lock-scroll v1.7.3是否锁定背景滚动booleantrue

Events

事件名说明参数
bind:close关闭弹出层时触发-
bind:click-overlay点击遮罩层时触发-
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
',13)],ma={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ga,ja)))},va={class:"van-doc-markdown-body"},ba=[t('

Progress 进度条

介绍

用于展示操作的当前进度。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-progress": "@vant/weapp/progress/index"\n}\n

代码演示

基础用法

进度条默认为蓝色，使用percentage属性来设置当前进度。

<van-progress percentage="50" />\n

线条粗细

通过stroke-width可以设置进度条的粗细。

<van-progress :percentage="50" stroke-width="8" />\n

置灰

设置inactive属性后进度条将置灰。

<van-progress inactive percentage="50" />\n

样式定制

可以使用pivot-text属性自定义文字，color属性自定义进度条颜色。

<van-progress pivot-text="橙色" color="#f2826a" percentage="25" />\n\n<van-progress pivot-text="红色" color="#ee0a24" percentage="50" />\n\n<van-progress\n  percentage="75"\n  pivot-text="紫色"\n  pivot-color="#7232dd"\n  color="linear-gradient(to right, #be99ff, #7232dd)"\n/>\n

API

Props

参数说明类型默认值
inactive是否置灰booleanfalse
percentage进度百分比number0
stroke-width进度条粗细，默认单位为pxstring | number4px
show-pivot是否显示进度文字booleantrue
color进度条颜色string#1989fa
text-color进度文字颜色string#fff
track-color轨道颜色string#e5e5e5
pivot-text文字显示string百分比文字
pivot-color文字背景色string与进度条颜色一致

外部样式类

类名说明
custom-class根节点样式类
',11)],qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",va,ba)))},ya={class:"van-doc-markdown-body"},fa=[t('

Radio 单选框

介绍

在一组备选项中进行单选。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-radio": "@vant/weapp/radio/index",\n  "van-radio-group": "@vant/weapp/radio-group/index"\n}\n

代码演示

基础用法

通过value绑定值当前选中项的 name 。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n
Page({\n  data: {\n    radio: '1',\n  },\n\n  onChange(event) {\n    this.setData({\n      radio: event.detail,\n    });\n  },\n});\n

水平排列

将direction属性设置为horizontal后，单选框组会变成水平排列。

<van-radio-group\n  value="{{ radio }}"\n  bind:change="onChange"\n  direction="horizontal"\n>\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

禁用状态

通过disabled属性禁止选项切换，在Radio上设置diabled可以禁用单个选项。

<van-radio-group value="{{ radio }}" disabled bind:change="onChange">\n  <van-radio name="1">单选框 1</van-radio>\n  <van-radio name="2">单选框 2</van-radio>\n</van-radio-group>\n

自定义形状

将shape属性设置为square，单选框的形状会变成方形。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" shape="square">单选框 1</van-radio>\n  <van-radio name="2" shape="square">单选框 2</van-radio>\n</van-radio-group>\n

自定义颜色

通过checked-color属性设置选中状态的图标颜色。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" checked-color="#07c160">单选框 1</van-radio>\n  <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>\n</van-radio-group>\n

自定义大小

通过icon-size属性可以自定义图标的大小。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" icon-size="24px">单选框 1</van-radio>\n  <van-radio name="2" icon-size="24px">单选框 2</van-radio>\n</van-radio-group>\n

自定义图标

通过icon插槽自定义图标，需要设置use-icon-slot属性。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio use-icon-slot value="{{ radio }}" name="1">\n    自定义图标\n    <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />\n  </van-radio>\n  <van-radio use-icon-slot value="{{ radio }}" name="2">\n    自定义图标\n    <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />\n  </van-radio>\n</van-radio-group>\n
Page({\n  data: {\n    radio: true,\n    icon: {\n      normal: '//img.yzcdn.cn/icon-normal.png',\n      active: '//img.yzcdn.cn/icon-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({\n      radio: event.detail,\n    });\n  },\n});\n

禁用文本点击

通过设置label-disabled属性可以禁用单选框文本点击。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-radio name="1" label-disabled>单选框 1</van-radio>\n  <van-radio name="2" label-disabled>单选框 2</van-radio>\n</van-radio-group>\n

与 Cell 组件一起使用

此时你需要再引入Cell和CellGroup组件。

<van-radio-group value="{{ radio }}" bind:change="onChange">\n  <van-cell-group>\n    <van-cell title="单选框 1" clickable data-name="1" bind:click="onClick">\n      <van-radio slot="right-icon" name="1" />\n    </van-cell>\n    <van-cell title="单选框 2" clickable data-name="2" bind:click="onClick">\n      <van-radio slot="right-icon" name="2" />\n    </van-cell>\n  </van-cell-group>\n</van-radio-group>\n
Page({\n  data: {\n    radio: '1',\n  },\n\n  onChange(event) {\n    this.setData({\n      radio: event.detail,\n    });\n  },\n\n  onClick(event) {\n    const { name } = event.currentTarget.dataset;\n    this.setData({\n      radio: name,\n    });\n  },\n});\n

API

RadioGroup Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前选中项的标识符any-
disabled是否禁用所有单选框booleanfalse
direction v1.6.7排列方向，可选值为 horizontalstringvertical

Radio Props

参数说明类型默认值
name标识符string-
shape形状，可选值为 squarestringround
disabled是否为禁用状态booleanfalse
label-disabled是否禁用文本内容点击booleanfalse
label-position文本位置，可选值为 leftstringright
icon-size图标大小，默认单位为pxstring | number20px
checked-color选中状态颜色string#1989fa
use-icon-slot是否使用 icon 插槽booleanfalse

Radio Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name

Radio 外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
label-class描述信息样式类

RadioGroup Event

事件名说明回调参数
bind:change当绑定值变化时触发的事件当前选中项的 name
',19)],xa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ya,fa)))},wa={class:"van-doc-markdown-body"},za=[t('

Rate 评分

介绍

用于对事物进行评级操作。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-rate": "@vant/weapp/rate/index"\n}\n

代码演示

基础用法

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 3,\n  },\n\n  onChange(event) {\n    this.setData({\n      value: event.detail,\n    });\n  },\n});\n

自定义图标

<van-rate\n  value="{{ value }}"\n  icon="like"\n  void-icon="like-o"\n  bind:change="onChange"\n/>\n

自定义样式

<van-rate\n  value="{{ value }}"\n  size="{{ 25 }}"\n  color="#ffd21e"\n  void-icon="star"\n  void-color="#eee"\n  bind:change="onChange"\n/>\n

半星

<van-rate\n  value="{{ value }}"\n  allow-half\n  void-icon="star"\n  void-color="#eee"\n  bind:change="onChange"\n/>\n
Page({\n  data: {\n    value: 2.5,\n  },\n\n  onChange(event) {\n    this.setData({\n      value: event.detail,\n    });\n  },\n});\n

自定义数量

<van-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />\n

禁用状态

<van-rate disabled value="{{ value }}" bind:change="onChange" />\n

只读状态

<van-rate readonly value="{{ value }}" bind:change="onChange" />\n

监听 change 事件

评分变化时，会触发 change 事件。

<van-rate value="{{ value }}" bind:change="onChange" />\n
Page({\n  data: {\n    value: 2,\n  },\n\n  onChange(event) {\n    Toast('当前值：' + event.detail);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value当前分值number-
count图标总数number5
size图标大小，默认单位为 pxstring | number20px
gutter图标间距，默认单位为 pxstring | number4px
color选中时的颜色string#ffd21e
void-color未选中时的颜色string#c7c7c7
icon选中时的图标名称或图片链接，可选值见 Icon 组件stringstar
void-icon未选中时的图标名称或图片链接，可选值见 Icon 组件stringstar-o
allow-half是否允许半选booleanfalse
readonly是否为只读状态 \bbooleanfalse
disabled是否禁用评分booleanfalse
disabled-color禁用时的颜色string#bdbdbd
touchable是否可以通过滑动手势选择评分booleantrue

Events

事件名称说明回调参数
change当前分值变化时触发的事件event.detail:当前分值

外部样式类

类名说明
custom-class根节点样式类
icon-class图标样式类
',16)],ka={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",wa,za)))},_a={class:"van-doc-markdown-body"},Ca=[t('

Search 搜索

介绍

用于搜索场景的输入框组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-search": "@vant/weapp/search/index"\n}\n

代码演示

基础用法

van-search 中，value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。

<van-search value="{{ value }}" placeholder="请输入搜索关键词" />\n

事件监听

van-search 提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。

<van-search\n  value="{{ value }}"\n  placeholder="请输入搜索关键词"\n  show-action\n  bind:search="onSearch"\n  bind:cancel="onCancel"\n/>\n

搜索框内容对齐

通过 input-align 属性可以设置搜索框内容的对齐方式。

<van-search\n  value="{{ value }}"\n  input-align="center"\n  placeholder="请输入搜索关键词"\n/>\n

禁用搜索框

通过 disabled 属性可以将组件设置为禁用状态。

<van-search disabled value="{{ value }}" placeholder="请输入搜索关键词" />\n

自定义背景色

通过background属性可以设置搜索框外部的背景色，通过shape属性设置搜索框的形状，可选值为round。

<van-search\n  value="{{ value }}"\n  shape="round"\n  background="#4fc08d"\n  placeholder="请输入搜索关键词"\n/>\n

自定义按钮

van-search 支持自定义右侧取消按钮，使用名字为 action 的 slot，并设置 use-action-slot 为 true 即可。

<van-search\n  value="{{ value }}"\n  label="地址"\n  placeholder="请输入搜索关键词"\n  use-action-slot\n  bind:change="onChange"\n  bind:search="onSearch"\n>\n  <view slot="action" bind:tap="onClick">搜索</view>\n</van-search>\n
Page({\n  data: {\n    value: '',\n  },\n  onChange(e) {\n    this.setData({\n      value: e.detail,\n    });\n  },\n  onSearch() {\n    Toast('搜索' + this.data.value);\n  },\n  onClick() {\n    Toast('搜索' + this.data.value);\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
label搜索框左侧文本string-
shape形状，可选值为 roundstringsquare
value当前输入的值string | number-
background搜索框背景色string#f2f2f2
show-action是否在搜索框右侧显示取消按钮booleanfalse
action-text v1.0.0取消按钮文字string取消
focus获取焦点booleanfalse
error是否将输入内容标红booleanfalse
disabled是否禁用输入框booleanfalse
readonly是否只读booleanfalse
clearable是否启用清除控件booleantrue
clear-trigger v1.8.4显示清除图标的时机，always 表示输入框不为空时展示，
focus 表示输入框聚焦且不为空时展示		stringfocus
clear-icon v1.8.4清除图标名称或图片链接stringclear
maxlength最大输入长度，设置为 -1 的时候不限制最大长度number-1
use-action-slot是否使用 action slotbooleanfalse
placeholder输入框为空时占位符string-
placeholder-style指定占位符的样式string-
input-align输入框内容对齐方式，可选值为 center rightstringleft
use-left-icon-slot是否使用输入框左侧图标 slotbooleanfalse
use-right-icon-slot是否使用输入框右侧图标 slotbooleanfalse
left-icon输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效）stringsearch
right-icon输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效）string-

Events

事件名说明参数
bind:search确定搜索时触发event.detail: 当前输入值
bind:change输入内容变化时触发event.detail: 当前输入值
bind:cancel取消搜索搜索时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-
bind:clear点击清空控件时触发-
bind:click-input点击搜索区域时触发-

Slot

名称说明
action自定义搜索框右侧按钮，需要在use-action-slot为 true 时才会显示
label自定义搜索框左侧文本
left-icon自定义输入框左侧图标，需要在use-left-icon-slot为 true 时才会显示
right-icon自定义输入框右侧图标，需要在use-right-icon-slot为 true 时才会显示

外部样式类

类名说明
custom-class根节点样式类
field-class搜索框样式类
input-class输入框样式类
cancel-class取消按钮样式类
',15)],Pa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",_a,Ca)))},Sa={class:"van-doc-markdown-body"},Ia=[t('

ShareSheet 分享面板

介绍

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-share-sheet": "@vant/weapp/share-sheet/index"\n}\n

代码演示

基础用法

分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" bind:click="onClick" />\n<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n  bind:select="onSelect"\n  bind:close="onClose"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat', openType: 'share' },\n      { name: '微博', icon: 'weibo' },\n      { name: '复制链接', icon: 'link' },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n\n  onClick(event) {\n    this.setData({ showShare: true });\n  },\n\n  onClose() {\n    this.setData({ showShare: false });\n  },\n\n  onSelect(event) {\n    Toast(event.detail.name);\n    this.onClose();\n  },\n});\n

展示多行选项

当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet\n  show="{{ showShare }}"\n  title="立即分享给好友"\n  options="{{ options }}"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      [\n        { name: '微信', icon: 'wechat' },\n        { name: '微博', icon: 'weibo' },\n        { name: 'QQ', icon: 'qq' },\n      ],\n      [\n        { name: '复制链接', icon: 'link' },\n        { name: '分享海报', icon: 'poster' },\n        { name: '二维码', icon: 'qrcode' },\n      ],\n    ],\n  },\n});\n

自定义图标

除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet show="{{ showShare }}" options="{{ options }}" />\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',\n      },\n      {\n        name: '名称',\n        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',\n      },\n    ],\n  },\n});\n

展示描述信息

通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet\n  show="{{ showShare }}"\n  options="{{ options }}"\n  title="立即分享给好友"\n  description="描述信息"\n/>\n
Page({\n  data: {\n    showShare: false,\n    options: [\n      { name: '微信', icon: 'wechat' },\n      { name: '微博', icon: 'weibo' },\n      {\n        name: '复制链接',\n        icon: 'link',\n        description: '描述信息',\n      },\n      { name: '分享海报', icon: 'poster' },\n      { name: '二维码', icon: 'qrcode' },\n    ],\n  },\n});\n

API

Props

参数说明类型默认值
options分享选项Option[][]
title顶部标题string-
cancel-text取消按钮文字string'取消'
description标题下方的辅助描述文字string-
duration动画时长，单位毫秒number | string300
overlay是否显示遮罩层booleantrue
close-on-click-overlay是否在点击遮罩层后关闭booleantrue
safe-area-inset-bottom是否开启底部安全区适配booleantrue

Option 数据结构

options属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值：

键名说明类型
name分享渠道名称string
description分享选项描述string
icon图标，可选值为 qq link weibo wechat poster qrcode weapp-qrcode wechat-moments，支持传入图片 URLstring
openType按钮 open-type，可用于实现分享功能，可选值为 sharestring

Events

事件名说明回调参数
select点击分享选项时触发option: Option, index: number
close关闭时触发-
cancel点击取消按钮时触发-
click-overlay点击遮罩层时触发-

Slots

名称说明
title自定义顶部标题
description自定义描述文字
',13)],Da={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Sa,Ia)))},Ta={class:"van-doc-markdown-body"},Aa=[t('

Sidebar 侧边导航

介绍

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sidebar": "@vant/weapp/sidebar/index",\n  "van-sidebar-item": "@vant/weapp/sidebar-item/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过在van-sidebar上设置activeKey属性来控制选中项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n
Page({\n  data: {\n    activeKey: 0,\n  },\n});\n

徽标提示

设置dot属性后，会在右上角展示一个小红点。设置badge属性后，会在右上角展示相应的徽标。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" dot />\n  <van-sidebar-item title="标签名" badge="5" />\n  <van-sidebar-item title="标签名" badge="99+" />\n</van-sidebar>\n

禁用选项

通过disabled属性禁用选项。

<van-sidebar active-key="{{ activeKey }}">\n  <van-sidebar-item title="标签名" />\n  <van-sidebar-item title="标签名" disabled />\n  <van-sidebar-item title="标签名" />\n</van-sidebar>\n

监听切换事件

设置change方法来监听切换导航项时的事件。

<van-sidebar active-key="{{ activeKey }}" bind:change="onChange">\n  <van-sidebar-item title="标签名 1" />\n  <van-sidebar-item title="标签名 2" />\n  <van-sidebar-item title="标签名 3" />\n</van-sidebar>\n\n<van-notify id="van-notify" />\n
import Notify from '@vant/weapp/dist/notify/notify';\n\nPage({\n  data: {\n    activeKey: 0,\n  },\n\n  onChange(event) {\n    Notify({ type: 'primary', message: event.detail });\n  },\n});\n

API

参数说明类型默认值
activeKey选中项的索引string | number0
事件名说明参数
change切换徽章时触发当前选中徽章的索引
类名说明
custom-class根节点样式类

SidebarItem Props

参数说明类型默认值
title内容string''
dot是否显示右上角小红点booleanfalse
info图标右上角徽标的内容（已废弃，请使用 badge 属性）string | number''
badge v1.5.0图标右上角徽标的内容string | number''
disabled是否禁用该项booleanfalse

SidebarItem Slot

名称说明
title自定义标题栏，如果设置了title属性则不生效

SidebarItem Event

事件名说明参数
click点击徽章时触发event.detail 为当前徽章的索引

SidebarItem 外部样式类

类名说明
custom-class根节点样式类
',16)],Ba={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ta,Aa)))},Fa={class:"van-doc-markdown-body"},Na=[t('

Skeleton 骨架屏

介绍

用于在内容加载过程中展示一组占位图形。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-skeleton": "@vant/weapp/skeleton/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

通过title属性显示标题占位图，通过row属性配置占位段落行数。

<van-skeleton title row="3" />\n

显示头像

通过avatar属性显示头像占位图。

<van-skeleton title avatar row="3" />\n

展示子组件

将loading属性设置成false表示内容加载完成，此时会隐藏占位图，并显示Skeleton的子组件。

<van-skeleton title avatar row="3" loading="{{ loading }}">\n  <view>实际内容</view>\n</van-skeleton>\n
Page({\n  data: {\n    loading: true,\n  },\n  onReady() {\n    this.setData({\n      loading: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
row段落占位图行数number0
row-width段落占位图宽度，可传数组来设置每一行的宽度string | string[]100%
title是否显示标题占位图booleanfalse
title-width标题占位图宽度string | number40%
avatar是否显示头像占位图booleanfalse
avatar-size头像占位图大小string | number32px
avatar-shape头像占位图形状，可选值为squarestringround
loading是否显示占位图，传false时会展示子组件内容booleantrue
animate是否开启动画booleantrue
',9)],Ea={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Fa,Na)))},La={class:"van-doc-markdown-body"},Ua=[t('

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-slider": "@vant/weapp/slider/index"\n}\n

代码演示

基本用法

<van-slider value="50" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<van-slider value="{{ 10, 50 }}" range @change="onChange" />\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

指定选择范围

<van-slider min="-50" max="50" />\n

禁用

<van-slider value="50" disabled />\n

指定步长

<van-slider value="50" step="10" />\n

自定义样式

<van-slider value="50" bar-height="4px" active-color="#ee0a24" />\n

自定义按钮

<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">\n  <view class="custom-button" slot="button">{{ currentValue }}/100</view>\n</van-slider>\n
Page({\n  data: {\n    currentValue: 50,\n  },\n\n  onDrag(event) {\n    this.setData({\n      currentValue: event.detail.value,\n    });\n  },\n});\n

垂直方向

设置 vertical 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<view style="height: 150px;">\n  <van-slider value="50" vertical bind:change="onChange" />\n  <van-slider\n    value="{{ [10, 50] }}"\n    range\n    vertical\n    style="margin-left: 100px;"\n    bind:change="onChange"\n  />\n</view>\n
Page({\n  onChange(event) {\n    wx.showToast({\n      icon: 'none',\n      title: `当前值：${event.detail}`,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
value当前进度百分比，在双滑块模式下为数组格式number | number[]0
disabled是否禁用滑块booleanfalse
max最大值number100
min最小值number0
step步长number1
bar-height进度条高度，默认单位为 pxstring | number2px
active-color进度条激活态颜色string#1989fa
inactive-color进度条默认颜色string#e5e5e5
use-slot-button是否使用按钮插槽booleanfalse
range v1.8.4是否开启双滑块模式booleanfalse
vertical v1.8.5是否垂直展示booleanfalse

Events

事件名说明参数
bind:drag拖动进度条时触发event.detail.value: 当前进度
bind:change进度值改变后触发event.detail: 当前进度
bind:drag-start开始拖动时触发-
bind:drag-end结束拖动时触发-

外部样式类

类名说明
custom-class根节点样式类

Slots

名称说明参数
button自定义滑块按钮{ value: number }
left-button v1.8.4自定义左侧滑块按钮（双滑块模式下）{ value: number }
right-button v1.8.4自定义右侧滑块按钮 （双滑块模式下）{ value: number }
',17)],Ra={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",La,Ua)))},Ga={class:"van-doc-markdown-body"},Va=[t('

Stepper 步进器

介绍

步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-stepper": "@vant/weapp/stepper/index"\n}\n

代码演示

基础用法

通过value设置输入值，可以通过change事件监听到输入值的变化。

<van-stepper value="{{ 1 }}" bind:change="onChange" />\n
Page({\n  onChange(event) {\n    console.log(event.detail);\n  },\n});\n

步长设置

通过step属性设置每次点击增加或减少按钮时变化的值，默认为1。

<van-stepper value="{{ 1 }}" step="2" />\n

限制输入范围

通过min和max属性限制输入值的范围。

<van-stepper value="{{ 5 }}" min="5" max="8" />\n

限制输入整数

设置integer属性后，输入框将限制只能输入整数。

<van-stepper value="{{ 1 }}" integer />\n

禁用状态

通过设置disabled属性来禁用步进器，禁用状态下无法点击按钮或修改输入框。

<van-stepper value="{{ 1 }}" disabled />\n

关闭长按

通过设置long-press属性决定步进器是否开启长按手势。

<van-stepper value="{{ 1 }}" long-press="{{ false }}" />\n

固定小数位数

通过设置decimal-length属性可以保留固定的小数位数。

<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />\n

异步变更

如果需要异步地修改输入框的值，可以设置async-change属性，并在change事件中手动修改value。

<van-stepper value="{{ value }}" async-change bind:change="onChange" />\n
Page({\n  data: {\n    value: 1,\n  },\n\n  onChange(value) {\n    Toast.loading({ forbidClick: true });\n\n    setTimeout(() => {\n      Toast.clear();\n      this.setData({ value });\n    }, 500);\n  },\n});\n

自定义大小

通过input-width属性设置输入框宽度，通过button-size属性设置按钮大小和输入框高度。

<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
value输入值string | number最小值
min最小值string | number1
max最大值string | number-
step步长string | number1
integer是否只允许输入整数booleanfalse
disabled是否禁用booleanfalse
disable-input是否禁用输入框booleanfalse
async-change是否开启异步变更，开启后需要手动控制输入值booleanfalse
input-width输入框宽度，默认单位为 pxstring | number32px
button-size按钮大小，默认单位为 px，输入框高度会和按钮大小保持一致string | number28px
show-plus是否显示增加按钮booleantrue
show-minus是否显示减少按钮booleantrue
decimal-length固定显示的小数位数number-
theme样式风格，可选值为 roundstring-
disable-plus是否禁用增加按钮boolean-
disable-minus是否禁用减少按钮boolean-
long-press是否开启长按手势booleantrue

Events

事件名说明回调参数
bind:change当绑定值变化时触发的事件event.detail: 当前输入的值
bind:overlimit点击不可用的按钮时触发-
bind:plus点击增加按钮时触发-
bind:minus点击减少按钮时触发-
bind:focus输入框聚焦时触发-
bind:blur输入框失焦时触发-

Slot

名称说明
plus加号按钮
minus减号按钮

外部样式类

类名说明
custom-class根节点样式类
input-class输入框样式类
plus-class加号按钮样式类
minus-class减号按钮样式类
',18)],Oa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ga,Va)))},Ma={class:"van-doc-markdown-body"},Wa=[t('

Steps 步骤条

介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-steps": "@vant/weapp/steps/index"\n}\n

代码演示

基础用法

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n      },\n    ],\n  },\n});\n

自定义样式

可以通过 active-icon 和 active-color 属性设置激活状态下的图标和颜色。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  active-icon="success"\n  active-color="#38f"\n/>\n

自定义图标

可以通过 inactiveIcon 和 activeIcon 属性分别设置每一项的图标。

<van-steps steps="{{ steps }}" active="{{ active }}" />\n
Page({\n  data: {\n    steps: [\n      {\n        text: '步骤一',\n        desc: '描述信息',\n        inactiveIcon: 'location-o',\n        activeIcon: 'success',\n      },\n      {\n        text: '步骤二',\n        desc: '描述信息',\n        inactiveIcon: 'like-o',\n        activeIcon: 'plus',\n      },\n      {\n        text: '步骤三',\n        desc: '描述信息',\n        inactiveIcon: 'star-o',\n        activeIcon: 'cross',\n      },\n      {\n        text: '步骤四',\n        desc: '描述信息',\n        inactiveIcon: 'phone-o',\n        activeIcon: 'fail',\n      },\n    ],\n  },\n});\n

竖向步骤条

可以通过设置direction属性来改变步骤条的显示方式。

<van-steps\n  steps="{{ steps }}"\n  active="{{ active }}"\n  direction="vertical"\n  active-color="#ee0a24"\n/>\n

API

Steps Props

参数说明类型默认值
active当前步骤number0
direction显示方向，可选值为 horizontal verticalstringhorizontal
active-color激活状态颜色string#07c160
inactive-color未激活状态颜色string#969799
active-icon激活状态底部图标，可选值见 Icon 组件stringchecked
inactive-icon未激活状态底部图标，可选值见 Icon 组件string-

Events

事件名称说明回调参数
bind:click-step点击步骤时触发的事件event.detail:当前步骤的索引

外部样式类

类名说明
custom-class根节点样式类
desc-class描述信息样式类
',12)],$a={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ma,Wa)))},Ha={class:"van-doc-markdown-body"},Ka=[t('

Sticky 粘性布局

介绍

Sticky 组件与 CSS 中position: sticky属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-sticky": "@vant/weapp/sticky/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

将内容包裹在Sticky组件内即可。

<van-sticky>\n  <van-button type="primary">基础用法</van-button>\n</van-sticky>\n

吸顶距离

通过offset-top属性可以设置组件在吸顶时与顶部的距离。

<van-sticky offset-top="{{ 50 }}">\n  <van-button type="info">吸顶距离</van-button>\n</van-sticky>\n

指定容器

通过container属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会返回原位置。

<view id="container" style="height: 150px;">\n  <van-sticky container="{{ container }}">\n    <van-button type="warning">指定容器</van-button>\n  </van-sticky>\n</view>\n
Page({\n  data: {\n    container: null,\n  },\n\n  onReady() {\n    this.setData({\n      container: () => wx.createSelectorQuery().select('#container'),\n    });\n  },\n});\n

嵌套在 scroll-view 内使用

通过 scroll-top 与 offset-top 属性可以实现在 scroll-view 内嵌套使用。

<scroll-view\n  bind:scroll="onScroll"\n  scroll-y\n  id="scroller"\n  style="height: 200px;"\n>\n  <view style="height: 400px; padding-top: 50px;">\n    <van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">\n      <van-button type="warning">嵌套在 scroll-view 内</van-button>\n    </van-sticky>\n  </view>\n</scroll-view>\n
Page({\n  data: {\n    scrollTop: 0,\n    offsetTop: 0,\n  },\n\n  onScroll(event) {\n    wx.createSelectorQuery()\n      .select('#scroller')\n      .boundingClientRect((res) => {\n        this.setData({\n          scrollTop: event.detail.scrollTop,\n          offsetTop: res.top,\n        });\n      })\n      .exec();\n  },\n});\n

API

Props

参数说明类型默认值
offset-top吸顶时与顶部的距离，单位pxnumber0
z-index吸顶时的 z-indexnumber99
container一个函数，返回容器对应的 NodesRef 节点function-
scroll-top当前滚动区域的滚动位置，非 null 时会禁用页面滚动事件的监听number-

Events

事件名说明回调参数
scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }
',11)],Qa={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ha,Ka)))},Xa={class:"van-doc-markdown-body"},Za=[t('

SubmitBar 提交订单栏

介绍

用于展示订单金额与提交订单。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-submit-bar": "@vant/weapp/submit-bar/index"\n}\n

代码演示

基础用法

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

禁用状态

禁用状态下不会触发submit事件。

<van-submit-bar\n  disabled\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n  tip-icon="info-o"\n  bind:submit="onSubmit"\n/>\n

加载状态

加载状态下不会触发submit事件。

<van-submit-bar\n  loading\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onSubmit"\n/>\n

高级用法

通过插槽插入自定义内容。

<van-submit-bar\n  price="{{ 3050 }}"\n  button-text="提交订单"\n  bind:submit="onClickButton"\n  tip="{{ true }}"\n>\n  <van-tag type="primary">标签</van-tag>\n  <view slot="tip">您的收货地址不支持同城送, <text>修改地址</text></view>\n</van-submit-bar>\n

API

Props

参数说明类型默认值
price价格（单位分）number-
label价格文案string合计：
suffix-label价格右侧文案string-
button-text按钮文字string-
button-type按钮类型stringdanger
tip提示文案string | boolean-
tip-icon图标名称或图片链接，可选值见 Icon 组件string-
disabled是否禁用按钮booleanfalse
loading是否显示加载中的按钮booleanfalse
currency货币符号string¥
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
decimal-length价格小数点后位数number2

Events

事件名说明参数
submit按钮点击事件回调-

Slot

名称说明
-自定义订单栏左侧内容
top自定义订单栏上方内容
tip提示文案中的额外操作和说明

外部样式类

类名说明
custom-class根节点样式类
price-class价格样式类
button-class按钮样式类
bar-class订单栏样式类
',13)],Ja={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Xa,Za)))},Ya={class:"van-doc-markdown-body"},st=[t('

SwipeCell 滑动单元格

介绍

可以左右滑动来展示操作按钮的单元格组件。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-swipe-cell": "@vant/weapp/swipe-cell/index"\n}\n

代码演示

基础用法

<van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n

异步关闭

当开启async-close时， 通过绑定close事件，可以自定义两侧滑动内容点击时的关闭行为。

<van-swipe-cell\n  id="swipe-cell"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  async-close\n  bind:close="onClose"\n>\n  <view slot="left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right">删除</view>\n</van-swipe-cell>\n
Page({\n  onClose(event) {\n    const { position, instance } = event.detail;\n    switch (position) {\n      case 'left':\n      case 'cell':\n        instance.close();\n        break;\n      case 'right':\n        Dialog.confirm({\n          message: '确定删除吗？',\n        }).then(() => {\n          instance.close();\n        });\n        break;\n    }\n  },\n});\n

主动打开

<van-swipe-cell\n  id="swipe-cell2"\n  right-width="{{ 65 }}"\n  left-width="{{ 65 }}"\n  name="示例"\n  bind:open="onOpen"\n>\n  <view slot="left" class="van-swipe-cell__left">选择</view>\n  <van-cell-group>\n    <van-cell title="单元格" value="内容" />\n  </van-cell-group>\n  <view slot="right" class="van-swipe-cell__right">删除</view>\n</van-swipe-cell>\n
Page({\n  onOpen(event) {\n    const { position, name } = event.detail;\n    switch (position) {\n      case 'left':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n      case 'right':\n        Notify({\n          type: 'primary',\n          message: `${name}${position}部分展示open事件被触发`,\n        });\n        break;\n    }\n  },\n});\n

API

Props

参数说明类型默认值
name标识符，可以在 close 事件的参数中获取到string | number-
left-width左侧滑动区域宽度number0
right-width右侧滑动区域宽度number0
async-close是否异步关闭booleanfalse
disabled v1.3.4是否禁用滑动booleanfalse

Slot

名称说明
-自定义显示内容
left左侧滑动内容
right右侧滑动内容

Events

事件名说明参数
click点击时触发关闭时的点击位置 (left right cell outside)
close关闭时触发{ position: ‘left’ | ‘right’ , instance , name: string }
open打开时触发{ position: ‘left’ | ‘right’ , name: string }

close 参数

参数类型说明
positionstring关闭时的点击位置 (left right cell outside)
instanceobjectSwipeCell 实例
name标识符string

方法

通过 selectComponent 可以获取到 SwipeCell 实例并调用实例方法

方法名参数返回值介绍
openposition: left | right-打开单元格侧边栏
close--收起单元格侧边栏
',13)],at={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",Ya,st)))},tt={class:"van-doc-markdown-body"},nt=[t('

Switch 开关

介绍

用于在打开和关闭状态之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-switch": "@vant/weapp/switch/index"\n}\n

代码演示

基础用法

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    // 需要手动对 checked 状态进行更新\n    this.setData({ checked: detail });\n  },\n});\n

禁用状态

<van-switch checked="{{ checked }}" disabled />\n

加载状态

<van-switch checked="{{ checked }}" loading />\n

自定义大小

<van-switch checked="{{ checked }}" size="24px" />\n

自定义颜色

<van-switch\n  checked="{{ checked }}"\n  active-color="#07c160"\n  inactive-color="#ee0a24"\n/>\n

异步控制

<van-switch checked="{{ checked }}" bind:change="onChange" />\n
Page({\n  data: {\n    checked: true,\n  },\n\n  onChange({ detail }) {\n    wx.showModal({\n      title: '提示',\n      content: '是否切换开关？',\n      success: (res) => {\n        if (res.confirm) {\n          this.setData({ checked2: detail });\n        }\n      },\n    });\n  },\n});\n

API

Props

参数说明类型默认值
name在表单内提交时的标识符string-
checked开关选中状态anyfalse
loading是否为加载状态booleanfalse
disabled是否为禁用状态booleanfalse
size开关尺寸string30px
active-color打开时的背景色string#1989fa
inactive-color关闭时的背景色string#fff
active-value打开时的值anytrue
inactive-value关闭时的值anyfalse

Events

事件名说明参数
bind:change开关状态切换回调event.detail: 是否选中开关

外部样式类

类名说明
custom-class根节点样式类
node-class圆点样式类
',14)],lt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",tt,nt)))},pt={class:"van-doc-markdown-body"},et=[t('

Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tab": "@vant/weapp/tab/index",\n  "van-tabs": "@vant/weapp/tabs/index"\n}\n

代码演示

基础用法

通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。

<van-tabs active="{{ active }}" bind:change="onChange">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n
Page({\n  data: {\n    active: 1,\n  },\n\n  onChange(event) {\n    wx.showToast({\n      title: `切换到标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，active的值为当前标签的name（此时无法通过索引值来匹配标签）。

<van-tabs active="a">\n  <van-tab title="标签 1" name="a">内容 1</van-tab>\n  <van-tab title="标签 2" name="b">内容 2</van-tab>\n  <van-tab title="标签 3" name="c">内容 3</van-tab>\n</van-tabs>\n

横向滚动

多于 5 个标签时，Tab 可以横向滚动。

<van-tabs active="{{ active }}">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n  <van-tab title="标签 5">内容 5</van-tab>\n  <van-tab title="标签 6">内容 6</van-tab>\n</van-tabs>\n

禁用标签

设置disabled属性即可禁用标签。如果需要监听禁用标签的点击事件，可以在van-tabs上监听disabled事件。

<van-tabs bind:disabled="onClickDisabled">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2" disabled>内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n
Page({\n  onClickDisabled(event) {\n    wx.showToast({\n      title: `标签 ${event.detail.name} 已被禁用`,\n      icon: 'none',\n    });\n  },\n});\n

样式风格

Tab支持两种样式风格：line和card，默认为line样式，可以通过type属性修改样式风格。

<van-tabs type="card">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n</van-tabs>\n

点击事件

可以在van-tabs上绑定click事件，在回调参数的event.detail中可以取得被点击标签的标题和标识符。

<van-tabs bind:click="onClick">\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n</van-tabs>\n
Page({\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail.name}`,\n      icon: 'none',\n    });\n  },\n});\n

粘性布局

通过sticky属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶。

<van-tabs sticky>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

切换动画

可以通过animated来设置是否启用切换 tab 时的动画。

<van-tabs animated>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

滑动切换

通过swipeable属性可以开启滑动切换标签页。

<van-tabs swipeable>\n  <van-tab title="标签 1">内容 1</van-tab>\n  <van-tab title="标签 2">内容 2</van-tab>\n  <van-tab title="标签 3">内容 3</van-tab>\n  <van-tab title="标签 4">内容 4</van-tab>\n</van-tabs>\n

嵌套 popup

如果将 van-tabs 嵌套在 van-popup 等会隐藏内容的组件或节点内，当 van-tabs 显示时下划线将不会正常显示。

此时可以通过使用 wx:if 手动控制 van-tabs 的渲染来规避这种场景。

<van-popup show="{{ show }}">\n  <van-tabs wx:if="{{ show }}">\n    <van-tab title="标签 1">内容 1</van-tab>\n    <van-tab title="标签 2">内容 2</van-tab>\n    <van-tab title="标签 3">内容 3</van-tab>\n    <van-tab title="标签 4">内容 4</van-tab>\n  </van-tabs>\n</van-popup>\n

API

Tabs Props

参数说明类型默认值
type样式风格，可选值为cardstringline
color标签主题色string#ee0a24
active当前选中标签的标识符string | number0
duration动画时间，单位秒number0.3
line-width底部条宽度，默认单位pxstring | number40px
line-height底部条高度，默认单位pxstring | number3px
animated是否开启切换标签内容时的转场动画booleanfalse
border是否展示外边框，仅在 line 风格下生效booleanfalse
ellipsis是否省略过长的标题文字booleantrue
sticky是否使用粘性定位布局booleanfalse
swipeable是否开启手势滑动切换booleanfalse
lazy-render是否开启标签页内容延迟渲染booleantrue
offset-top粘性定位布局下与顶部的最小距离，单位pxnumber-
swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动number5
title-active-color标题选中态颜色string-
title-inactive-color标题默认态颜色string-
z-indexz-index 层级number1

Tab Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number标签的索引值
title标题string-
disabled是否禁用标签booleanfalse
dot是否显示小红点boolean-
info图标右上角提示信息string | number-
title-style自定义标题样式string-

Tabs Slot

名称说明
nav-left标题左侧内容
nav-right标题右侧内容

Tab Slot

名称说明
-标签页内容

Tabs Event

事件名说明参数
bind:click点击标签时触发name：标签标识符，title：标题
bind:change当前激活的标签改变时触发name：标签标识符，title：标题
bind:disabled点击被禁用的标签时触发name：标签标识符，title：标题
bind:scroll滚动时触发{ scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

外部样式类

类名说明
custom-class根节点样式类
nav-class标签栏样式类
tab-class标签样式类
tab-active-class标签激活态样式类

方法

通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。

方法名参数返回值介绍
resize--外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘

常见问题

组件从隐藏状态切换到显示状态时，底部条位置错误？

Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。

解决方法

方法一，使用 wx:if 来控制组件展示，使组件重新初始化。

<van-tabs wx:if="show" />\n

方法二，调用组件的 resize 方法来主动触发重绘。

<van-tabs id="tabs" />\n
this.selectComponent('#tabs').resize();\n
',24)],dt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",pt,et)))},ct={class:"van-doc-markdown-body"},ot=[t('

Tabbar 标签栏

介绍

底部导航栏，用于在不同页面之间进行切换。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tabbar": "@vant/weapp/tabbar/index",\n  "van-tabbar-item": "@vant/weapp/tabbar-item/index"\n}\n

代码演示

基础用法

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    // event.detail 的值为当前选中项的索引\n    this.setData({ active: event.detail });\n  },\n});\n

通过名称匹配

在标签指定name属性的情况下，v-model的值为当前标签的name。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item name="search" icon="search">标签</van-tabbar-item>\n  <van-tabbar-item name="friends" icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item name="setting" icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 'home',\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

显示徽标

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search" dot>标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o" info="5">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o" info="20">标签</van-tabbar-item>\n</van-tabbar>\n

自定义图标

可以通过 slot 自定义图标，其中 icon slot 代表未选中状态下的图标，icon-active slot 代表选中状态下的图标。

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item info="3">\n    <image\n      slot="icon"\n      src="{{ icon.normal }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    <image\n      slot="icon-active"\n      src="{{ icon.active }}"\n      mode="aspectFit"\n      style="width: 30px; height: 18px;"\n    />\n    自定义\n  </van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n    icon: {\n      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',\n      active: 'https://img.yzcdn.cn/vant/user-active.png',\n    },\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

自定义颜色

<van-tabbar\n  active="{{ active }}"\n  active-color="#07c160"\n  inactive-color="#000"\n  bind:change="onChange"\n>\n  <van-tabbar-item icon="home-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="search">标签</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onChange(event) {\n    this.setData({ active: event.detail });\n  },\n});\n

切换标签事件

<van-tabbar active="{{ active }}" bind:change="onChange">\n  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>\n  <van-tabbar-item icon="search">标签2</van-tabbar-item>\n  <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>\n  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>\n</van-tabbar>\n
Page({\n  data: {\n    active: 0,\n  },\n  onClick(event) {\n    wx.showToast({\n      title: `点击标签 ${event.detail + 1}`,\n      icon: 'none',\n    });\n  },\n});\n

结合自定义 tabBar

请参考 微信官方文档 与 代码片段。

API

Tabbar Props

参数说明类型默认值
active当前选中标签的索引number-
fixed是否固定在底部booleantrue
placeholder固定在底部时，是否在标签位置生成一个等高的占位元素booleanfalse
border是否展示外边框booleantrue
z-index元素 z-indexnumber1
active-color选中标签的颜色string#1989fa
inactive-color未选中标签的颜色string#7d7e80
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

Tabbar Event

事件名说明参数
bind:change切换标签时触发event.detail: 当前选中标签的名称或索引值

TabbarItem Props

参数说明类型默认值
name标签名称，作为匹配的标识符string | number当前标签的索引值
icon图标名称或图片链接，可选值见 Icon 组件string-
icon-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon
dot是否显示小红点boolean-
info图标右上角提示信息string | number-

TabbarItem Slot

名称说明
icon未选中时的图标
icon-active选中时的图标
',16)],it={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ct,ot)))},ht={class:"van-doc-markdown-body"},rt=[t('

Tag 标签

介绍

用于标记关键词和概括主要内容。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tag": "@vant/weapp/tag/index"\n}\n

代码演示

基础用法

通过 type 属性控制标签颜色，默认为灰色。

<van-tag type="primary">标签</van-tag>\n<van-tag type="success">标签</van-tag>\n<van-tag type="danger">标签</van-tag>\n<van-tag type="warning">标签</van-tag>\n

空心样式

设置 plain 属性设置为空心样式。

<van-tag plain type="primary">标签</van-tag>\n<van-tag plain type="success">标签</van-tag>\n<van-tag plain type="danger">标签</van-tag>\n<van-tag plain type="warning">标签</van-tag>\n

圆角样式

通过 round 设置为圆角样式。

<van-tag round type="primary">标签</van-tag>\n<van-tag round type="success">标签</van-tag>\n<van-tag round type="danger">标签</van-tag>\n<van-tag round type="warning">标签</van-tag>\n

标记样式

通过 mark 设置为标记样式(半圆角)。

<van-tag mark type="primary">标签</van-tag>\n<van-tag mark type="success">标签</van-tag>\n<van-tag mark type="danger">标签</van-tag>\n<van-tag mark type="warning">标签</van-tag>\n

自定义颜色

<van-tag color="#f2826a">标签</van-tag>\n<van-tag color="#7232dd">标签</van-tag>\n<van-tag color="#7232dd" plain>标签</van-tag>\n<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>\n

标签大小

<van-tag type="danger">标签</van-tag>\n<van-tag type="danger" size="medium">标签</van-tag>\n<van-tag type="danger" size="large">标签</van-tag>\n

可关闭标签

添加 closeable 属性表示标签是可关闭的，关闭标签时会触发 close 事件，在 close 事件中可以执行隐藏标签的逻辑。

<van-tag\n  wx:if="{{ show.primary }}"\n  closeable\n  size="medium"\n  type="primary"\n  id="primary"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n<van-tag\n  wx:if="{{ show.success }}"\n  closeable\n  size="medium"\n  type="success"\n  id="success"\n  bind:close="onClose"\n>\n  标签\n</van-tag>\n
Page({\n  data: {\n    show: {\n      primary: true,\n      success: true,\n    },\n  },\n  onClose(event) {\n    this.setData({\n      [`show.${event.target.id}`]: false,\n    });\n  },\n});\n

API

Props

参数说明类型默认值
type类型，可选值为 primary success danger warningstring-
size大小, 可选值为 large mediumstring-
color标签颜色string-
plain是否为空心样式booleanfalse
round是否为圆角样式booleanfalse
mark是否为标记样式booleanfalse
text-color文本颜色，优先级高于 color 属性stringwhite
closeable是否为可关闭标签booleanfalse

Slot

名称说明
-自定义 Tag 显示内容

Events

事件名说明回调参数
close关闭标签时触发-

外部样式类

类名说明
custom-class根节点样式类
',16)],ut={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",ht,rt)))},gt={class:"van-doc-markdown-body"},jt=[t('

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-toast": "@vant/weapp/toast/index"\n}\n

代码演示

文字提示

import Toast from 'path/to/@vant/weapp/dist/toast/toast';\n\nToast('我是提示文案，建议不超过十五字~');\n
<van-toast id="van-toast" />\n

加载提示

使用 Toast.loading 方法展示加载提示，通过 forbidClick 属性可以禁用背景点击，通过 loadingType 属性可以自定义加载图标类型。

Toast.loading({\n  message: '加载中...',\n  forbidClick: true,\n});\n\n// 自定义加载图标\nToast.loading({\n  message: '加载中...',\n  forbidClick: true,\n  loadingType: 'spinner',\n});\n

成功/失败提示

Toast.success('成功文案');\nToast.fail('失败文案');\n

动态更新提示

const toast = Toast.loading({\n  duration: 0, // 持续展示 toast\n  forbidClick: true,\n  message: '倒计时 3 秒',\n  selector: '#custom-selector',\n});\n\nlet second = 3;\nconst timer = setInterval(() => {\n  second--;\n  if (second) {\n    toast.setData({\n      message: `倒计时 ${second} 秒`,\n    });\n  } else {\n    clearInterval(timer);\n    Toast.clear();\n  }\n}, 1000);\n
<van-toast id="custom-selector" />\n

OnClose 回调函数

Toast({\n  type: 'success',\n  message: '提交成功',\n  onClose: () => {\n    console.log('执行OnClose函数');\n  },\n});\n

API

方法

方法名参数返回值介绍
Toastoptions | messagetoast 实例展示提示
Toast.loadingoptions | messagetoast 实例展示加载提示
Toast.successoptions | messagetoast 实例展示成功提示
Toast.failoptions | messagetoast 实例展示失败提示
Toast.clearclearAllvoid关闭提示
Toast.setDefaultOptionsoptionsvoid修改默认配置，对所有 Toast 生效
Toast.resetDefaultOptions-void重置默认配置，对所有 Toast 生效

Options

参数说明类型默认值
type提示类型，可选值为 loading success fail htmlstringtext
position位置，可选值为 top middle bottomstringmiddle
message内容string''
mask是否显示遮罩层booleanfalse
forbidClick是否禁止背景点击booleanfalse
loadingType加载图标类型, 可选值为 spinnerstringcircular
zIndexz-index 层级number1000
duration展示时长(ms)，值为 0 时，toast 不会消失number2000
selector自定义选择器stringvan-toast
context选择器的选择范围，可以传入自定义组件的 this 作为上下文object当前页面
onClose关闭时的回调函数Function-

Slot

名称说明
-自定义内容
',13)],mt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",gt,jt)))},vt={class:"van-doc-markdown-body"},bt=[t('

Transition 动画

介绍

使元素从一种样式逐渐变化为另一种样式的效果。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-transition": "@vant/weapp/transition/index"\n}\n

代码演示

基础用法

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<van-transition show="{{ show }}" custom-class="block">内容</van-transition>\n

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<van-transition name="fade-up" />\n

高级用法

可以通过外部样式类自定义过渡效果，还可以定制进入和移出的持续时间。

<van-transition\n  show="{{ show }}"\n  name=""\n  duration="{{ { enter: 300, leave: 1000 } }}"\n  enter-class="van-enter-class"\n  enter-active-class="van-enter-active-class"\n  leave-active-class="van-leave-active-class"\n  leave-to-class="van-leave-to-class"\n/>\n
.van-enter-active-class,\n.van-leave-active-class {\n  transition-property: background-color, transform;\n}\n\n.van-enter-class,\n.van-leave-to-class {\n  background-color: red;\n  transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n

API

Props

参数说明类型默认值
name动画类型stringfade
show是否展示组件booleantrue
duration动画时长，单位为毫秒number | object300
custom-style自定义样式string-

Events

事件名说明参数
bind:before-enter进入前触发-
bind:enter进入中触发-
bind:after-enter进入后触发-
bind:before-leave离开前触发-
bind:leave离开中触发-
bind:after-leave离开后触发-

外部样式类

类名说明
custom-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型

名称说明
fade淡入
fade-up上滑淡入
fade-down下滑淡入
fade-left左滑淡入
fade-right右滑淡入
slide-up上滑进入
slide-down下滑进入
slide-left左滑进入
slide-right右滑进入
',12)],qt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",vt,bt)))},yt={class:"van-doc-markdown-body"},ft=[t('

TreeSelect 分类选择

介绍

用于从一组相关联的数据集合中进行选择。

引入

在app.json或index.json中引入组件，详细介绍见快速上手。

"usingComponents": {\n  "van-tree-select": "@vant/weapp/tree-select/index"\n}\n

代码演示

单选模式

可以在任意位置上使用 van-tree-select 标签。传入对应的数据即可。此组件支持单选或多选，具体行为完全基于事件 click-item 的实现逻辑如何为属性 active-id 赋值，当 active-id 为数组时即为多选状态。

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: null,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const activeId = this.data.activeId === detail.id ? null : detail.id;\n\n    this.setData({ activeId });\n  },\n});\n

多选模式

<van-tree-select\n  items="{{ items }}"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  max="{{ max }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n/>\n
Page({\n  data: {\n    mainActiveIndex: 0,\n    activeId: [],\n    max: 2,\n  },\n\n  onClickNav({ detail = {} }) {\n    this.setData({\n      mainActiveIndex: detail.index || 0,\n    });\n  },\n\n  onClickItem({ detail = {} }) {\n    const { activeId } = this.data;\n\n    const index = activeId.indexOf(detail.id);\n    if (index > -1) {\n      activeId.splice(index, 1);\n    } else {\n      activeId.push(detail.id);\n    }\n\n    this.setData({ activeId });\n  },\n});\n

自定义内容

<van-tree-select\n  items="{{ items }}"\n  height="55vw"\n  main-active-index="{{ mainActiveIndex }}"\n  active-id="{{ activeId }}"\n  bind:click-nav="onClickNav"\n  bind:click-item="onClickItem"\n>\n  <image src="https://img.yzcdn.cn/vant/apple-1.jpg" slot="content" />\n</van-tree-select>\n

API

Props

参数说明类型默认值
items分类显示所需的数据Array[]
height高度，默认单位为pxnumber | string300
main-active-index左侧选中项的索引number0
active-id右侧选中项的 id，支持传入数组string | number | Array0
max右侧项最大选中个数numberInfinity
selected-icon v1.5.0自定义右侧栏选中状态的图标stringsuccess

Events

事件名说明回调参数
bind:click-nav左侧导航点击时，触发的事件event.detail.index：被点击的导航的索引
bind:click-item右侧选择项被点击时，会触发的事件event.detail: 该点击项的数据

Slots

名称说明
content自定义右侧区域内容，如果存在 items，则插入在顶部

items 数据结构

items 整体为一个数组，数组内包含一系列描述分类的对象。每个分类里，text 表示当前分类的名称。children 表示分类里的可选项，为数组结构，id 被用来唯一标识每个选项。

[\n  {\n    // 导航名称\n    text: '所有城市',\n    // 导航名称右上角徽标，1.5.0 版本开始支持\n    badge: 3,\n    // 是否在导航名称右上角显示小红点，1.5.0 版本开始支持\n    dot: true,\n    // 禁用选项\n    disabled: false,\n    // 该导航下所有的可选项\n    children: [\n      {\n        // 名称\n        text: '温州',\n        // id，作为匹配选中状态的标识\n        id: 1,\n        // 禁用选项\n        disabled: true,\n      },\n      {\n        text: '杭州',\n        id: 2,\n      },\n    ],\n  },\n];\n

外部样式类

类名说明
main-item-class左侧选项样式类
content-item-class右侧选项样式类
main-active-class左侧选项选中样式类
content-active-class右侧选项选中样式类
main-disabled-class左侧选项禁用样式类
content-disabled-class右侧选项禁用样式类
',13)],xt={setup:(t,{expose:n})=>(n({frontmatter:{}}),(t,n)=>(s(),a("div",yt,ft)))},wt={class:"van-doc-markdown-body"},zt=[t('

Uploader 文件上传

介绍

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

引入

在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {\n  "van-uploader": "@vant/weapp/uploader/index"\n}\n

Vant Weapp 1.0 版本开始支持此组件，升级方式参见快速上手

代码演示

基础用法

文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，然后再使用wx.uploadFile将图片上传到远程服务器上。

<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" />\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  afterRead(event) {\n    const { file } = event.detail;\n    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式\n    wx.uploadFile({\n      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址\n      filePath: file.url,\n      name: 'file',\n      formData: { user: 'test' },\n      success(res) {\n        // 上传完成需要更新 fileList\n        const { fileList = [] } = this.data;\n        fileList.push({ ...file, url: res.data });\n        this.setData({ fileList });\n      },\n    });\n  },\n});\n

图片预览

通过向组件传入file-list属性，可以绑定已经上传的图片列表，并展示图片列表的预览图。file-list 的详细结构可见下方。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        name: '图片1',\n      },\n      // Uploader 根据文件后缀来判断是否为图片文件\n      // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明\n      {\n        url: 'http://iph.href.lu/60x60?text=default',\n        name: '图片2',\n        isImage: true,\n        deletable: true,\n      },\n    ],\n  },\n});\n

图片可删除状态

通过deletable属性可控制是否开启所有图片的可删除状态，deletable默认为true，即所有图片都可删除。

若希望控制单张图片的可删除状态，可将deletable属性设置为true，并在fileList中为每一项设置deletable属性。

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        deletable: false,\n      },\n    ],\n  },\n});\n

上传状态

通过status属性可以标识上传状态，uploading表示上传中，failed表示上传失败，done表示上传完成。

<van-uploader file-list="{{ fileList }}" />\n
Page({\n  data: {\n    fileList: [\n      {\n        url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n        status: 'uploading',\n        message: '上传中',\n      },\n      {\n        url: 'https://img.yzcdn.cn/vant/tree.jpg',\n        status: 'failed',\n        message: '上传失败',\n      },\n    ],\n  },\n});\n

限制上传数量

通过max-count属性可以限制上传文件的数量，上传数量达到限制后，会自动隐藏上传区域。

<van-uploader\n  file-list="{{ fileList }}"\n  max-count="2"\n  bind:after-read="afterRead"\n/>\n

自定义上传样式

通过插槽可以自定义上传区域的样式。

<van-uploader>\n  <van-button icon="photo" type="primary">上传图片</van-button>\n</van-uploader>\n

上传前校验

将use-before-read属性设置为true，然后绑定 before-read 事件可以在上传前进行校验，调用 callback 方法传入 true 表示校验通过，传入 false 表示校验失败。

<van-uploader\n  file-list="{{ fileList }}"\n  accept="media"\n  use-before-read\n  bind:before-read="beforeRead"\n  bind:after-read="afterRead"\n/>\n
Page({\n  data: {\n    fileList: [],\n  },\n\n  beforeRead(event) {\n    const { file, callback } = event.detail;\n    callback(file.type === 'image');\n  },\n});\n

云开发示例

上传图片至云存储

在开发中，可以利用小程序云开发的云存储能力，将图片上传至云存储内。然后根据返回的fileiId来下载图片、删除图片和替换临时链接。

// 上传图片\nuploadToCloud() {\n  wx.cloud.init();\n  const { fileList } = this.data;\n  if (!fileList.length) {\n    wx.showToast({ title: '请选择图片', icon: 'none' });\n  } else {\n    const uploadTasks = fileList.map((file, index) => this.uploadFilePromise(`my-photo${index}.png`, file));\n    Promise.all(uploadTasks)\n      .then(data => {\n        wx.showToast({ title: '上传成功', icon: 'none' });\n        const newFileList = data.map(item => ({ url: item.fileID }));\n        this.setData({ cloudPath: data, fileList: newFileList });\n      })\n      .catch(e => {\n        wx.showToast({ title: '上传失败', icon: 'none' });\n        console.log(e);\n      });\n  }\n}\n\nuploadFilePromise(fileName, chooseResult) {\n  return wx.cloud.uploadFile({\n    cloudPath: fileName,\n    filePath: chooseResult.url\n  });\n}\n

API

Props

参数说明类型默认值
name标识符，可以在回调函数的第二项参数中获取string | number-
accept接受的文件类型, 可选值为all media image file videostringimage
sizeType所选的图片的尺寸, 当accept为image类型时设置所选图片的尺寸可选值为original compressedstring[]['original','compressed']
preview-size预览图和上传区域的尺寸，默认单位为pxstring | number80px
preview-image是否在上传完成后展示预览图booleantrue
preview-full-image是否在点击预览图后展示全屏图片预览booleantrue
multiple是否开启图片多选，部分安卓机型不支持booleanfalse
disabled是否禁用文件上传booleanfalse
show-upload是否展示文件上传按钮booleantrue
deletable是否展示删除按钮booleantrue
capture图片或者视频选取模式，当accept为image类型时设置capture可选值为camera可以直接调起摄像头string | string[]['album', 'camera']
max-size文件大小限制，单位为bytenumber-
max-count文件上传数量限制number-
upload-text上传区域文字提示string-
image-fit预览图裁剪模式，可选值参考小程序image组件的mode属性stringscaleToFill
use-before-read是否开启文件读取前事件boolean-
camera当 accept 为 video 时生效，可选值为 back frontstring-
compressed当 accept 为 video 时生效，是否压缩视频，默认为trueboolean-
max-duration当 accept 为 video 时生效，拍摄视频最长拍摄时间，单位秒number-
upload-icon上传区域图标，可选值见 Icon 组件stringplus

accept 的合法值

参数说明
media图片和视频
image图片
video视频
file从客户端会话选择图片和视频以外的文件
all从客户端会话选择所有文件

FileList

file-list 为一个对象数组，数组中的每一个对象包含以下 key。

参数说明
url图片和视频的网络资源地址
name文件名称，视频将在全屏预览时作为标题显示
thumb图片缩略图或视频封面的网络资源地址，仅对图片和视频有效
type文件类型，可选值image video file
isImage手动标记图片资源
isVideo手动标记视频资源

Slot

名称说明
-自定义上传区域

Event

事件名说明回调参数
bind:before-read文件读取前，在回调函数中返回 false 可终止文件读取，绑定事件的同时需要将use-before-read属性设置为trueevent.detail.file: 当前读取的文件，event.detail.callback: 回调函数，调用callback(false)终止文件读取
bind:after-read文件读取完成后event.detail.file: 当前读取的文件
bind:oversize文件超出大小限制-
bind:click-preview点击预览图片event.detail.index: 点击图片的序号值
bind:delete删除图片event.detail.index: 删除图片的序号值
',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:J,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:Js,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:Ja,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.9.2";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}; diff --git a/assets/main.ce73e32f.js b/assets/main.ca71d1e6.js similarity index 99% rename from assets/main.ce73e32f.js rename to assets/main.ca71d1e6.js index 94025f5a..4e07588a 100644 --- a/assets/main.ce73e32f.js +++ b/assets/main.ca71d1e6.js @@ -1,3 +1,3 @@ -var e,t=Object.defineProperty,n=Object.defineProperties,r=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,c=(e,n,r)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r;import{_ as l,p as u,c as s,s as f,i as p,a as m,l as h,d,b as v,e as y,g as _}from"./iframe-router.515bc94a.js";import{r as g,c as b,n as O,a as S,o as w,F as E,b as j,d as P,t as k,e as I,f as C,g as D,h as N,w as A,T as x,i as T,j as L,v as H,p as R,k as M,l as q,m as V,q as U,s as F}from"./vue-libs.7d12dd47.js";const $=["href","innerHTML"],B=["innerHTML"];var z=l({name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const e=(this.item.title||this.item.name).split(" ");return`${e[0]} ${e.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(e,t,n,r,o,a){const i=g("router-link");return n.item.path?(w(),b(i,{key:0,class:O({active:a.active}),to:a.path,innerHTML:a.itemName},null,8,["class","to","innerHTML"])):n.item.link?(w(),S("a",{key:1,href:n.item.link,innerHTML:a.itemName},null,8,$)):(w(),S("a",{key:2,innerHTML:a.itemName},null,8,B))}]]);const K={name:"VanDocNav",components:{[z.name]:z},props:{lang:String,navConfig:Array},data:()=>({top:64,bottom:0}),computed:{style(){return{top:this.top+"px",bottom:this.bottom+"px"}},base(){return this.lang?`/${this.lang}/`:"/"}},created(){window.addEventListener("scroll",this.onScroll),this.onScroll()},methods:{onScroll(){const{pageYOffset:e}=window;this.top=Math.max(0,64-e)}}},W={class:"van-doc-nav__title"};var J=l(K,[["render",function(e,t,n,r,o,a){const i=g("van-doc-nav-link");return w(),S("div",{class:"van-doc-nav",style:D(a.style)},[(w(!0),S(E,null,j(n.navConfig,((e,t)=>(w(),S("div",{class:"van-doc-nav__group",key:t},[P("div",W,k(e.title),1),e.items?(w(!0),S(E,{key:0},j(e.items,((e,t)=>(w(),S("div",{key:t,class:"van-doc-nav__item"},[I(i,{item:e,base:a.base},null,8,["item","base"])])))),128)):C("v-if",!0)])))),128))],4)}]]); +var e,t=Object.defineProperty,n=Object.defineProperties,r=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,c=(e,n,r)=>n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r;import{_ as l,p as u,c as s,s as f,i as p,a as m,l as h,d,b as v,e as y,g as _}from"./iframe-router.fef98aab.js";import{r as g,c as b,n as O,a as S,o as w,F as E,b as j,d as P,t as k,e as I,f as C,g as D,h as N,w as A,T as x,i as T,j as L,v as H,p as R,k as M,l as q,m as V,q as U,s as F}from"./vue-libs.7d12dd47.js";const $=["href","innerHTML"],B=["innerHTML"];var z=l({name:"VanDocNavLink",props:{base:String,item:Object},computed:{itemName(){const e=(this.item.title||this.item.name).split(" ");return`${e[0]} ${e.slice(1).join(" ")}`},path(){return`${this.base}${this.item.path}`},active(){return this.$route.path===this.path||"home"===this.item.path&&this.$route.path===this.base}},watch:{active(){this.scrollIntoView()}},mounted(){this.scrollIntoView()},methods:{scrollIntoView(){this.active&&this.$el&&this.$el.scrollIntoViewIfNeeded&&this.$el.scrollIntoViewIfNeeded()}}},[["render",function(e,t,n,r,o,a){const i=g("router-link");return n.item.path?(w(),b(i,{key:0,class:O({active:a.active}),to:a.path,innerHTML:a.itemName},null,8,["class","to","innerHTML"])):n.item.link?(w(),S("a",{key:1,href:n.item.link,innerHTML:a.itemName},null,8,$)):(w(),S("a",{key:2,innerHTML:a.itemName},null,8,B))}]]);const K={name:"VanDocNav",components:{[z.name]:z},props:{lang:String,navConfig:Array},data:()=>({top:64,bottom:0}),computed:{style(){return{top:this.top+"px",bottom:this.bottom+"px"}},base(){return this.lang?`/${this.lang}/`:"/"}},created(){window.addEventListener("scroll",this.onScroll),this.onScroll()},methods:{onScroll(){const{pageYOffset:e}=window;this.top=Math.max(0,64-e)}}},W={class:"van-doc-nav__title"};var J=l(K,[["render",function(e,t,n,r,o,a){const i=g("van-doc-nav-link");return w(),S("div",{class:"van-doc-nav",style:D(a.style)},[(w(!0),S(E,null,j(n.navConfig,((e,t)=>(w(),S("div",{class:"van-doc-nav__group",key:t},[P("div",W,k(e.title),1),e.items?(w(!0),S(E,{key:0},j(e.items,((e,t)=>(w(),S("div",{key:t,class:"van-doc-nav__item"},[I(i,{item:e,base:a.base},null,8,["item","base"])])))),128)):C("v-if",!0)])))),128))],4)}]]); /*! @docsearch/js 3.0.0-alpha.40 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */ function Q(e){return(Q="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Y(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function G(){return(G=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n3)for(n=[n],a=3;a0?de(m.type,m.props,m.key,null,m.__v):m)){if(m.__=n,m.__b=n.__b+1,null===(p=y[s])||p&&m.key==p.key&&m.type===p.type)y[s]=void 0;else for(f=0;f<_;f++){if((p=y[f])&&m.key==p.key&&m.type===p.type){y[f]=void 0;break}p=null}De(e,m,p=p||ue,o,a,i,c,l,u),h=m.__e,(f=m.ref)&&p.ref!=f&&(v||(v=[]),p.ref&&v.push(p.ref,null,m),v.push(f,m.__c||h,m)),null!=h?(null==d&&(d=h),"function"==typeof m.type&&null!=m.__k&&m.__k===p.__k?m.__d=l=we(m,l,e):l=je(e,m,p,y,h,l),u||"option"!==n.type?"function"==typeof n.type&&(n.__d=l):e.value=""):l&&p.__e==l&&l.parentNode!=e&&(l=_e(p))}for(n.__e=d,s=_;s--;)null!=y[s]&&("function"==typeof n.type&&null!=y[s].__e&&y[s].__e==n.__d&&(n.__d=_e(r,s+1)),xe(y[s],y[s]));if(v)for(s=0;s3)for(n=[n],a=3;a=n.__.length&&n.__.push({}),n.__[e]}function Qe(e,t,n){var r=Je(Me++,2);return r.t=e,r.__c||(r.__=[n?n(t):rt(void 0,t),function(e){var t=r.t(r.__[0],e);r.__[0]!==t&&(r.__=[t,r.__[1]],r.__c.setState({}))}],r.__c=qe),r.__}function Ye(e,t){var n=Je(Me++,4);!oe.__s&&nt(n.__H,t)&&(n.__=e,n.__H=t,qe.__h.push(n))}function Ge(e,t){var n=Je(Me++,7);return nt(n.__H,t)&&(n.__=e(),n.__H=t,n.__h=e),n.__}function Ze(){Fe.forEach((function(e){if(e.__P)try{e.__H.__h.forEach(et),e.__H.__h.forEach(tt),e.__H.__h=[]}catch(t){e.__H.__h=[],oe.__e(t,e.__v)}})),Fe=[]}oe.__b=function(e){qe=null,$e&&$e(e)},oe.__r=function(e){Be&&Be(e),Me=0;var t=(qe=e.__c).__H;t&&(t.__h.forEach(et),t.__h.forEach(tt),t.__h=[])},oe.diffed=function(e){ze&&ze(e);var t=e.__c;t&&t.__H&&t.__H.__h.length&&(1!==Fe.push(t)&&Ve===oe.requestAnimationFrame||((Ve=oe.requestAnimationFrame)||function(e){var t,n=function(){clearTimeout(r),Xe&&cancelAnimationFrame(t),setTimeout(e)},r=setTimeout(n,100);Xe&&(t=requestAnimationFrame(n))})(Ze)),qe=void 0},oe.__c=function(e,t){t.some((function(e){try{e.__h.forEach(et),e.__h=e.__h.filter((function(e){return!e.__||tt(e)}))}catch(n){t.some((function(e){e.__h&&(e.__h=[])})),t=[],oe.__e(n,e.__v)}})),Ke&&Ke(e,t)},oe.unmount=function(e){We&&We(e);var t=e.__c;if(t&&t.__H)try{t.__H.__.forEach(et)}catch(n){oe.__e(n,t.__v)}};var Xe="function"==typeof requestAnimationFrame;function et(e){var t=qe;"function"==typeof e.__c&&e.__c(),qe=t}function tt(e){var t=qe;e.__c=e.__(),qe=t}function nt(e,t){return!e||e.length!==t.length||t.some((function(t,n){return t!==e[n]}))}function rt(e,t){return"function"==typeof t?t(e):t}function ot(e,t){for(var n in t)e[n]=t[n];return e}function at(e,t){for(var n in e)if("__source"!==n&&!(n in t))return!0;for(var r in t)if("__source"!==r&&e[r]!==t[r])return!0;return!1}function it(e){this.props=e}(it.prototype=new ye).isPureReactComponent=!0,it.prototype.shouldComponentUpdate=function(e,t){return at(this.props,e)||at(this.state,t)};var ct=oe.__b;oe.__b=function(e){e.type&&e.type.__f&&e.ref&&(e.props.ref=e.ref,e.ref=null),ct&&ct(e)};var lt="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.forward_ref")||3911,ut=function(e,t){return null==e?null:Ee(Ee(e).map(t))},st={map:ut,forEach:ut,count:function(e){return e?Ee(e).length:0},only:function(e){var t=Ee(e);if(1!==t.length)throw"Children.only";return t[0]},toArray:Ee},ft=oe.__e;function pt(){this.__u=0,this.t=null,this.__b=null}function mt(e){var t=e.__.__c;return t&&t.__e&&t.__e(e)}function ht(){this.u=null,this.o=null}oe.__e=function(e,t,n){if(e.then)for(var r,o=t;o=o.__;)if((r=o.__c)&&r.__c)return null==t.__e&&(t.__e=n.__e,t.__k=n.__k),r.__c(e,t);ft(e,t,n)},(pt.prototype=new ye).__c=function(e,t){var n=t.__c,r=this;null==r.t&&(r.t=[]),r.t.push(n);var o=mt(r.__v),a=!1,i=function(){a||(a=!0,n.componentWillUnmount=n.__c,o?o(c):c())};n.__c=n.componentWillUnmount,n.componentWillUnmount=function(){i(),n.__c&&n.__c()};var c=function(){if(!--r.__u){if(r.state.__e){var e=r.state.__e;r.__v.__k[0]=function e(t,n,r){return t&&(t.__v=null,t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)})),t.__c&&t.__c.__P===n&&(t.__e&&r.insertBefore(t.__e,t.__d),t.__c.__e=!0,t.__c.__P=r)),t}(e,e.__c.__P,e.__c.__O)}var t;for(r.setState({__e:r.__b=null});t=r.t.pop();)t.forceUpdate()}},l=!0===t.__h;r.__u++||l||r.setState({__e:r.__b=r.__v.__k[0]}),e.then(i,i)},pt.prototype.componentWillUnmount=function(){this.t=[]},pt.prototype.render=function(e,t){if(this.__b){if(this.__v.__k){var n=document.createElement("div"),r=this.__v.__k[0].__c;this.__v.__k[0]=function e(t,n,r){return t&&(t.__c&&t.__c.__H&&(t.__c.__H.__.forEach((function(e){"function"==typeof e.__c&&e.__c()})),t.__c.__H=null),null!=(t=ot({},t)).__c&&(t.__c.__P===r&&(t.__c.__P=n),t.__c=null),t.__k=t.__k&&t.__k.map((function(t){return e(t,n,r)}))),t}(this.__b,n,r.__O=r.__P)}this.__b=null}var o=t.__e&&he(ve,null,e.fallback);return o&&(o.__h=null),[he(ve,null,t.__e?null:e.children),o]};var dt=function(e,t,n){if(++n[1]===n[0]&&e.o.delete(t),e.props.revealOrder&&("t"!==e.props.revealOrder[0]||!e.o.size))for(n=e.u;n;){for(;n.length>3;)n.pop()();if(n[1]>>1,1),t.i.removeChild(e)}}),Le(he(vt,{context:t.context},e.__v),t.l)):t.l&&t.componentWillUnmount()}function _t(e,t){return he(yt,{__v:e,i:t})}(ht.prototype=new ye).__e=function(e){var t=this,n=mt(t.__v),r=t.o.get(e);return r[0]++,function(o){var a=function(){t.props.revealOrder?(r.push(o),dt(t,e,r)):o()};n?n(a):a()}},ht.prototype.render=function(e){this.u=null,this.o=new Map;var t=Ee(e.children);e.revealOrder&&"b"===e.revealOrder[0]&&t.reverse();for(var n=t.length;n--;)this.o.set(t[n],this.u=[1,0,this.u]);return e.children},ht.prototype.componentDidUpdate=ht.prototype.componentDidMount=function(){var e=this;this.o.forEach((function(t,n){dt(e,n,t)}))};var gt="undefined"!=typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,bt=/^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|fill|flood|font|glyph(?!R)|horiz|marker(?!H|W|U)|overline|paint|stop|strikethrough|stroke|text(?!L)|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/,Ot=function(e){return("undefined"!=typeof Symbol&&"symbol"==Q(Symbol())?/fil|che|rad/i:/fil|che|ra/i).test(e)};function St(e,t,n){return null==t.__k&&(t.textContent=""),Le(e,t),"function"==typeof n&&n(),e?e.__c:null}ye.prototype.isReactComponent={},["componentWillMount","componentWillReceiveProps","componentWillUpdate"].forEach((function(e){Object.defineProperty(ye.prototype,e,{configurable:!0,get:function(){return this["UNSAFE_"+e]},set:function(t){Object.defineProperty(this,e,{configurable:!0,writable:!0,value:t})}})}));var wt=oe.event;function Et(){}function jt(){return this.cancelBubble}function Pt(){return this.defaultPrevented}oe.event=function(e){return wt&&(e=wt(e)),e.persist=Et,e.isPropagationStopped=jt,e.isDefaultPrevented=Pt,e.nativeEvent=e};var kt,It={configurable:!0,get:function(){return this.class}},Ct=oe.vnode;oe.vnode=function(e){var t=e.type,n=e.props,r=n;if("string"==typeof t){for(var o in r={},n){var a=n[o];"value"===o&&"defaultValue"in n&&null==a||("defaultValue"===o&&"value"in n&&null==n.value?o="value":"download"===o&&!0===a?a="":/ondoubleclick/i.test(o)?o="ondblclick":/^onchange(textarea|input)/i.test(o+t)&&!Ot(n.type)?o="oninput":/^on(Ani|Tra|Tou|BeforeInp)/.test(o)?o=o.toLowerCase():bt.test(o)?o=o.replace(/[A-Z0-9]/,"-$&").toLowerCase():null===a&&(a=void 0),r[o]=a)}"select"==t&&r.multiple&&Array.isArray(r.value)&&(r.value=Ee(n.children).forEach((function(e){e.props.selected=-1!=r.value.indexOf(e.props.value)}))),"select"==t&&null!=r.defaultValue&&(r.value=Ee(n.children).forEach((function(e){e.props.selected=r.multiple?-1!=r.defaultValue.indexOf(e.props.value):r.defaultValue==e.props.value}))),e.props=r}t&&n.class!=n.className&&(It.enumerable="className"in n,null!=n.className&&(r.class=n.className),Object.defineProperty(r,"className",It)),e.$$typeof=gt,Ct&&Ct(e)};var Dt=oe.__r;oe.__r=function(e){Dt&&Dt(e),kt=e.__c};var Nt={ReactCurrentDispatcher:{current:{readContext:function(e){return kt.__n[e.__c].props.value}}}};function At(e){return!!e&&e.$$typeof===gt}"object"==("undefined"==typeof performance?"undefined":Q(performance))&&"function"==typeof performance.now&&performance.now.bind(performance);var xt={useState:function(e){return Ue=1,Qe(rt,e)},useReducer:Qe,useEffect:function(e,t){var n=Je(Me++,3);!oe.__s&&nt(n.__H,t)&&(n.__=e,n.__H=t,qe.__H.__h.push(n))},useLayoutEffect:Ye,useRef:function(e){return Ue=5,Ge((function(){return{current:e}}),[])},useImperativeHandle:function(e,t,n){Ue=6,Ye((function(){"function"==typeof e?e(t()):e&&(e.current=t())}),null==n?n:n.concat(e))},useMemo:Ge,useCallback:function(e,t){return Ue=8,Ge((function(){return e}),t)},useContext:function(e){var t=qe.context[e.__c],n=Je(Me++,9);return n.__c=e,t?(null==n.__&&(n.__=!0,t.sub(qe)),t.props.value):e.__},useDebugValue:function(e,t){oe.useDebugValue&&oe.useDebugValue(t?t(e):e)},version:"16.8.0",Children:st,render:St,hydrate:function(e,t,n){return He(e,t),"function"==typeof n&&n(),e?e.__c:null},unmountComponentAtNode:function(e){return!!e.__k&&(Le(null,e),!0)},createPortal:_t,createElement:he,createContext:function(e,t){var n={__c:t="__cC"+le++,__:e,Consumer:function(e,t){return e.children(t)},Provider:function(e){var n,r;return this.getChildContext||(n=[],(r={})[t]=this,this.getChildContext=function(){return r},this.shouldComponentUpdate=function(e){this.props.value!==e.value&&n.some(be)},this.sub=function(e){n.push(e);var t=e.componentWillUnmount;e.componentWillUnmount=function(){n.splice(n.indexOf(e),1),t&&t.call(e)}}),e.children}};return n.Provider.__=n.Consumer.contextType=n},createFactory:function(e){return he.bind(null,e)},cloneElement:function(e){return At(e)?Re.apply(null,arguments):e},createRef:function(){return{current:null}},Fragment:ve,isValidElement:At,findDOMNode:function(e){return e&&(e.base||1===e.nodeType&&e)||null},Component:ye,PureComponent:it,memo:function(e,t){function n(e){var n=this.props.ref,r=n==e.ref;return!r&&n&&(n.call?n(null):n.current=null),t?!t(this.props,e)||!r:at(this.props,e)}function r(t){return this.shouldComponentUpdate=n,he(e,t)}return r.displayName="Memo("+(e.displayName||e.name)+")",r.prototype.isReactComponent=!0,r.__f=!0,r},forwardRef:function(e){function t(t,n){var r=ot({},t);return delete r.ref,e(r,(n=t.ref||n)&&("object"!=Q(n)||"current"in n)?n:null)}return t.$$typeof=lt,t.render=t,t.prototype.isReactComponent=t.__f=!0,t.displayName="ForwardRef("+(e.displayName||e.name)+")",t},unstable_batchedUpdates:function(e,t){return e(t)},StrictMode:ve,Suspense:pt,SuspenseList:ht,lazy:function(e){var t,n,r;function o(o){if(t||(t=e()).then((function(e){n=e.default||e}),(function(e){r=e})),r)throw r;if(!n)throw t;return he(n,o)}return o.displayName="Lazy",o.__f=!0,o},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:Nt};function Tt(){return xt.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},xt.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}function Lt(){return xt.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},xt.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}function Ht(){return(Ht=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["translations"]),a=r.buttonText,i=void 0===a?"Search":a,c=r.buttonAriaLabel,l=void 0===c?"Search":c,u=Ge((function(){return"undefined"!=typeof navigator?/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl":null}),[]);return xt.createElement("button",Ht({type:"button",className:"DocSearch DocSearch-Button","aria-label":l},o,{ref:t}),xt.createElement("span",{className:"DocSearch-Button-Container"},xt.createElement(Lt,null),xt.createElement("span",{className:"DocSearch-Button-Placeholder"},i)),xt.createElement("span",{className:"DocSearch-Button-Keys"},null!==u&&xt.createElement(xt.Fragment,null,xt.createElement("span",{className:"DocSearch-Button-Key"},"Ctrl"===u?xt.createElement(Tt,null):u),xt.createElement("span",{className:"DocSearch-Button-Key"},"K"))))})),Mt=0;function qt(e){return 0===e.collections.length?0:e.collections.reduce((function(e,t){return e+t.items.length}),0)}function Vt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Ut(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Ft(e){return e.reduce((function(e,t){return e.concat(t)}),[])}function $t(e,t,n,r){if(!n)return null;if(e<0&&(null===t||null!==r&&0===t))return n+e;var o=(null===t?-1:t)+e;return o<=-1||o>=n?null===r?null:0:o}var Bt=function(){};function zt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Kt(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function Wt(e){return(Wt="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function Jt(e){var t,n,r=(n=(t=e).collections.map((function(e){return e.items.length})).reduce((function(e,t,n){var r=(e[n-1]||0)+t;return e.push(r),e}),[]).reduce((function(e,n){return n<=t.activeItemId?e+1:e}),0),t.collections[n]);if(!r)return null;var o=r.items[function(e){for(var t=e.state,n=e.collection,r=!1,o=0,a=0;!1===r;){var i=t.collections[o];if(i===n){r=!0;break}a+=i.items.length,o++}return t.activeItemId-a}({state:e,collection:r})],a=r.source;return{item:o,itemInputValue:a.getItemInputValue({item:o,state:e}),itemUrl:a.getItemUrl({item:o,state:e}),source:a}}function Qt(e,t){return e===t||e.contains(t)}function Yt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Gt(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);ne.length)&&(t=e.length);for(var n=0,r=new Array(t);n=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["event","nextState","props","query","refresh","store"]);yn&&o.environment.clearTimeout(yn);var u,s=l.setCollections,f=l.setIsOpen,p=l.setQuery,m=l.setActiveItemId,h=l.setStatus;return p(a),m(o.defaultActiveItemId),a||!1!==o.openOnFocus?(h("loading"),yn=o.environment.setTimeout((function(){h("stalled")}),o.stallThreshold),o.getSources(dn({query:a,refresh:i,state:c.getState()},l)).then((function(e){return h("loading"),Promise.all(e.map((function(e){return Promise.resolve(e.getItems(dn({query:a,refresh:i,state:c.getState()},l))).then((function(t){return function(e,t){return n=e,Boolean(null==n?void 0:n.execute)?sn(sn({},e),{},{requests:e.queries.map((function(n){return{query:n,sourceId:t,transformResponse:e.transformResponse}}))}):{items:e,sourceId:t};var n}(t,e.sourceId)}))}))).then(mn).then((function(t){return function(e,t){return t.map((function(t){var n,r=e.filter((function(e){return e.sourceId===t.sourceId})),o=r.map((function(e){return e.items})),a=r[0].transformResponse,i=a?a({results:n=o.map((function(e){var t;return Gt(Gt({},e),{},{hits:null===(t=e.hits)||void 0===t?void 0:t.map((function(t){return Gt(Gt({},t),{},{__autocomplete_indexName:e.index,__autocomplete_queryID:e.queryID})}))})})),hits:n.map((function(e){return e.hits})).filter(Boolean),facetHits:n.map((function(e){var t;return null===(t=e.facetHits)||void 0===t?void 0:t.map((function(e){return{label:e.value,count:e.count,_highlightResult:{label:{value:e.highlighted}}}}))})).filter(Boolean)}):o;return Array.isArray(i),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned type ').concat(JSON.stringify(cn(i)),":\n\n").concat(JSON.stringify(i,null,2),".\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),i.every(Boolean),'The `getItems` function from source "'.concat(t.sourceId,'" must return an array of items but returned ').concat(JSON.stringify(void 0),".\n\nDid you forget to return items?\n\nSee: https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/#param-getitems"),{source:t,items:i}}))}(t,e)})).then((function(e){var n;h("idle"),s(e);var u=o.shouldPanelOpen({state:c.getState()});f(null!==(n=r.isOpen)&&void 0!==n?n:o.openOnFocus&&!a&&u||u);var p=Jt(c.getState());if(null!==c.getState().activeItemId&&p){var m=p.item,d=p.itemInputValue,v=p.itemUrl,y=p.source;y.onActive(dn({event:t,item:m,itemInputValue:d,itemUrl:v,refresh:i,source:y,state:c.getState()},l))}})).finally((function(){yn&&o.environment.clearTimeout(yn)}))}))):(h("idle"),s(c.getState().collections.map((function(e){return dn(dn({},e),{},{items:[]})}))),f(null!==(u=r.isOpen)&&void 0!==u?u:o.shouldPanelOpen({state:c.getState()})),Promise.resolve())}function gn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function bn(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function Pn(e){var t=e.props,n=e.refresh,r=e.store,o=jn(e,["props","refresh","store"]);return{getEnvironmentProps:function(e){var n=e.inputElement,o=e.formElement,a=e.panelElement;return wn({onTouchStart:function(e){!1!==r.getState().isOpen&&e.target!==n&&!1===[o,a].some((function(n){return Qt(n,e.target)||Qt(n,t.environment.document.activeElement)}))&&r.dispatch("blur",null)},onTouchMove:function(e){!1!==r.getState().isOpen&&n===t.environment.document.activeElement&&e.target!==n&&n.blur()}},jn(e,["inputElement","formElement","panelElement"]))},getRootProps:function(e){return wn({role:"combobox","aria-expanded":r.getState().isOpen,"aria-haspopup":"listbox","aria-owns":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label")},e)},getFormProps:function(e){return e.inputElement,wn({action:"",noValidate:!0,role:"search",onSubmit:function(a){var i;a.preventDefault(),t.onSubmit(wn({event:a,refresh:n,state:r.getState()},o)),r.dispatch("submit",null),null===(i=e.inputElement)||void 0===i||i.blur()},onReset:function(a){var i;a.preventDefault(),t.onReset(wn({event:a,refresh:n,state:r.getState()},o)),r.dispatch("reset",null),null===(i=e.inputElement)||void 0===i||i.focus()}},jn(e,["inputElement"]))},getLabelProps:function(e){return wn({htmlFor:"".concat(t.id,"-input"),id:"".concat(t.id,"-label")},e)},getInputProps:function(e){function a(e){(t.openOnFocus||Boolean(r.getState().query))&&_n(wn({event:e,props:t,query:r.getState().completion||r.getState().query,refresh:n,store:r},o)),r.dispatch("focus",null)}var i="ontouchstart"in t.environment,c=e||{},l=(c.inputElement,c.maxLength),u=void 0===l?512:l,s=jn(c,["inputElement","maxLength"]),f=Jt(r.getState());return wn({"aria-autocomplete":"both","aria-activedescendant":r.getState().isOpen&&null!==r.getState().activeItemId?"".concat(t.id,"-item-").concat(r.getState().activeItemId):void 0,"aria-controls":r.getState().isOpen?"".concat(t.id,"-list"):void 0,"aria-labelledby":"".concat(t.id,"-label"),value:r.getState().completion||r.getState().query,id:"".concat(t.id,"-input"),autoComplete:"off",autoCorrect:"off",autoCapitalize:"off",enterKeyHint:null!=f&&f.itemUrl?"go":"search",spellCheck:"false",autoFocus:t.autoFocus,placeholder:t.placeholder,maxLength:u,type:"search",onChange:function(e){_n(wn({event:e,props:t,query:e.currentTarget.value.slice(0,u),refresh:n,store:r},o))},onKeyDown:function(e){!function(e){var t=e.event,n=e.props,r=e.refresh,o=e.store,a=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["event","props","refresh","store"]);if("ArrowUp"===t.key||"ArrowDown"===t.key){var i=function(){var e=n.environment.document.getElementById("".concat(n.id,"-item-").concat(o.getState().activeItemId));e&&(e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView(!1))},c=function(){var e=Jt(o.getState());if(null!==o.getState().activeItemId&&e){var n=e.item,i=e.itemInputValue,c=e.itemUrl,l=e.source;l.onActive(bn({event:t,item:n,itemInputValue:i,itemUrl:c,refresh:r,source:l,state:o.getState()},a))}};t.preventDefault(),!1===o.getState().isOpen&&(n.openOnFocus||Boolean(o.getState().query))?_n(bn({event:t,props:n,query:o.getState().query,refresh:r,store:o},a)).then((function(){o.dispatch(t.key,{nextActiveItemId:n.defaultActiveItemId}),c(),setTimeout(i,0)})):(o.dispatch(t.key,{}),c(),i())}else if("Escape"===t.key)t.preventDefault(),o.dispatch(t.key,null);else if("Enter"===t.key){if(null===o.getState().activeItemId||o.getState().collections.every((function(e){return 0===e.items.length})))return;t.preventDefault();var l=Jt(o.getState()),u=l.item,s=l.itemInputValue,f=l.itemUrl,p=l.source;if(t.metaKey||t.ctrlKey)void 0!==f&&(p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a)),n.navigator.navigateNewTab({itemUrl:f,item:u,state:o.getState()}));else if(t.shiftKey)void 0!==f&&(p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a)),n.navigator.navigateNewWindow({itemUrl:f,item:u,state:o.getState()}));else if(t.altKey);else{if(void 0!==f)return p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a)),void n.navigator.navigate({itemUrl:f,item:u,state:o.getState()});_n(bn({event:t,nextState:{isOpen:!1},props:n,query:s,refresh:r,store:o},a)).then((function(){p.onSelect(bn({event:t,item:u,itemInputValue:s,itemUrl:f,refresh:r,source:p,state:o.getState()},a))}))}}}(wn({event:e,props:t,refresh:n,store:r},o))},onFocus:a,onBlur:function(){i||r.dispatch("blur",null)},onClick:function(n){e.inputElement!==t.environment.document.activeElement||r.getState().isOpen||a(n)}},s)},getPanelProps:function(e){return wn({onMouseDown:function(e){e.preventDefault()},onMouseLeave:function(){r.dispatch("mouseleave",null)}},e)},getListProps:function(e){return wn({role:"listbox","aria-labelledby":"".concat(t.id,"-label"),id:"".concat(t.id,"-list")},e)},getItemProps:function(e){var a=e.item,i=e.source,c=jn(e,["item","source"]);return wn({id:"".concat(t.id,"-item-").concat(a.__autocomplete_id),role:"option","aria-selected":r.getState().activeItemId===a.__autocomplete_id,onMouseMove:function(e){if(a.__autocomplete_id!==r.getState().activeItemId){r.dispatch("mousemove",a.__autocomplete_id);var t=Jt(r.getState());if(null!==r.getState().activeItemId&&t){var i=t.item,c=t.itemInputValue,l=t.itemUrl,u=t.source;u.onActive(wn({event:e,item:i,itemInputValue:c,itemUrl:l,refresh:n,source:u,state:r.getState()},o))}}},onMouseDown:function(e){e.preventDefault()},onClick:function(e){var c=i.getItemInputValue({item:a,state:r.getState()}),l=i.getItemUrl({item:a,state:r.getState()});(l?Promise.resolve():_n(wn({event:e,nextState:{isOpen:!1},props:t,query:c,refresh:n,store:r},o))).then((function(){i.onSelect(wn({event:e,item:a,itemInputValue:c,itemUrl:l,refresh:n,source:i,state:r.getState()},o))}))}},c)}}}function kn(e){var t,n=e.state;return!1===n.isOpen||null===n.activeItemId?null:(null===(t=Jt(n))||void 0===t?void 0:t.itemInputValue)||null}function In(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function Cn(e){for(var t=1;t0}},t),{},{id:null!==(r=t.id)&&void 0!==r?r:"autocomplete-".concat(Mt++),plugins:a,initialState:on({activeItemId:null,query:"",completion:null,collections:[],isOpen:!1,status:"idle",context:{}},t.initialState),onStateChange:function(e){var n;null===(n=t.onStateChange)||void 0===n||n.call(t,e),a.forEach((function(t){var n;return null===(n=t.onStateChange)||void 0===n?void 0:n.call(t,e)}))},onSubmit:function(e){var n;null===(n=t.onSubmit)||void 0===n||n.call(t,e),a.forEach((function(t){var n;return null===(n=t.onSubmit)||void 0===n?void 0:n.call(t,e)}))},onReset:function(e){var n;null===(n=t.onReset)||void 0===n||n.call(t,e),a.forEach((function(t){var n;return null===(n=t.onReset)||void 0===n?void 0:n.call(t,e)}))},getSources:function(e){return Promise.all([].concat(function(e){return function(e){if(Array.isArray(e))return nn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return nn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?nn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(a.map((function(e){return e.getSources}))),[t.getSources]).filter(Boolean).map((function(t){return function(e,t){var n=[];return Promise.resolve(e(t)).then((function(e){return Array.isArray(e),"The `getSources` function must return an array of sources but returned type ".concat(JSON.stringify(Wt(e)),":\n\n").concat(JSON.stringify(e,null,2)),Promise.all(e.filter((function(e){return Boolean(e)})).map((function(e){if(e.sourceId,n.includes(e.sourceId))throw new Error("[Autocomplete] The `sourceId` ".concat(JSON.stringify(e.sourceId)," is not unique."));n.push(e.sourceId);var t=function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n0&&xt.createElement("div",{className:"DocSearch-NoResults-Prefill-List"},xt.createElement("p",{className:"DocSearch-Help"},"Try searching for:"),xt.createElement("ul",null,t.slice(0,3).reduce((function(t,n){return[].concat(function(e){return function(e){if(Array.isArray(e))return Zn(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return Zn(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Zn(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}(t),[xt.createElement("li",{key:n},xt.createElement("button",{className:"DocSearch-Prefill",key:n,onClick:function(){e.setQuery(n.toLowerCase()+" "),e.refresh(),e.inputRef.current.focus()}},n))])}),[]))),xt.createElement("p",{className:"DocSearch-Help"},"Believe this query should return results?"," ",xt.createElement("a",{href:"https://github.com/algolia/docsearch-configs/issues/new?template=Missing_results.md&title=[".concat(e.indexName,']+Missing+results+for+query+"').concat(e.state.query,'"'),target:"_blank",rel:"noopener noreferrer"},"Let us know"),"."))}function er(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function tr(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(e,["hit","attribute","tagName"])),{},{dangerouslySetInnerHTML:{__html:rr(t,"_snippetResult.".concat(n,".value"))||rr(t,n)}}))}function ar(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var n=[],r=!0,o=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(r=(i=c.next()).done)&&(n.push(i.value),!t||n.length!==t);r=!0);}catch(l){o=!0,a=l}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}return n}}(e,t)||function(e,t){if(e){if("string"==typeof e)return ir(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?ir(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function ir(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n|<\/mark>)/g,hr=RegExp(mr.source);function dr(e){var t,n,r,o,a,i=e;if(!i.__docsearch_parent&&!e._highlightResult)return e.hierarchy.lvl0;var c=((i.__docsearch_parent?null===(t=i.__docsearch_parent)||void 0===t||null===(n=t._highlightResult)||void 0===n||null===(r=n.hierarchy)||void 0===r?void 0:r.lvl0:null===(o=e._highlightResult)||void 0===o||null===(a=o.hierarchy)||void 0===a?void 0:a.lvl0)||{}).value;return c&&hr.test(c)?c.replace(mr,""):c}function vr(){return(vr=Object.assign||function(e){for(var t=1;t0}));return e.state.query?!1===t?xt.createElement(Xn,e):xt.createElement(yr,e):xt.createElement(gr,br({},e,{hasCollections:t}))}),(function(e,t){return"loading"===t.state.status||"stalled"===t.state.status}));function Sr(){return(Sr=Object.assign||function(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(t,["_highlightResult","_snippetResult"])),i=a.findIndex((function(e){return e.objectID===n.objectID}));i>-1&&a.splice(i,1),a.unshift(n),a=a.slice(0,r),o.setItem(a)},remove:function(e){a=a.filter((function(t){return t.objectID!==e.objectID})),o.setItem(a)},getAll:function(){return a}}}function jr(e){var t,n="algoliasearch-client-js-".concat(e.key),r=function(){return void 0===t&&(t=e.localStorage||window.localStorage),t},o=function(){return JSON.parse(r().getItem(n)||"{}")};return{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return Promise.resolve().then((function(){var n=JSON.stringify(e),r=o()[n];return Promise.all([r||t(),void 0!==r])})).then((function(e){var t=ee(e,2),r=t[0],o=t[1];return Promise.all([r,o||n.miss(r)])})).then((function(e){return ee(e,1)[0]}))},set:function(e,t){return Promise.resolve().then((function(){var a=o();return a[JSON.stringify(e)]=t,r().setItem(n,JSON.stringify(a)),t}))},delete:function(e){return Promise.resolve().then((function(){var t=o();delete t[JSON.stringify(e)],r().setItem(n,JSON.stringify(t))}))},clear:function(){return Promise.resolve().then((function(){r().removeItem(n)}))}}}function Pr(e){var t=te(e.caches),n=t.shift();return void 0===n?{get:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},r=t();return r.then((function(e){return Promise.all([e,n.miss(e)])})).then((function(e){return ee(e,1)[0]}))},set:function(e,t){return Promise.resolve(t)},delete:function(e){return Promise.resolve()},clear:function(){return Promise.resolve()}}:{get:function(e,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}};return n.get(e,r,o).catch((function(){return Pr({caches:t}).get(e,r,o)}))},set:function(e,r){return n.set(e,r).catch((function(){return Pr({caches:t}).set(e,r)}))},delete:function(e){return n.delete(e).catch((function(){return Pr({caches:t}).delete(e)}))},clear:function(){return n.clear().catch((function(){return Pr({caches:t}).clear()}))}}}function kr(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{serializable:!0},t={};return{get:function(n,r){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{miss:function(){return Promise.resolve()}},a=JSON.stringify(n);if(a in t)return Promise.resolve(e.serializable?JSON.parse(t[a]):t[a]);var i=r(),c=o&&o.miss||function(){return Promise.resolve()};return i.then((function(e){return c(e)})).then((function(){return i}))},set:function(n,r){return t[JSON.stringify(n)]=e.serializable?JSON.stringify(r):r,Promise.resolve(r)},delete:function(e){return delete t[JSON.stringify(e)],Promise.resolve()},clear:function(){return t={},Promise.resolve()}}}function Ir(e){for(var t=e.length-1;t>0;t--){var n=Math.floor(Math.random()*(t+1)),r=e[t];e[t]=e[n],e[n]=r}return e}function Cr(e,t){return t?(Object.keys(t).forEach((function(n){e[n]=t[n](e)})),e):e}function Dr(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r0?r:void 0,timeout:n.timeout||t,headers:n.headers||{},queryParameters:n.queryParameters||{},cacheable:n.cacheable}}var Tr={Read:1,Write:2,Any:3};function Lr(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;return X(X({},e),{},{status:t,lastUpdate:Date.now()})}function Hr(e){return"string"==typeof e?{protocol:"https",url:e,accept:Tr.Any}:{protocol:e.protocol||"https",url:e.url,accept:e.accept||Tr.Any}}var Rr="POST";function Mr(e,t,n,r){var o,a,i,c=[],l=function(e,t){if("GET"!==e.method&&(void 0!==e.data||void 0!==t.data)){var n=Array.isArray(e.data)?e.data:X(X({},e.data),t.data);return JSON.stringify(n)}}(n,r),u=(o=r,a=X(X({},e.headers),o.headers),i={},Object.keys(a).forEach((function(e){var t=a[e];i[e.toLowerCase()]=t})),i),s=n.method,f="GET"!==n.method?{}:X(X({},n.data),r.data),p=X(X(X({"x-algolia-agent":e.userAgent.value},e.queryParameters),f),r.queryParameters),m=0,h=function t(o,a){var i=o.pop();if(void 0===i)throw{name:"RetryError",message:"Unreachable hosts - your application id may be incorrect. If the error persists, contact support@algolia.com.",transporterStackTrace:Fr(c)};var f={data:l,headers:u,method:s,url:Vr(i,n.path,p),connectTimeout:a(m,e.timeouts.connect),responseTimeout:a(m,r.timeout)},h=function(e){var t={request:f,response:e,host:i,triesLeft:o.length};return c.push(t),t},d={onSucess:function(e){return function(e){try{return JSON.parse(e.content)}catch(t){throw{name:"DeserializationError",message:t.message,response:e}}}(e)},onRetry:function(n){var r=h(n);return n.isTimedOut&&m++,Promise.all([e.logger.info("Retryable failure",$r(r)),e.hostsCache.set(i,Lr(i,n.isTimedOut?3:2))]).then((function(){return t(o,a)}))},onFail:function(e){throw h(e),function(e,t){var n=e.content,r=e.status,o=n;try{o=JSON.parse(n).message}catch(a){}return{name:"ApiError",message:o,status:r,transporterStackTrace:t}}(e,Fr(c))}};return e.requester.send(f).then((function(e){return n=d,o=(r=t=e).status,r.isTimedOut||function(e){var t=e.isTimedOut,n=e.status;return!t&&0==~~n}(r)||2!=~~(o/100)&&4!=~~(o/100)?n.onRetry(t):2==~~(t.status/100)?n.onSucess(t):n.onFail(t);var t,n,r,o}))};return function(e,t){return Promise.all(t.map((function(t){return e.get(t,(function(){return Promise.resolve(Lr(t))}))}))).then((function(e){var n=e.filter((function(e){return 1===(t=e).status||Date.now()-t.lastUpdate>12e4;var t})),r=e.filter((function(e){return 3===(t=e).status&&Date.now()-t.lastUpdate<=12e4;var t})),o=[].concat(te(n),te(r));return{getTimeout:function(e,t){return(0===r.length&&0===e?1:r.length+3+e)*t},statelessHosts:o.length>0?o.map((function(e){return Hr(e)})):t}}))}(e.hostsCache,t).then((function(e){return h(te(e.statelessHosts).reverse(),e.getTimeout)}))}function qr(e){var t={value:"Algolia for JavaScript (".concat(e,")"),add:function(e){var n="; ".concat(e.segment).concat(void 0!==e.version?" (".concat(e.version,")"):"");return-1===t.value.indexOf(n)&&(t.value="".concat(t.value).concat(n)),t}};return t}function Vr(e,t,n){var r=Ur(n),o="".concat(e.protocol,"://").concat(e.url,"/").concat("/"===t.charAt(0)?t.substr(1):t);return r.length&&(o+="?".concat(r)),o}function Ur(e){return Object.keys(e).map((function(t){return Dr("%s=%s",t,(n=e[t],"[object Object]"===Object.prototype.toString.call(n)||"[object Array]"===Object.prototype.toString.call(n)?JSON.stringify(e[t]):e[t]));var n})).join("&")}function Fr(e){return e.map((function(e){return $r(e)}))}function $r(e){var t=e.request.headers["x-algolia-api-key"]?{"x-algolia-api-key":"*****"}:{};return X(X({},e),{},{request:X(X({},e.request),{},{headers:X(X({},e.request.headers),t)})})}var Br=function(e){return function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r={transporter:e.transporter,appId:e.appId,indexName:t};return Cr(r,n.methods)}},zr=function(e){return function(t,n){var r=t.map((function(e){return X(X({},e),{},{params:Ur(e.params||{})})}));return e.transporter.read({method:Rr,path:"1/indexes/*/queries",data:{requests:r},cacheable:!0},n)}},Kr=function(e){return function(t,n){return Promise.all(t.map((function(t){var r=t.params,o=r.facetName,a=r.facetQuery,i=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(r,["facetName","facetQuery"]);return Br(e)(t.indexName,{methods:{searchForFacetValues:Qr}}).searchForFacetValues(o,a,X(X({},n),i))})))}},Wr=function(e){return function(t,n,r){return e.transporter.read({method:Rr,path:Dr("1/answers/%s/prediction",e.indexName),data:{query:t,queryLanguages:n},cacheable:!0},r)}},Jr=function(e){return function(t,n){return e.transporter.read({method:Rr,path:Dr("1/indexes/%s/query",e.indexName),data:{query:t},cacheable:!0},n)}},Qr=function(e){return function(t,n,r){return e.transporter.read({method:Rr,path:Dr("1/indexes/%s/facets/%s/query",e.indexName,t),data:{facetQuery:n},cacheable:!0},r)}};function Yr(e,t,n){return function(e){var t,n,r,o,a=e.appId,i=(t=void 0!==e.authMode?e.authMode:Ar,n=a,r=e.apiKey,o={"x-algolia-api-key":r,"x-algolia-application-id":n},{headers:function(){return t===Ar?o:{}},queryParameters:function(){return t===Nr?o:{}}}),c=function(e){var t=e.hostsCache,n=e.logger,r=e.requester,o=e.requestsCache,a=e.responsesCache,i=e.timeouts,c=e.userAgent,l=e.hosts,u=e.queryParameters,s={hostsCache:t,logger:n,requester:r,requestsCache:o,responsesCache:a,timeouts:i,userAgent:c,headers:e.headers,queryParameters:u,hosts:l.map((function(e){return Hr(e)})),read:function(e,t){var n=xr(t,s.timeouts.read),r=function(){return Mr(s,s.hosts.filter((function(e){return 0!=(e.accept&Tr.Read)})),e,n)};if(!0!==(void 0!==n.cacheable?n.cacheable:e.cacheable))return r();var o={request:e,mappedRequestOptions:n,transporter:{queryParameters:s.queryParameters,headers:s.headers}};return s.responsesCache.get(o,(function(){return s.requestsCache.get(o,(function(){return s.requestsCache.set(o,r()).then((function(e){return Promise.all([s.requestsCache.delete(o),e])}),(function(e){return Promise.all([s.requestsCache.delete(o),Promise.reject(e)])})).then((function(e){var t=ee(e,2);return t[0],t[1]}))}))}),{miss:function(e){return s.responsesCache.set(o,e)}})},write:function(e,t){return Mr(s,s.hosts.filter((function(e){return 0!=(e.accept&Tr.Write)})),e,xr(t,s.timeouts.write))}};return s}(X(X({hosts:[{url:"".concat(a,"-dsn.algolia.net"),accept:Tr.Read},{url:"".concat(a,".algolia.net"),accept:Tr.Write}].concat(Ir([{url:"".concat(a,"-1.algolianet.com")},{url:"".concat(a,"-2.algolianet.com")},{url:"".concat(a,"-3.algolianet.com")}]))},e),{},{headers:X(X(X({},i.headers()),{"content-type":"application/x-www-form-urlencoded"}),e.headers),queryParameters:X(X({},i.queryParameters()),e.queryParameters)}));return Cr({transporter:c,appId:a,addAlgoliaAgent:function(e,t){c.userAgent.add({segment:e,version:t})},clearCache:function(){return Promise.all([c.requestsCache.clear(),c.responsesCache.clear()]).then((function(){}))}},e.methods)}(X(X(X({},{appId:e,apiKey:t,timeouts:{connect:1,read:2,write:30},requester:{send:function(e){return new Promise((function(t){var n=new XMLHttpRequest;n.open(e.method,e.url,!0),Object.keys(e.headers).forEach((function(t){return n.setRequestHeader(t,e.headers[t])}));var r,o=function(e,r){return setTimeout((function(){n.abort(),t({status:0,content:r,isTimedOut:!0})}),1e3*e)},a=o(e.connectTimeout,"Connection timeout");n.onreadystatechange=function(){n.readyState>n.OPENED&&void 0===r&&(clearTimeout(a),r=o(e.responseTimeout,"Socket timeout"))},n.onerror=function(){0===n.status&&(clearTimeout(a),clearTimeout(r),t({content:n.responseText||"Network request failed",status:n.status,isTimedOut:!1}))},n.onload=function(){clearTimeout(a),clearTimeout(r),t({content:n.responseText,status:n.status,isTimedOut:!1})},n.send(e.data)}))}},logger:(3,{debug:function(e,t){return Promise.resolve()},info:function(e,t){return Promise.resolve()},error:function(e,t){return console.error(e,t),Promise.resolve()}}),responsesCache:kr(),requestsCache:kr({serializable:!1}),hostsCache:Pr({caches:[jr({key:"".concat("4.8.5","-").concat(e)}),kr()]}),userAgent:qr("4.8.5").add({segment:"Browser",version:"lite"}),authMode:Nr}),n),{},{methods:{search:zr,searchForFacetValues:Kr,multipleQueries:zr,multipleSearchForFacetValues:Kr,initIndex:function(e){return function(t){return Br(e)(t,{methods:{search:Jr,searchForFacetValues:Qr,findAnswers:Wr}})}}}}))}function Gr(){return(Gr=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n",highlightPostTag:"",hitsPerPage:20},s)}]).catch((function(e){throw"RetryError"===e.name&&o("error"),e})).then((function(e){var t=e.results[0],o=t.hits,a=t.nbHits,i=sr(o,(function(e){return dr(e)}));return n.context.searchSuggestions.length0&&(K(),L.current&&L.current.focus())}),[M,K]),xt.useEffect((function(){function e(){if(A.current){var e=.01*window.innerHeight;A.current.style.setProperty("--docsearch-vh","".concat(e,"px"))}}return e(),window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[]),xt.createElement("div",Gr({ref:N},z({"aria-expanded":!0}),{className:["DocSearch","DocSearch-Container","stalled"===C.status&&"DocSearch-Container--Stalled","error"===C.status&&"DocSearch-Container--Errored"].filter(Boolean).join(" "),onMouseDown:function(e){e.target===e.currentTarget&&p()}}),xt.createElement("div",{className:"DocSearch-Modal",ref:A},xt.createElement("header",{className:"DocSearch-SearchBar",ref:x},xt.createElement(wr,Gr({},$,{state:C,autoFocus:0===M.length,onClose:p,inputRef:L,isFromSelection:Boolean(M)&&M===R}))),xt.createElement("div",{className:"DocSearch-Dropdown",ref:T},xt.createElement(Or,Gr({},$,{indexName:c,state:C,hitComponent:v,resultsFooterComponent:_,disableUserPersonalization:j,recentSearches:U,favoriteSearches:V,onItemClick:function(e){F(e),p()},inputRef:L}))),xt.createElement("footer",{className:"DocSearch-Footer"},xt.createElement(Rn,null))))}function ro(){return(ro=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,r=new Array(t);n{for(var n in t||(t={}))a.call(t,n)&&c(e,n,t[n]);if(o)for(var n of o(t))i.call(t,n)&&c(e,n,t[n]);return e})({},this.searchConfig),e=n(t,r({container:"#docsearch"})),St(xt.createElement(io,G({},e,{transformSearchClient:function(t){return t.addAlgoliaAgent("docsearch.js","3.0.0-alpha.40"),e.transformSearchClient?e.transformSearchClient(t):t}})),function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:window;return"string"==typeof e?t.document.querySelector(e):e}(e.container,e.environment)))}}},[["render",function(e,t,n,r,o,a){return w(),S("div",co)}]])},props:{lang:String,config:Object,versions:Array,langConfigs:Array},data:()=>({packageVersion:u,showVersionPop:!1}),computed:{langLink(){return`#${this.$route.path.replace(this.lang,this.anotherLang.lang)}`},langLabel(){return this.anotherLang.label},anotherLang(){const e=this.langConfigs.filter((e=>e.lang!==this.lang));return e.length?e[0]:{}},searchConfig(){return this.config.searchConfig}},methods:{toggleVersionPop(){const e=!this.showVersionPop,t=e?"add":"remove";document.body[`${t}EventListener`]("click",this.checkHideVersionPop),this.showVersionPop=e},checkHideVersionPop(e){this.$refs.version.contains(e.target)||(this.showVersionPop=!1)},onSwitchLang(e){this.$router.push(this.$route.path.replace(e.from,e.to))},onSwitchVersion(e){e.link&&(location.href=e.link)}}},[["render",function(e,t,n,r,o,a){const i=g("search-input");return w(),S("div",lo,[P("div",uo,[P("div",so,[P("a",fo,[P("img",{src:n.config.logo},null,8,po),P("span",null,k(n.config.title),1)]),P("ul",mo,[(w(!0),S(E,null,j(n.config.links,((e,t)=>(w(),S("li",{key:t,class:"van-doc-header__top-nav-item"},[P("a",{class:"van-doc-header__link",target:"_blank",href:e.url},[e.logo?(w(),S("img",{key:0,src:e.logo},null,8,vo)):e.text?(w(),S("span",yo,k(e.text),1)):C("v-if",!0)],8,ho)])))),128)),n.versions?(w(),S("li",_o,[P("span",{class:"van-doc-header__cube van-doc-header__version",onClick:t[0]||(t[0]=(...e)=>a.toggleVersionPop&&a.toggleVersionPop(...e))},[N(k(o.packageVersion)+" ",1),I(x,{name:"van-doc-dropdown"},{default:A((()=>[o.showVersionPop?(w(),S("div",go,[(w(!0),S(E,null,j(n.versions,((e,t)=>(w(),S("div",{key:t,class:"van-doc-header__version-pop-item",onClick:t=>a.onSwitchVersion(e)},k(e.label),9,bo)))),128))])):C("v-if",!0)])),_:1})])],512)):C("v-if",!0),a.langLabel&&a.langLink?(w(),S("li",Oo,[P("a",{class:"van-doc-header__cube",href:a.langLink},k(a.langLabel),9,So)])):C("v-if",!0),a.searchConfig?(w(),b(i,{key:2,lang:n.lang,"search-config":a.searchConfig},null,8,["lang","search-config"])):C("v-if",!0)])])])])}]]),DocContent:l({name:"VanDocContent",computed:{currentPage(){const{path:e}=this.$route;return e?e.split("/").slice(-1)[0]:this.$route.name}},mounted(){[].slice.call(this.$el.querySelectorAll("h2, h3, h4, h5")).forEach((e=>{e.addEventListener("click",this.scrollToAnchor)}))},methods:{scrollToAnchor(e){e.target.id&&this.$router.push({name:this.$route.name,hash:"#"+e.target.id})}}},[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O(["van-doc-content",`van-doc-content--${a.currentPage}`])},[T(e.$slots,"default")],2)}]]),DocContainer:l(wo,[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O(["van-doc-container van-doc-row",{"van-doc-container--with-simulator":n.hasSimulator}])},[T(e.$slots,"default")],2)}]]),DocSimulator:l({name:"VanDocSimulator",props:{src:String},data:()=>({scrollTop:window.scrollY,windowHeight:window.innerHeight}),computed:{isFixed(){return this.scrollTop>60},simulatorStyle(){return{height:Math.min(640,this.windowHeight-90)+"px"}}},mounted(){window.addEventListener("scroll",(()=>{this.scrollTop=window.scrollY})),window.addEventListener("resize",(()=>{this.windowHeight=window.innerHeight}))}},[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O(["van-doc-simulator",{"van-doc-simulator-fixed":a.isFixed}])},[P("iframe",{ref:"iframe",src:n.src,style:D(a.simulatorStyle),frameborder:"0"},null,12,Eo)],2)}]])},props:{lang:String,versions:Array,simulator:String,hasSimulator:Boolean,langConfigs:Array,config:{type:Object,required:!0},base:{type:String,default:""}},emits:["switch-version"],watch:{$route(){this.setNav()}},created(){this.setNav(),this.keyboardHandler()},methods:{setNav(){const{nav:e}=this.config,t=e.reduce(((e,t)=>e.concat(t.items)),[]),n=this.$route.path.split("/").pop();let r;for(let o=0,a=t.length;o{switch(e.keyCode){case 37:this.keyboardNav("prev");break;case 39:this.keyboardNav("next")}}))}}},Po={class:"van-doc"};const ko={class:"app"};var Io=l({components:{VanDoc:l(jo,[["render",function(e,t,n,r,o,a){const i=g("doc-header"),c=g("doc-nav"),l=g("doc-content"),u=g("doc-container"),s=g("doc-simulator");return w(),S("div",Po,[I(i,{lang:n.lang,config:n.config,versions:n.versions,"lang-configs":n.langConfigs,onSwitchVersion:t[0]||(t[0]=t=>e.$emit("switch-version",t))},null,8,["lang","config","versions","lang-configs"]),I(c,{lang:n.lang,"nav-config":n.config.nav},null,8,["lang","nav-config"]),I(u,{"has-simulator":n.hasSimulator},{default:A((()=>[I(l,null,{default:A((()=>[T(e.$slots,"default")])),_:3})])),_:3},8,["has-simulator"]),n.hasSimulator?(w(),b(s,{key:0,src:n.simulator},null,8,["src"])):C("v-if",!0)])}]])},data:()=>({hasSimulator:!0}),computed:{simulator(){var e,t;if(null==(e=s.site.simulator)?void 0:e.url)return null==(t=s.site.simulator)?void 0:t.url;return`${location.pathname.replace(/\/index(\.html)?/,"/")}mobile.html${location.hash}`},lang(){const{lang:e}=this.$route.meta;return e||""},langConfigs(){const{locales:e={}}=s.site;return Object.keys(e).map((t=>({lang:t,label:e[t].langLabel||""})))},config(){const{locales:e}=s.site;return e?e[this.lang]:s.site},versions:()=>s.site.versions||null},watch:{"$route.path"(){this.setTitleAndToogleSimulator()},lang(e){f(e),this.setTitleAndToogleSimulator()},config:{handler(e){e&&this.setTitleAndToogleSimulator()},immediate:!0}},mounted(){this.$route.hash&&this.$nextTick((()=>{const e=document.querySelector(this.$route.hash);e&&e.scrollIntoView()}))},methods:{setTitleAndToogleSimulator(){let{title:e}=this.config;const t=this.config.nav.reduce(((e,t)=>[...e,...t.items]),[]).find((e=>e.path===this.$route.meta.name));t&&t.title?e=t.title+" - "+e:this.config.description&&(e+=` - ${this.config.description}`),document.title=e,this.hasSimulator=!(s.site.hideSimulator||this.config.hideSimulator||t&&t.hideSimulator)}}},[["render",function(e,t,n,r,o,a){const i=g("router-view"),c=g("van-doc");return w(),S("div",ko,[a.config?(w(),b(c,{key:0,lang:a.lang,config:a.config,versions:a.versions,simulator:a.simulator,"has-simulator":o.hasSimulator,"lang-configs":a.langConfigs},{default:A((()=>[I(i)])),_:1},8,["lang","config","versions","simulator","has-simulator","lang-configs"])):C("v-if",!0)])}]]);const Co={name:"DemoPlayground",props:{originCode:String,codeSnippet:String,transform:Boolean,compact:Boolean,inline:Boolean},data:()=>({showSource:!1,copyStatus:"ready"}),methods:{unescape:unescape,toogleSource(){this.showSource=!this.showSource},copySourceCode(){!function(e){const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.position="absolute",t.style.left="-9999px",document.body.appendChild(t);const n=document.getSelection();if(!n)return;const r=n.rangeCount>0&&n.getRangeAt(0);t.select(),document.execCommand("copy"),document.body.removeChild(t),r&&(n.removeAllRanges(),n.addRange(r))}(unescape(this.originCode)),this.copyStatus="copied",setTimeout((()=>{this.copyStatus="ready"}),2e3)}}},Do={class:"demo-playground--code"},No={class:"demo-playground--code--actions"},Ao=(e=>(R("data-v-9efa7fdc"),e=e(),M(),e))((()=>P("span",null,null,-1))),xo=["data-status"],To=["innerHTML"];var Lo=l(Co,[["render",function(e,t,n,r,o,a){return w(),S("div",{class:O({"demo-playground":!n.inline,transform:n.transform})},[n.inline?T(e.$slots,"default",{key:0},void 0,!0):(w(),S(E,{key:1},[P("div",{class:O(["demo-playground--previewer",{compact:n.compact}])},[T(e.$slots,"default",{},void 0,!0)],2),P("div",Do,[P("div",No,[Ao,P("button",{title:"Copy source code",class:"action-icon",role:"copy","data-status":o.copyStatus,onClick:t[0]||(t[0]=(...e)=>a.copySourceCode&&a.copySourceCode(...e))},null,8,xo),P("button",{title:"Toggle source code panel",class:"action-icon",role:"source",onClick:t[1]||(t[1]=(...e)=>a.toogleSource&&a.toogleSource(...e))})]),L(P("div",{innerHTML:a.unescape(n.codeSnippet),class:"demo-playground--code--content"},null,8,To),[[H,o.showSource]])])],64))],2)}],["__scopeId","data-v-9efa7fdc"]]);p&&location.replace("mobile.html"+location.hash);const{locales:Ho,defaultLang:Ro}=s.site;function Mo(e){const t=e.path.split("/")[1];return-1!==Object.keys(Ho).indexOf(t)?t:_()}m(Ro);const qo=q({history:V(),routes:function(){const e=[],t=Object.keys(d);return Ho?e.push({name:"notFound",path:"/:path(.*)+",redirect:e=>({name:Mo(e)})}):e.push({name:"notFound",path:"/:path(.*)+",redirect:{name:"home"}}),t.forEach((t=>{const{component:n,lang:r}=function(e){if(-1!==e.indexOf("_")){const t=e.split("_"),n=t.shift();return{component:`${y(n)}`,lang:t.join("-")}}return{component:`${y(e)}`,lang:""}}(t);"home"===n&&function(t,n){e.push({name:n||"home",path:`/${n||""}`,component:t,meta:{lang:n}})}(d[t],r),r?e.push({name:`${r}/${n}`,path:`/${r}/${n}`,component:d[t],meta:{lang:r,name:n}}):e.push({name:`${n}`,path:`/${n}`,component:d[t],meta:{name:n}})})),e}(),scrollBehavior:e=>e.hash?{el:e.hash}:{top:0}});qo.afterEach((()=>{U(v)})),!1!==(null==(e=s.site.simulator)?void 0:e.syncPathFromSimulator)&&h(qo),window.vueRouter=qo,window.app=F(Io).use(qo).component(Lo.name,Lo),setTimeout((()=>{window.app.mount("#app")}),0); diff --git a/assets/mobile.727a2d05.js b/assets/mobile.b23bca81.js similarity index 99% rename from assets/mobile.727a2d05.js rename to assets/mobile.b23bca81.js index 3fce7743..523d7a01 100644 --- a/assets/mobile.727a2d05.js +++ b/assets/mobile.b23bca81.js @@ -1 +1 @@ -import{_ as e,e as t,a as n,l as o,g as a,f as s}from"./iframe-router.515bc94a.js";import{a as c,t as r,f as l,i,o as u,n as m,d,r as p,F as h,b as v,c as f,w as g,h as y,e as w,l as _,m as b,x as k,q as E,j as $,v as T,y as B,K as L,s as X}from"./vue-libs.7d12dd47.js";const Y={name:"DemoBlock",props:{card:Boolean,title:String}},K={class:"van-doc-demo-block"},O={key:0,class:"van-doc-demo-block__title"},j={key:1,class:"van-doc-demo-block__card"};var x=e(Y,[["render",function(e,t,n,o,a,s){return u(),c("div",K,[n.title?(u(),c("h2",O,r(n.title),1)):l("v-if",!0),n.card?(u(),c("div",j,[i(e.$slots,"default")])):i(e.$slots,"default",{key:2})])}]]);var z=e({name:"DemoSection",computed:{demoName(){const{meta:e}=this.$route||{};return e&&e.name?`demo-${t(e.name)}`:""}}},[["render",function(e,t,n,o,a,s){return u(),c("section",{class:m(["van-doc-demo-section",s.demoName])},[i(e.$slots,"default")],2)}]]);const N={},D={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",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:[]},S={},F={viewBox:"0 0 1024 1024"},M=[d("path",{fill:"#B6C3D2",d:"M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"},null,-1),d("path",{fill:"#B6C3D2",d:"M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"},null,-1)];const C={class:"demo-home-nav"},R={class:"demo-home-nav__title"},A={class:"demo-home-nav__group"};const q={class:"demo-home"},H=["src"],I={key:0,class:"demo-home__desc"};var P=e({components:{DemoHomeNav:e({components:{ArrowRight:e(S,[["render",function(e,t){return u(),c("svg",F,M)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(e,t,n,o,a,s){const l=p("arrow-right"),i=p("router-link");return u(),c("div",C,[d("div",R,r(n.group.title),1),d("div",A,[(u(!0),c(h,null,v(n.group.items,(e=>(u(),f(i,{class:"demo-home-nav__block",key:e.path,to:`${s.base}/${e.path}`},{default:g((()=>[y(r(e.title)+" ",1),w(l,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:e}=this.$route.meta;return e},config(){const{locales:e}=D;return e?e[this.lang]:D},smallTitle(){return this.config.title.length>=8}}},[["render",function(e,t,n,o,a,s){const i=p("demo-home-nav");return u(),c("div",q,[d("h1",{class:m(["demo-home__title",{"demo-home__title--small":s.smallTitle}])},[d("img",{src:s.config.logo},null,8,H),d("span",null,r(s.config.title),1)],2),s.config.description?(u(),c("h2",I,r(s.config.description),1)):l("v-if",!0),(u(!0),c(h,null,v(s.config.nav,((e,t)=>(u(),f(i,{key:t,lang:s.lang,group:e},null,8,["lang","group"])))),128))])}]]);const{locales:U,defaultLang:V}=D;function W(e){const t=e.path.split("/")[1];return-1!==Object.keys(U).indexOf(t)?t:a()}n(V);const G=_({history:b(),routes:function(){const e=[],n=Object.keys(N),o=U?Object.keys(U):[];return o.length?(e.push({name:"NotFound",path:"/:path(.*)+",redirect:e=>({name:W(e)})}),o.forEach((t=>{e.push({name:t,path:`/${t}`,component:P,meta:{lang:t}})}))):(e.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),e.push({name:"home",path:"/",component:P})),n.forEach((n=>{const a=t(n);o.length?o.forEach((t=>{e.push({name:`${t}/${a}`,path:`/${t}/${a}`,component:N[n],meta:{name:n,lang:t}})})):e.push({name:a,path:`/${a}`,component:N[n],meta:{name:n}})})),e}(),scrollBehavior:(e,t,n)=>n||{x:0,y:0}});k(G.currentRoute,(()=>{G.currentRoute.value.redirectedFrom||E(s)})),o(G),window.vueRouter=G;const J={class:"demo-nav"},Q={class:"demo-nav__title"},Z=["d"];var ee=e({components:{DemoNav:e({data:()=>({path:"M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"}),computed:{title(){const{name:e}=this.$route.meta||{};return e?e.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},[["render",function(e,t,n,o,a,s){return $((u(),c("div",J,[d("div",Q,r(s.title),1),(u(),c("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:t[0]||(t[0]=(...e)=>s.onBack&&s.onBack(...e))},[d("path",{fill:"#969799","fill-rule":"evenodd",d:a.path},null,8,Z)]))],512)),[[T,s.title]])}]])}},[["render",function(e,t,n,o,a,s){const r=p("demo-nav"),l=p("demo-section"),i=p("router-view");return u(),c(h,null,[w(r),w(i,null,{default:g((({Component:e})=>[(u(),f(L,null,[w(l,null,{default:g((()=>[(u(),f(B(e)))])),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var e,t="ontouchstart"in window;document.createTouch||(document.createTouch=function(e,t,o,a,s,c,r){return new n(t,o,{pageX:a,pageY:s,screenX:c,screenY:r,clientX:a-window.pageXOffset,clientY:s-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var e=a(),t=0;t{window.app.mount("#app")}),0); +import{_ as e,e as t,a as n,l as o,g as a,f as s}from"./iframe-router.fef98aab.js";import{a as c,t as r,f as l,i,o as u,n as m,d,r as p,F as h,b as v,c as f,w as g,h as y,e as w,l as _,m as b,x as k,q as E,j as $,v as T,y as B,K as L,s as X}from"./vue-libs.7d12dd47.js";const Y={name:"DemoBlock",props:{card:Boolean,title:String}},K={class:"van-doc-demo-block"},O={key:0,class:"van-doc-demo-block__title"},j={key:1,class:"van-doc-demo-block__card"};var x=e(Y,[["render",function(e,t,n,o,a,s){return u(),c("div",K,[n.title?(u(),c("h2",O,r(n.title),1)):l("v-if",!0),n.card?(u(),c("div",j,[i(e.$slots,"default")])):i(e.$slots,"default",{key:2})])}]]);var z=e({name:"DemoSection",computed:{demoName(){const{meta:e}=this.$route||{};return e&&e.name?`demo-${t(e.name)}`:""}}},[["render",function(e,t,n,o,a,s){return u(),c("section",{class:m(["van-doc-demo-section",s.demoName])},[i(e.$slots,"default")],2)}]]);const N={},D={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",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:[]},S={},F={viewBox:"0 0 1024 1024"},M=[d("path",{fill:"#B6C3D2",d:"M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"},null,-1),d("path",{fill:"#B6C3D2",d:"M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"},null,-1)];const C={class:"demo-home-nav"},R={class:"demo-home-nav__title"},A={class:"demo-home-nav__group"};const q={class:"demo-home"},H=["src"],I={key:0,class:"demo-home__desc"};var P=e({components:{DemoHomeNav:e({components:{ArrowRight:e(S,[["render",function(e,t){return u(),c("svg",F,M)}]])},props:{lang:String,group:Object},data:()=>({active:[]}),computed:{base(){return this.lang?`/${this.lang}`:""}}},[["render",function(e,t,n,o,a,s){const l=p("arrow-right"),i=p("router-link");return u(),c("div",C,[d("div",R,r(n.group.title),1),d("div",A,[(u(!0),c(h,null,v(n.group.items,(e=>(u(),f(i,{class:"demo-home-nav__block",key:e.path,to:`${s.base}/${e.path}`},{default:g((()=>[y(r(e.title)+" ",1),w(l,{class:"demo-home-nav__icon"})])),_:2},1032,["to"])))),128))])])}]])},computed:{lang(){const{lang:e}=this.$route.meta;return e},config(){const{locales:e}=D;return e?e[this.lang]:D},smallTitle(){return this.config.title.length>=8}}},[["render",function(e,t,n,o,a,s){const i=p("demo-home-nav");return u(),c("div",q,[d("h1",{class:m(["demo-home__title",{"demo-home__title--small":s.smallTitle}])},[d("img",{src:s.config.logo},null,8,H),d("span",null,r(s.config.title),1)],2),s.config.description?(u(),c("h2",I,r(s.config.description),1)):l("v-if",!0),(u(!0),c(h,null,v(s.config.nav,((e,t)=>(u(),f(i,{key:t,lang:s.lang,group:e},null,8,["lang","group"])))),128))])}]]);const{locales:U,defaultLang:V}=D;function W(e){const t=e.path.split("/")[1];return-1!==Object.keys(U).indexOf(t)?t:a()}n(V);const G=_({history:b(),routes:function(){const e=[],n=Object.keys(N),o=U?Object.keys(U):[];return o.length?(e.push({name:"NotFound",path:"/:path(.*)+",redirect:e=>({name:W(e)})}),o.forEach((t=>{e.push({name:t,path:`/${t}`,component:P,meta:{lang:t}})}))):(e.push({name:"NotFound",path:"/:path(.*)+",redirect:{name:"home"}}),e.push({name:"home",path:"/",component:P})),n.forEach((n=>{const a=t(n);o.length?o.forEach((t=>{e.push({name:`${t}/${a}`,path:`/${t}/${a}`,component:N[n],meta:{name:n,lang:t}})})):e.push({name:a,path:`/${a}`,component:N[n],meta:{name:n}})})),e}(),scrollBehavior:(e,t,n)=>n||{x:0,y:0}});k(G.currentRoute,(()=>{G.currentRoute.value.redirectedFrom||E(s)})),o(G),window.vueRouter=G;const J={class:"demo-nav"},Q={class:"demo-nav__title"},Z=["d"];var ee=e({components:{DemoNav:e({data:()=>({path:"M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"}),computed:{title(){const{name:e}=this.$route.meta||{};return e?e.replace(/-/g,""):""}},methods:{onBack(){history.length>1?history.back():this.$router.replace("/")}}},[["render",function(e,t,n,o,a,s){return $((u(),c("div",J,[d("div",Q,r(s.title),1),(u(),c("svg",{class:"demo-nav__back",viewBox:"0 0 1000 1000",onClick:t[0]||(t[0]=(...e)=>s.onBack&&s.onBack(...e))},[d("path",{fill:"#969799","fill-rule":"evenodd",d:a.path},null,8,Z)]))],512)),[[T,s.title]])}]])}},[["render",function(e,t,n,o,a,s){const r=p("demo-nav"),l=p("demo-section"),i=p("router-view");return u(),c(h,null,[w(r),w(i,null,{default:g((({Component:e})=>[(u(),f(L,null,[w(l,null,{default:g((()=>[(u(),f(B(e)))])),_:2},1024)],1024))])),_:1})],64)}]]);!function(){if("undefined"!=typeof window){var e,t="ontouchstart"in window;document.createTouch||(document.createTouch=function(e,t,o,a,s,c,r){return new n(t,o,{pageX:a,pageY:s,screenX:c,screenY:r,clientX:a-window.pageXOffset,clientY:s-window.pageYOffset},0,0)}),document.createTouchList||(document.createTouchList=function(){for(var e=a(),t=0;t{window.app.mount("#app")}),0); diff --git a/index.html b/index.html index 2be901c8..b3ad0f18 100644 --- a/index.html +++ b/index.html @@ -25,8 +25,8 @@ })(); - - + + diff --git a/mobile.html b/mobile.html index 0af1f4e3..3d8c68a0 100644 --- a/mobile.html +++ b/mobile.html @@ -28,8 +28,8 @@ } - - + +