Vant 教程

特性 提供 60 多个高质量组件，覆盖移动端各类场景 性能极佳，组件平均体积不到 1kb（min+gzip） 单元测试覆盖率 90%+，提供稳定性保障 完善的中英文文档和示例 支持…

脚手架 在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目 # 安装 Vue Cli npm install -g @v…

介绍 Vant 遵循 Semver 语义化版本规范。 发布节奏 修订号：每周发布，包含新特性和问题修复。 次版本号：每隔一至二个月发布，包含新特性和较大的功能更…

介绍 Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。 示例工程 我们提供了一个基于…

介绍 感谢你使用 Vant。 以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前，请先花几分钟时间阅读以下文字。 Issue 规范 遇…

介绍 这里提供了 Vant 现有的设计资源，更多资源还在整理中。 组件 包含 Sketch 格式的组件设计规范、色彩规范。 下载 提示：目前 Sketch 中部分组件仍为旧版样式，…

介绍 在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 Vue 官方风格指南。 组件数据 组件的 data 必须是一个函数。 // bad exp…

介绍 Vant 默认采用中文作为语言，如果需要使用其他语言，可以参考下面的方案。 多语言切换 Vant 通过 Locale 组件实现多语言支持，使用 Locale.use…

引入 import Vue from vue; import { Button } from vant; Vue.use(Button); 代码演示 按钮类型 支持default、…

引入 import Vue from vue; import { Cell, CellGroup } from vant; Vue.use(Cell); Vue.use(CellG…

介绍 基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过icon属性引用 引入 import Vue from vue; import { Icon }…

介绍 增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示 引入 import Vue from vue; import { Image } fr…

介绍 Layout 提供了van-row和van-col两个组件来进行行列布局 引入 import Vue from vue; import { Col, Row } from v…

介绍 弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示 引入 import Vue from vue; import { Popup } from vant; Vu…

介绍 Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。 文字省略 当文本内容长度超过容器最大宽度时，自动省略多余的文本。 <!– 最多显示…

介绍 日历组件用于选择日期或日期区间，2.4 版本开始支持此组件 引入 import Vue from vue; import { Calendar } from vant; Vu…

引入 import Vue from vue; import { Checkbox, CheckboxGroup } from vant; Vue.use(Checkbox); V…

介绍 时间选择器，支持日期、年月、时分等维度，通常与 弹出层 组件配合使用 引入 import Vue from vue; import { DatetimeP…

介绍 表单中的输入框组件 引入 import Vue from vue; import { Field } from vant; Vue.use(Field); 代码演示 基础用法…

介绍 数字键盘，提供两种样式风格，可以与密码输入框或自定义的输入框组件配合使用 引入 import Vue from vue; import { NumberKeyboard } …