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
  • 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
  • 设计稿是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 42
  • 按需引入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] 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 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
  • [Bug Report] Tab 标签页组件 SSR 模式没有正确的渲染 |The tabs component is not rendered correctly in ssr mode

    [Bug Report] Tab 标签页组件 SSR 模式没有正确的渲染 |The tabs component is not rendered correctly in ssr mode

    设备 / 浏览器 任意设备

    Device / browser Any device

    Vant 版本 2.12.10

    Vant version 2.12.10

    Vue 版本 3.0.4

    Vue version 3.0.4

    重现链接 https://starriv.coding.net/public/playground/nuxt-demo/git/files

    • 拉取项目
    • 安装依赖
    • yarn run
    • 浏览器控制检查 html

    Demo site https://starriv.coding.net/public/playground/nuxt-demo/git/files

    • pull remo
    • install dependencies
    • yarn run
    • inspect the dom structure in the browser console

    描述问题 SSR 模式没有正确的渲染 如下使用 Nuxt 渲染出来的结构

    Describe the problem SSR mode does not render correctly. Structure rendered using Nuxt input

    <template>
      <div>
        <van-tabs v-model="active">
          <van-tab title="标签 1">内容 1</van-tab>
          <van-tab title="标签 2">内容 2</van-tab>
          <van-tab title="标签 3">内容 3</van-tab>
          <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          active: 1,
        };
      },
    };
    </script>
    <style>
    </style>
    
    

    render

      <div class="van-tabs van-tabs--line">
        <div class="van-tabs__wrap">
          <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
            <div class="van-tabs__line"></div>
          </div>
        </div>
        <div class="van-tabs__content">
          <div role="tabpanel" class="van-tab__pane" style="display:none;">
            <!---->
          </div>
          <div role="tabpanel" class="van-tab__pane" style="display:none;">
            <!---->
          </div>
          <div role="tabpanel" class="van-tab__pane" style="display:none;">
            <!---->
          </div>
          <div role="tabpanel" class="van-tab__pane" style="display:none;">
            <!---->
          </div>
        </div>
      </div>
    

    可以看到没有渲染出 tabs (标题栏) 和对应 active 的 content

    As shown above, the expected dom structure (complete title bar and activated content) does not appear

    SSR 
    opened by starriv 0
  • [Feature Request] Checkbox's icon slot parameter has no disabled

    [Feature Request] Checkbox's icon slot parameter has no disabled

    这个功能解决了什么问题

    When customizing an icon, change the style according to the disabled

    描述您想要的解决方案

    Parameter contains the "disabled" value

    建议的API是什么样的

    icon slot parameters: checked: boolean,disabled:boolean

    💡 feature 
    opened by mayuxian 0
  • [Bug Report] Calendar 组件month-show事件选择日历第二次滚动到可视区域时无法监听到当前可视区域的日期

    [Bug Report] Calendar 组件month-show事件选择日历第二次滚动到可视区域时无法监听到当前可视区域的日期

    设备 / 浏览器

    chrome

    Vant 版本

    2.12.17

    Vue 版本

    2.6.11

    重现链接

    https://codepen.io/ll-lili/pen/dyvWWyN

    描述问题

    Calendar 组件month-show事件选择日历第二次滚动到可视区域时无法监听到当前可视区域的日期

    opened by ll-lili 2
  • Calendar日历 day数据结构问题

    Calendar日历 day数据结构问题

    Day 数据结构 不太满足需求、可否考虑将

    topInfo | 上方的提示信息

    -- | -- | -- bottomInfo | 下方的提示信息

    这两个变成插槽形式、 因为 如果我再bottonmInfo下面需要加几个div [(显示背景颜色。加点显示状态)。就满足不了需求 image

    💡 feature 
    opened by HuangWeiBin2 5
  • build(deps): bump postcss from 7.0.35 to 8.2.10 in /packages/vant-cli

    build(deps): bump postcss from 7.0.35 to 8.2.10 in /packages/vant-cli

    Bumps postcss from 7.0.35 to 8.2.10.

    Release notes

    Sourced from postcss's releases.

    8.2.10

    8.2.9

    8.2.8

    8.2.7

    8.2.6

    • Fixed Maximum call stack size exceeded in Node#toJSON.
    • Fixed docs (by @​inokawa).

    8.2.5

    • Fixed escaped characters handling in list.split (by @​nex3).

    8.2.4

    8.2.3

    8.2.2

    8.2.1

    • Fixed Node#toJSON() and postcss.fromJSON() (by @​mischnic).

    8.2 “Prince Orobas”

    PostCSS 8.2 added a new API to serialize and deserialize CSS AST to JSON.

    import { parse, fromJSON } from 'postcss'
    

    let root = parse('a{}', { from: 'input.css' }) let json = root.toJSON() // save to file, send by network, etc let root2 = fromJSON(json)

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    8.2.10

    • Fixed ReDoS vulnerabilities in source map parsing.
    • Fixed webpack 5 support (by Barak Igal).
    • Fixed docs (by Roeland Moors).

    8.2.9

    • Exported NodeErrorOptions type (by Rouven Weßling).

    8.2.8

    • Fixed browser builds in webpack 4 (by Matt Jones).

    8.2.7

    • Fixed browser builds in webpack 5 (by Matt Jones).

    8.2.6

    • Fixed Maximum call stack size exceeded in Node#toJSON.
    • Fixed docs (by inokawa).

    8.2.5

    • Fixed escaped characters handling in list.split (by Natalie Weizenbaum).

    8.2.4

    • Added plugin name to postcss.plugin() warning (by Tom Williams).
    • Fixed docs (by Bill Columbia).

    8.2.3

    • Fixed JSON.stringify(Node[]) support (by Niklas Mischkulnig).

    8.2.2

    • Fixed CSS-in-JS support (by James Garbutt).
    • Fixed plugin types (by Ludovico Fischer).
    • Fixed Result#warn() types.

    8.2.1

    • Fixed Node#toJSON() and postcss.fromJSON() (by Niklas Mischkulnig).

    8.2 “Prince Orobas”

    • Added Node#toJSON() and postcss.fromJSON() (by Niklas Mischkulnig).

    8.1.14

    • Fixed parser performance regression.

    8.1.13

    • Fixed broken AST after moving nodes in visitor API.

    8.1.12

    • Fixed Autoprefixer regression.

    8.1.11

    • Added PostCSS update suggestion on unknown event in plugin.

    ... (truncated)

    Commits
    • 8395d9f Release 8.2.10 version
    • f2baaa7 Update ESLint config
    • b6f3e4d Fix unsafe regexp in getAnnotationURL() too
    • 4bcd727 Merge pull request #1553 from barak007/patch-2
    • 7c2e97a Add covrage ignore on error paths
    • 8c58434 Apply suggestions from code review
    • ff2fd57 add error for sourcePath
    • 8f02bdc disable url based features
    • a54d020 Fix browser bundling with webpack 5
    • 8682b1e Fix unsafe regexp
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies 
    opened by dependabot[bot] 2
  • [Bug Report] 页面使用转场动画 popover定位失效问题

    [Bug Report] 页面使用转场动画 popover定位失效问题

    设备 / 浏览器

    chrome

    Vant 版本

    3.0.14

    Vue 版本

    3.0.11

    重现链接

    https://jsbin.com/kiburopabi/edit?html,css,js,output

    描述问题

    第一次进A页面时popover组件可以正常显示,点击跳到b页面,再点击回到A页面时popover组件定位偏移不见了

    🐞 bug 
    opened by jinghh 0
  • [Feature Request] ImagePreview组件cover可以跟随Image一起有动画效果

    [Feature Request] ImagePreview组件cover可以跟随Image一起有动画效果

    这个功能解决了什么问题

    现在的ImagePreview组件cover体验很差,image还没滑动过来,image上层的cover直接先展示,影响用户体验

    描述您想要的解决方案

    slot cover 和图片都放在SwiperItem中,可以跟随SwiperItem一起展示; 或者和SwiperItem有同样的动画展示效果,就是SwiperItem开始滑动过来时,有事件通知

    建议的API是什么样的

    @startChange(index,deriction) 开始滑动事件,并通知索引和方向

    💡 feature 
    opened by yajore 0
  • [Feature Request] 使用非常方便的骨架屏解决方案

    [Feature Request] 使用非常方便的骨架屏解决方案

    这个功能解决了什么问题

    解决现有骨架屏使用麻烦,适用度低的问题

    描述您想要的解决方案

    使用时将需要显示的视图通过slot放入骨架屏组件内,然后给视图内的span、a、img等标签设置带动画的背景和透明字体色来让实现骨架屏效果,在通过props来控制是否显示骨架屏。对于某些也要有骨架效果的div标签,用v-slot="{ vClass }"回传一个vClass,把vClass设置给div,实现对div的单独控制

    建议的API是什么样的

    通过传一个props来控制是否显示骨架屏状态

    效果

    test3

    使用

    <template>
      <div class="home col">
        <van-switch v-model="loading" />
        <skeleton :loading="loading" v-slot="{ vClass }">
          <div class="row-center item">
            <img class="img" src="../../assets/logo.png"/>
            <div class="col">
              <span class="title">这是一个标题</span>
              <span class="sub-title">这是一段内容</span>
            </div>
          </div>
          <div class="content" :class="[vClass]" style="width:100%;height:300px;">
            这是一个div
          </div>
        </skeleton>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent,reactive,toRefs,inject } from 'vue';
    import Skeleton from '@/components/skeleton'
    
    export default defineComponent({
      name: 'About',
      components:{
        Skeleton
      },
      setup(){
    
        const updateTitle: (title: string)=>void|undefined = inject('setNavTitle')
    
        const state = reactive({
          loading:false
        })
    
        const setTitle = ()=>{
          updateTitle&&updateTitle('关于页面')
        }
    
        setTitle()
    
        return {
          ...toRefs(state)
        }
      }
    });
    </script>
    
    <style scoped>
    
      .item{
        padding: 10px;
      }
      .title{
        font-size: .4rem;
      }
      .sub-title{
        margin-top: 5px;
        font-size: .35rem;
        color: #333;
      }
    
      .img{
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
      .content{
        padding: 10px;
        font-size: .38rem;
      }
    </style>
    
    

    我自己简单实现的代码

    • Skeleton.tsx
    import { defineComponent, computed } from 'vue';
    import 'skeleton.css'
    interface SkeletonProps {
        loading: boolean;
    }
    
    export default defineComponent({
        name: 'Skeleton',
        props: {
            loading: {
                type: Boolean,
                default: () => false
            }
        },
        setup(props: SkeletonProps, { slots }) {
            return () => {
                return (
                    <div class={props.loading ? 'skeleton-view-empty-view' : 'skeleton-view-default-view'}>
                        {slots.default({
                            vClass: props.loading ? 'skeleton-view-empty-div' : 'skeleton-view-default-view'
                        })}
                    </div>
                )
            }
        }
    })
    
    • skeleton.css
    .skeleton-view-default-view span,
    .skeleton-view-default-view a,
    .skeleton-view-default-view img
    {
        transition: all .7s ease;
        background-color: rgba(0, 0, 0, 0)
    }
    
    
    .skeleton-view-empty-div{
        color: rgba(0, 0, 0, 0) !important;
        border-radius: 2px;
        background: linear-gradient(
                -45deg,
                #F5F5F5 0%,
                #DCDCDC 25%,
                #F5F5F5 50%,
                #DCDCDC 75%,
                #F5F5F5 100%
        );
        animation: gradientBG 4s ease infinite;
        background-size: 400% 400%;
        background-color:#DCDCDC;
        transition: all 1s ease;
    }
    
    .skeleton-view-empty-view {
        pointer-events: none;
    }
    .skeleton-view-empty-view span,
    .skeleton-view-empty-view a {
        color: rgba(0, 0, 0, 0) !important;
        border-radius: 2px;
        background: linear-gradient(
                -45deg,
                #F5F5F5 0%,
                #DCDCDC 25%,
                #F5F5F5 50%,
                #DCDCDC 75%,
                #F5F5F5 100%
        );
        animation: gradientBG 4s ease infinite;
        background-size: 400% 400%;
        background-color:#DCDCDC;
        transition: all 1s ease;
    }
    /* [src=""],img:not([src])*/
    .skeleton-view-empty-view img {
        content: url(../../assets/img/no_url.png);
        border-radius: 2px;
        background: linear-gradient(
                -45deg,
                #F5F5F5 0%,
                #DCDCDC 25%,
                #F5F5F5 50%,
                #DCDCDC 75%,
                #F5F5F5 100%
        );
        animation: gradientBG 4s ease infinite;
        background-size: 400% 400%;
        background-color:#DCDCDC;
        transition: all 1s ease;
    }
    @keyframes gradientBG {
        0% {
            background-position: 100% 100%;
        }
        50% {
            background-position: 0% 0%;
        }
        100% {
            background-position: 100% 100%;
        }
    }
    
    💡 feature 
    opened by 98kWarning 0
  • [Feature Request] @vant/cli 怎么自定义主题?

    [Feature Request] @vant/cli 怎么自定义主题?

    这个功能解决了什么问题

    可自定义主题

    描述您想要的解决方案

    增加可自定义主题

    建议的API是什么样的

    cli 💡 feature 
    opened by lengkaixin 0
  • [Bug Report] Field组件在输入数字时,过滤掉了英文逗号

    [Bug Report] Field组件在输入数字时,过滤掉了英文逗号

    设备 / 浏览器

    iPhone

    Vant 版本

    2.9.2

    Vue 版本

    2.6.11

    重现链接

    https://h5.miracare.dev/status?token=414295-38ef24d8-972e-4ebc-9e6f-6c7f8e7e029a

    描述问题

    在时区设置为一些地区,比如德国时,数字输入法(在修改体温和体重时,iPhone输入法)的小数点会以英文逗号显示;但是Field组件在type为number时,会过滤掉英文逗号。请问有遇到过该问题的朋友吗,是如何解决的?

    💡 feature 
    opened by ChaoZhQua 2
Releases(v3.0.18)
A fantastic mobile ui lib implement by Vue.

A fantastic mobile ui lib implement by Vue.

DiDi 8.7k Jun 3, 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.4k Jun 13, 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

有赞 17.6k Jun 14, 2021
Material design mobile component library for Vue3

Material design mobile component library for Vue3

null 339 Jun 3, 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.4k Jun 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.3k Jun 5, 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.2k Jun 14, 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 44.7k Jun 14, 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.7k Jun 4, 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.2k Jun 14, 2021
🔧 eros app 开发模板。

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

Byte Master 143 Mar 6, 2021