Lightweight Mobile UI Components built on Vue

Overview

logo

Vant

Mobile UI Components built on Vue

npm version npm version Coverage Status downloads Jsdelivr Hits Gzip Size

🔥 文档网站(国内)   🌈 文档网站(GitHub)   🇨🇳 中文版介绍


Features

  • 65+ Reusable components
  • 1kb Component average size (min+gzip)
  • 90%+ Unit test coverage
  • Extensive documentation and demos
  • Support Vue 2 & Vue 3
  • Support Tree Shaking
  • Support Custom Theme
  • Support i18n
  • Support TS
  • Support SSR

Install

# Install Vant 2 for Vue 2 project
npm i vant -S

# Install Vant 3 for Vue 3 project
npm i [email protected] -S

Quickstart

import { createApp } from 'vue';
import { Button } from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Button);

See more in Quickstart.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

Browser Support

Modern browsers and Android 4.0+, iOS 8.0+.

Ecosystem

Project Description
vant-weapp WeChat MiniProgram UI
vant-aliapp Alipay MiniProgram UI (maintained by the community)
vant-react Vant React (maintained by the community)
vant-use Collection of Vant Composition APIs
vant-demo Collection of Vant demos
vant-cli Scaffold for UI library
vant-icons Vant icons
vant-touch-emulator Using vant in desktop browsers

Links

Preview

You can scan the following QR code to access the demo:

LICENSE

MIT

