Vant3 介绍
Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。…
Vant3 快速上手
通过 npm 安装 在现有项目中使用 Vant 时,可以通过 npm 或 yarn 进行安装: # Vue 2 项目,安装 Vant 2: npm i vant -S # …
Vant3 进阶用法
组件注册 Vant 支持多种组件注册方式,请根据实际业务需要进行选择。 全局注册 全局注册后,你可以在 app 下的任意子组件中使用注册的 Vant 组件。 import { Bu…
Vant3 更新日志
提示当前文档为 Vant 3 的更新日志,如需查询 Vant 2 的更新内容,请访问 Vant 2 更新日志。 介绍 Vant 遵循 Semver 语…
Vant3 从v2升级
升级步骤 1. 升级 Vue 3 Vant 3 是基于 Vue 3 开发的,在使用 Vant 3 前,请将项目中的 Vue 升级到 3.0 以上版本。 2. 处理不兼容更新 Van…
Vant3 贡献指南
介绍 感谢你使用 Vant。 以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前,请先花几分钟时间阅读以下文字。 Issue 规范 遇…
Vant3 设计资源
介绍 Vant 是基于有赞 Zan Design System 视觉规范实现的组件库,在这里可以下载 Vant 的设计资源。 设计稿 组件设计稿(Sketch)…
Vant3 风格指南
介绍 在参与 Vant 开发时,请遵守约定的单文件组件风格指南,指南内容节选自 Vue 官方风格指南。 组件数据 组件的 data 必须是一个函数。 // bad exp…
Vant3 国际化
介绍 Vant 采用中文作为默认语言,同时支持多语言切换,请按照下方教程进行国际化设置。 使用方法 多语言切换 Vant 通过 Locale 组件实现多语言支持,使用 L…
Vant3 Button按钮
介绍 按钮用于触发一个操作,如提交表单。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import { createApp } from vue; i…
Vant3 Cell 单元格
介绍 单元格为列表中的单个展示项。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import { createApp } from vue; impo…
Vant3 ConfigProvider 全局配置
介绍 用于配置 Vant 组件的主题样式,从 3.1.0 版本开始支持。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import { createA…
Vant3 Icon 图标
介绍 基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过 icon 属性引用。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 imp…
Vant3 Image 图片
介绍 增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 impor…
Vant3 Layout 布局
介绍 Layout 提供了 van-row 和 van-col 两个组件来进行行列布局。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import {…
Vant3 Popup 弹出层
介绍 弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import { createA…
vant3 内置样式
介绍 Vant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。 实例演示 文字省略 当文本内容长度超过容器最大宽度时,自动省略多余的文本。 <!–…
Vant3 Toast 轻提示
介绍 在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import { cre…
Vant3 Calendar日历
介绍 日历组件用于选择日期或日期区间。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import { createApp } from vue; im…
Vant3 Cascader 级联选择
介绍 级联选择框,用于多层级数据的选择,典型场景为省市区选择。 实例演示 引入 通过以下方式来全局注册组件,更多注册方式请参考组件注册。 import { createApp } …