Issues
  • Vant 2020 年上半年开发计划 ✨

    Vant 2020 年上半年开发计划 ✨

    发布 Vant 3.0 🔥

    在 2020 年上半年,我们的主要目标是发布 Vant 3.0 版本,主要包含以下更新:

    • 基于 Vue 3.0 开发,使用 Composition API 重构所有组件,增强组件间的逻辑复用并减少包体积。
    • 使用 TypeScript 重构所有代码,提供更完善的类型支持。
    • 增加更多实用的基础组件,如 Form、Popover。
    • 完善组件交互,如 Tab 增加滑动切换动画,ImagePreview 支持原生级的手势操作。
    • 提供更好的文档、更丰富的示例,文档无止境。

    由于 Vue 3.0 已经发布了第一个 alpha 版本,Vant 3.0 也将于近期正式启航。我们会在 next 分支进行 3.0 版本的开发工作,同时在 dev 分支持续维护 2.x 版本。

    持续优化 Vant Cli 🌟

    在 2019 年年底,我们悄悄发布了 Vant Cli,一个开箱即用的 Vue 组件库搭建工具(可以将它理解为面向组件库的 Vue Cli),其中包含了我们在开发 Vant 过程中所积累的工程化最佳实践。你可以使用 Vant Cli 搭建一套基于 Vant 的业务组件库,或是从零开始搭建一套 Vue 基础组件库。

    Vant 从 2.3 版本开始接入了 Vant Cli 进行构建,同时 Vant Cli 也已在有赞内部的多套业务组件库中落地。

    后续我们会持续优化 Vant Cli,主要目标是提供更丰富的配置项以及完善文档。希望它能够帮助大家更轻松地搭建一套完备的组件库。

    Vant Weapp 迭代 & 探索 🏃

    上个月我们刚刚发布了 Vant Weapp 1.0 版本,对齐了 Vant 2.0 的大部分功能,并基于 CSS Variables 提供了自定义主题的能力。

    后续我们对 Vant Weapp 的规划是在 1.0 版本的基础上持续迭代,提高性能和稳定性,并跟进微信小程序框架的升级,探索小程序组件更多的可能性。

    👀 discuss 
    opened by chenjiahan 98
  • Vant 3.0 RC 版本发布 🔥🔥🔥

    Vant 3.0 RC 版本发布 🔥🔥🔥

    目前 Vant 已完成了对 Vue 3.0 的绝大部分适配工作,并发布了 Vant 3.0 RC 版本,欢迎大家在新项目中尝试 Vant 3.0。

    背景知识

    在使用 Vant 3.0 前,请先了解一下 Vue 3.0 的变更内容:Vue 3.0 官方文档

    安装 Vant 3.0

    #npm
    npm i [email protected] -S
    
    # yarn
    yarn add [email protected]
    

    安装完成后,请参考 Vant 3.0 的文档使用:

    后续计划

    我们计划在十二月发布 Vant 3.0 正式版,目前正在进行的工作有:

    • 对外提供 Vant 内部使用的 Composition API 模块,封装为 @vant/use 库(已完成)
    • 使用 Composition API 重构所有组件(已完成)
    • 使用 TypeScript 重构所有组件
    • 完善单元测试并修复发现的问题
    • 增加新组件和更多 Feature

    注意事项

    1. Sku 组件还未完成 Vue 3 适配,因此在 Vant 3.0 RC 版本中暂时不可用
    2. beta 版本迭代过程中可能会引入少量的不兼容改动,在升级时请仔细阅读更新日志

    视觉规范升级

    近期我们还发布了 Vant 视觉规范 3.0,详见:Vant 设计规范 3.0 发布

    问题反馈

    使用 Vant 3.0 过程中遇到问题时,请通过 issue 的形式进行反馈~

    👀 discuss 
    opened by chenjiahan 63
  • 【公告】 部分机型出现组件无法操作问题的解决方案

    【公告】 部分机型出现组件无法操作问题的解决方案

    背景

    近期有比较多的童鞋反馈在 iOS 10.2、10.3、11.2 等版本的机型上出现组件无法操作、触摸没反应等问题,经排查是 Vue 2.6 更新引入的事件冒泡问题。

    在 Vue 2.6 版本中,如果系统版本是 iOS 10.2 ~ 11.2,会偶现事件无法冒泡的情况,导致 Vant 部分组件里的逻辑无法触发。

    最新进度

    从 2.4 版本开始,我们通过手动绑定事件的方式来规避这个问题,涉及以下组件:

    • Area
    • DatetimePicker
    • ImagePreview
    • Rate
    • Slider
    • Swipe
    • SwipeCell
    • NumberKeyboard
    • Picker
    • PullRefresh

    解决方法

    如果你遇到了类似的问题,升级到 Vant 2.4.0 以上版本即可解决

    降级 Vue 版本到 2.5.22 亦可解决此问题:

    npm i [email protected] [email protected] --save
    

    相关 issue

    https://github.com/vuejs/vue/issues/10964

    🍄 document 
    opened by chenjiahan 57
  • 设计稿是750px,根元素应该设置75,但是vant转换后好小,要改成35才行

    设计稿是750px,根元素应该设置75,但是vant转换后好小,要改成35才行

    require('postcss-pxtorem')({ rootValue: 75, //默认根目录字体大小(px) unitPrecision: 5, //保留小数位 propList: ['*'], // selectorBlackList: [''], //过滤的类名 replace: true, //默认直接替换属性 mediaQuery: false, minPixelValue: 6, //所有小于设置的样式都不被转换 }),

    但是改了设计稿的宽度又对不上了,有什么好的解决方案

    opened by lyseky 46
  • Vant 2.0 版本正式发布

    Vant 2.0 版本正式发布

    【2019.06.13 更新】 2.0 正式版已发布,点此查看


    Vant 2.0 版本正在热火朝天的开发中,预计5月下旬会发布 beta 版本,6月发布正式版

    主要更新内容有:

    • 增加四个新组件
    • 增加数十个 API
    • 优化无障碍访问
    • 全新的卡片风格文档,支持文档搜索
    • 所有组件支持通过 less 变量自定义样式
    • 调整了部分不合理的命名,废弃少量 API

    欢迎大家提出意见或需求 ^_^


    【2019.05.22 更新】 beta 版本已发布,点此查看更新日志


    补充安装方法:

    npm i [email protected] -S
    
    👀 discuss 
    opened by chenjiahan 46
  • [Bug Report] Calendar组件设置min-date、max-date和default-date时,日历初始空白

    [Bug Report] Calendar组件设置min-date、max-date和default-date时,日历初始空白

    设备 / 浏览器

    iphone 8p

    Vant 版本

    2.4.7

    Vue 版本

    2.6.11

    重现链接

    https://codesandbox.io/s/vant-issue-moban-5d9nf

    描述问题

    Calendar组件设置min-date、max-date和default-date时,日历控件首次弹出日期全部显示空白 向上滑动一下后才能显示出来

    🐞 bug 💩 browser quirks 
    opened by wg5945 38
  • 按需引入vant到vue脚手架里面 不显示样式

    按需引入vant到vue脚手架里面 不显示样式

    main.js import Vue from 'vue' import App from './App.vue' import { Button } from 'vant' import { Popup } from 'vant' import 'vant/lib/index.css'; Vue.use(Button); Vue.use( Popup);

    组件.vue里 组件可以显示 但是样式不显示

    image

    只能通过script的方式单独引入index.css 求问该如何解决

    opened by ghostsatan 37
  • [Bug Report] actionSheet中使用picker选择器,无法上下滑动

    [Bug Report] actionSheet中使用picker选择器,无法上下滑动

    设备 / 浏览器

    iphone8plus

    Vant 版本

    2.1.1

    Vue版本

    2.6.10

    重现链接

    http://www.baidu.com

    描述问题

    actionSheet中使用picker选择器,无法上下滑动

    opened by DongJigong 36
  • [Feature Request] van-tab 滑动切换动画

    [Feature Request] van-tab 滑动切换动画

    van-tab 滑动切换

    切换显示子页面可否有左右滑动动画

    案例地址:http://elemefe.github.io/mint-ui/#/tab-container

    💡 feature 
    opened by liudake 32
  • (求救!!!)List组件无限刷新,看了之前相似的,还是没解决

    (求救!!!)List组件无限刷新,看了之前相似的,还是没解决

    我也看了之前别人提的类似的问题,可是还没有解决

          onLoad() {
            setTimeout(() => {
              if (this.search.page < this.totalPage) {
                this.search.page += 1;
                console.log("this.search.page: ",this.search.page);
                this.$http.post("/search/page",this.search).then(({data})=> {
                  this.noitem = false;
                  data.items.forEach(goods => {
                    goods.skus = JSON.parse(goods.skus);
                    goods.skus.forEach(sku => {
                      sku.price = this.formatPrice(sku.price);
                      sku.spuId = goods.id;
                      this.goodsList.push(sku);
                    })
                  });
                });
                // 加载状态结束
                this.loading = false;
                
              }else{
                this.finished = true;
              }
            }, 500);
          },
    

    全部页面都给加载了 image

    help wanted 
    opened by Frank-QI7 32
  • Picker 在ios 11.2.5 版本中picker选项不能滑动,只能通过单击使选项滚动到选中位置

    Picker 在ios 11.2.5 版本中picker选项不能滑动,只能通过单击使选项滚动到选中位置

    请使用下面的链接创建 issue 以帮助我们更快的排查问题,不规范的 issue 会被关闭,感谢配合。

    http://vant-contrib.gitee.io/vant-issue-generater

    如果遇到了用法上的问题或想法,建议在 Discussions 讨论区 发帖进行讨论。


    Please use the link below to create a new issue, the non-standard issue will be closed.

    https://youzan.github.io/vant-issue-generater

    opened by lwj1426282929 0
  • [Feature Request] [vant-cli] 代码复制功能

    [Feature Request] [vant-cli] 代码复制功能

    这个功能解决了什么问题

    提高使用者的体验

    描述您想要的解决方案

    在代码块增加代码复制按钮/提示之类的,点击之后可以一键复制当前代码块的所有代码到剪切版

    建议的API是什么样的

    在cli中暴露代码复制功能配置

    💡 feature 
    opened by TinsFox 0
  • [Bug Report] @vant/cli@4.0.0-rc.0的build:site的bug

    [Bug Report] @vant/[email protected]的build:site的bug

    设备 / 浏览器

    谷歌

    Vant 版本

    3.2.5

    Vue 版本

    3.2.20

    重现链接

    https://codesandbox.io/s/m5v3f?file=/src/main.js

    描述问题

    问题: build:site生成的组件预览页面没有demo里面写的样式

    复现: 1.将dev分支的vant拷贝出去 2. yarn 3. yarn build:site 4. 部署

    结果如下:

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7221b3951a7d460f85934be90bf57974~tplv-k3u1fbpfcp-watermark.image

    need reproduce 
    opened by ChpShy 4
  • [Feature Request] imagePreview支持跟随手势设置图片缩放原点

    [Feature Request] imagePreview支持跟随手势设置图片缩放原点

    这个功能解决了什么问题

    现在都是以图片中心为原点缩放,支持跟随手势中心为原点缩放图片

    描述您想要的解决方案

    组件内部解决 外部传布尔值选择

    建议的API是什么样的

    布尔值 默认true为图片中心 false为跟随手势

    💡 feature 
    opened by gitLH26 0
  • [Bug Report] Cascader 级联选择 bug

    [Bug Report] Cascader 级联选择 bug

    设备 / 浏览器

    钉钉

    Vant 版本

    3.2.3

    Vue 版本

    3.1.5

    重现链接

    https://vant-contrib.gitee.io/vant/v3/#/zh-CN/cascader

    描述问题

    我们的项目用到了cascader级联,在钉钉里打开,经过操作后点击级联tab会有错误。用官网的链接去测试也同样有这个问题。我录了个在钉钉里复现bug视频,上传git上了,https://github.com/JaneII/vant-cascader-bug.git

    💩 browser quirks 
    opened by JaneII 1
  • [Bug Report] Toast在computed加if/else返回时调用会报错

    [Bug Report] Toast在computed加if/else返回时调用会报错

    opened by wensc1996 4
  • [Bug Report] Vant3的ImagePreview组件在UC内核的浏览器上异常

    [Bug Report] Vant3的ImagePreview组件在UC内核的浏览器上异常

    设备 / 浏览器

    三星S9/夸克(UC内核)

    Vant 版本

    3.2.2

    Vue 版本

    3.0.0

    重现链接

    https://jhmr0.csb.app/

    描述问题

    Vant3的ImagePreview组件在UC内核的浏览器上(夸克,支付宝内置浏览器等),有卡顿、图片不显示、无法循环滑动图片的问题。 当然,在同一个手机的谷歌浏览器上,是完全正常的。 要重现问题需要在UC内核的浏览器上打开重现链接。 Vant3的ImagePreview组件很棒,希望开发者能考虑这个组件能兼容UC内核的浏览器。

    💩 browser quirks 
    opened by JuliusNan 1
  • [Bug Report] Calendar 日历  scrollToDate  方法问题

    [Bug Report] Calendar 日历 scrollToDate 方法问题

    opened by L5280999 0
  • [Feature Request] 可以给form表单加个可选的距离顶部scroll-to-error的滚动阈值吗?

    [Feature Request] 可以给form表单加个可选的距离顶部scroll-to-error的滚动阈值吗?

    这个功能解决了什么问题

    如果跟tab组件一起使用并且开启sticky布局的时候,tab头部是浮动的 那么校验不通过时滚动至错误的表单项时,tab头部会挡住一部分的输入框。

    描述您想要的解决方案

    可以通过api自定义滚动距离顶部的阈值。

    建议的API是什么样的

    设定一个可以通过px控制的api。

    💡 feature 
    opened by wang0129 1
  • [Bug Report] DropdownMenu 在 Dialog 中的显示问题

    [Bug Report] DropdownMenu 在 Dialog 中的显示问题

    设备 / 浏览器

    Chrome 92

    Vant 版本

    2.12.25

    Vue 版本

    2.6.10

    重现链接

    https://codesandbox.io/s/vant-issue-moban-forked-8nq45?file=/src/App.vue

    描述问题

    现在 DropdownMenu 的样式在 Dialog 中难以以一个合适的方式展示。

    并且现在 DropdownMenu 组件在 Dialog 处于完全不可用的状态。是否考虑以一种降级的方式来处理?

    💡 feature 
    opened by songhn233 3
Releases(v2.12.30)
A fantastic mobile ui lib implement by Vue.

A fantastic mobile ui lib implement by Vue.

DiDi 8.9k Oct 17, 2021
Mobile UI Components based on Vue & WeUI

Be Cool with [email protected]^2.3.0 and WeUI. Live Demo >> Sponsors 我们的产品 Requirements 暂未适配 [email protected],请注意。 [email protected]^2.3.0(for .sync modifier) [email protected]^2.0 [email protected]^7.6

Airyland 17.5k Oct 16, 2021
Lightweight Mobile UI Components built on Vue

Vant Mobile UI Components built on Vue ?? 文档网站(国内) ?? 文档网站(GitHub) ???? 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 9

有赞 18.5k Oct 20, 2021
Material design mobile component library for Vue3

Material design mobile component library for Vue3

null 863 Oct 11, 2021
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.5k Oct 14, 2021
Mobile UI elements for Vue.js

Mint UI Mobile UI elements for Vue 2.0 Homepage Documentation Installation npm i mint-ui -S # for Vue 1.x npm i [email protected] -S Usage Import all compone

饿了么前端 16.4k Oct 14, 2021
Full featured HTML framework for building iOS & Android apps

Framework7 Full Featured Mobile HTML Framework For Building iOS & Android Apps Supporting Framework7 Framework7 is an MIT-licensed open source project

Framework7 16.4k Oct 16, 2021
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.

Ionic Framework Ionic Framework is the open-source mobile app development framework that makes it easy to build top quality native and progressive web

Ionic 45.4k Oct 17, 2021
NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

NutUI 3 - 京东风格的轻量级移动端 Vue 组件库 (A Vue.js UI Toolkit for Mobile Web)

JDR Design FE 3.7k Oct 16, 2021
Native mobile applications using Vue and NativeScript.

Supporting NativeScript-Vue NativeScript-Vue is an MIT-licensed open source project made possible by our sponsors: and these awesome backers: Tiago Al

NativeScript-Vue 4.8k Oct 15, 2021
🔧 eros app 开发模板。

eros 主项目地址 https://github.com/bmfe/eros 介绍 eros app 快速开发模板,可通过脚手架 eros-cli init 指令快速生成。 分支介绍 master (附带着 demo 的完整开发底层) pure (无任何功能的纯净开发模板) source (源码依

Byte Master 144 Aug 26, 2021