精华内容
下载资源
问答
  • Vant

    2020-09-17 21:33:02
    是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目 一:安装 npm ...

    轻量,可靠的移动端Vue组件库
    是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

    在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目

    一:安装

    npm install -g @vue/cli

    ***通过 npm 安装在现有项目中使用 Vant 时,可以通过npm或yarn安装

    通过 npm 安装
    npm i vant -S

    通过 yarn 安装
    yarn add vant
    二:使用

    推荐手动按需引入组件

    安装插件

    1   推荐手动按需引入组件
    2  安装插件
    

    npm i babel-plugin-import -D

    // 在.babelrc 中添加配置
    // 注意:webpack 1 无需设置 libraryDirectory

    {
    “plugins”: [
    [“import”, {
    “libraryName”: “vant”,
    “libraryDirectory”: “es”,
    “style”: true
    }]
    ]
    }

    // 对于使用 babel7 的用户,可以在 babel.config.js 中配置

    module.exports = {
    plugins: [
    [‘import’, {
    libraryName: ‘vant’,
    libraryDirectory: ‘es’,
    style: true
    }, ‘vant’]
    ]
    };

    接着可以在代码组件中直接引入你所需要的Vant组件
    第一种方式:

    import Vue from ‘vue’;
    import { button } from ‘vant’;
    Vue.use(button);

    第二种方式:

    import { Button } from “vant”;

    1
    

    components: {
    [Button.name]:Button
    },

    引入即可使用 “有的或许引入后发现没有样式”

    那就在main.js中写上
    import ‘vant/lib/index.css’;

    
    
    
    展开全文
  • vant

    2020-03-27 11:10:04
    官网:vant 官网 教程:https://m.w3cschool.cn/vantlesson/vantlesson-phsq35vd.html 最近用到了一个时间选择器 就使用了Vant Picker 选择器 效果图入下: 动态获取values ...

    官网:vant 官网

    教程:https://m.w3cschool.cn/vantlesson/vantlesson-phsq35vd.html

     

    最近用到了一个时间选择器  就使用了Vant Picker 选择器

    效果图入下:

     

     

     动态获取values

     

     

    展开全文
  • VANT

    2020-03-24 20:35:35
    我们热爱分享和开源,崇尚用工程师的方式解决问题,因此造了很多工具来解决我们遇到的问题,目前我们维护的开源产品有: 生态 项目 描述 vant-demo Vant 官方示例合集 vant-weapp 微信小程序组件库 vant-cli 开箱即...

    特性

    • 60+ 高质量组件
    • 90% 单元测试覆盖率
    • 完善的中英文文档和示例
    • 支持按需引入
    • 支持主题定制
    • 支持国际化
    • 支持 TS
    • 支持 SSR

    快速上手

    请参考快速上手章节。

    贡献代码

    修改代码请阅读我们的开发指南

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

    浏览器支持

    现代浏览器以及 Android 4.0+, iOS 8.0+。

    加入我们

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

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

     

    生态

    项目 描述
    vant-demo Vant 官方示例合集
    vant-weapp 微信小程序组件库
    vant-cli 开箱即用的组件库搭建工具
    vant-icons Vant 图标库
    vant-touch-emulator 在桌面端使用 Vant 的辅助库
    展开全文
  • Vant Mobile UI Components built on Vue 文档网站(国内) 文档网站(GitHub) 中文版介绍 Features 65+ Reusable components 1kb Component average size (min+gzip) 90%+ Unit test ...
  • Vant官方示例合集,包含了VantVant Weapp和Vant Cli相关的示例,详细内容请打开各目录查看。 目录结构 ├── vant # Vant 相关示例 │ ├── vue2 使用 Vue 2、Vant 2、Vue Cli 搭建应用 │ ├── vue3 使用 ...
  • Vant 使用之Toast Vant安装和使用

    万次阅读 2019-10-10 16:44:25
    Vant 是一个VUE 的移动端组件库,里面有很多好用的组件。 第一步,安装和配置 Vant npm i vant -S npm i babel-plugin-import -D 安装完成之后,在项目.babelrc 文件修改配置plugins "plugins": [ ["import...

    Vant 是一个VUE 的移动端组件库,里面有很多好用的组件。

    第一步,安装和配置 Vant

    npm i vant -S
    npm i babel-plugin-import -D

    安装完成之后,在项目 .babelrc 文件修改配置 plugins

    "plugins": [
        ["import", {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
        }]
    ]

    到这里,Vant 算是安装配置完成了,下面开始使用它的组件

    第二步,使用 Vant 的 Toast 组件 官方文档链接

     

    先看一下页面中使用 Toast 的效果图,

    附赠一个简单的验证码倒计时实现代码(限于GIF大小限制,我传了5秒的倒计时,可自行修改)

    在 main.js 里面导入 Vant ,这里我只导入了 vant 的 Toast 组件

    import { Toast } from 'vant';
    Vue.use(Toast);

    最后在页面组件里面使用它,下面贴上页面组件的完整代码

    <template>
      <div id="ca">
        <div class="bindPhone">绑定手机</div>
        <div style="height: 6.375rem;"></div>
        <img class="xxx" @click="phone_val=''" v-if="this.phone_val" src="../../../static/images/xxx.png" />
        <input v-model='phone_val' class="phone_input" type="number" maxlength="11" placeholder="输入手机号" />
        <div class="code" @click="getCode">{{code}}</div>
        <input placeholder="输入验证码" />
        <button class="btn">下一步</button>
    
      </div>
    </template>
    
    <script>
      var that;
      export default {
        data() {
          return {
            msg: '',
            phone_val: '',
            code: '获取验证码'
          }
        },
    
        methods: {
          outTime(time) {
            setTimeout(function() {
              if (time == 0) {
                that.code = '获取验证码';
                return
              }
              time--
              var mm = time >= 10 ? time : '0' + time;
              that.code = '00:' + mm;
              that.outTime(time)
            }, 1000);
          },
          getCode() {
            console.log('点击获取验证码,手机号为:', this.phone_val);
            this.outTime(30);
            if (this.phone_val.length == 11) {
    
            } else {
              // this.toToast('手机号码不正确,请重新输入')
            }
          },
          toToast(txt) {
            this.$toast({
              message: txt,
              position: 'top'
            });
          }
        },
        mounted() {
          that = this;
          console.log('asas')
        }
      }
    </script>
    
    <style>
      .xxx {
        margin-top: 5px;
        position: absolute;
        right: 2.125rem;
        width: 0.9rem;
        height: 0.9rem;
        background: #808080;
        border-radius: 50%;
        padding: 0.25rem;
      }
    
      .code {
        position: absolute;
        width: 3.8rem;
        text-align: center;
        right: 2.125rem;
        background: #F2F2F2;
        color: #9E9E9E;
        padding: 8px 16px 8px 16px;
        margin-top: -6px;
        border-radius: 50px;
        font-size: 0.75rem;
      }
    
      #ca {
        background: white;
        height: 1000px;
      }
    
      .btn {
        outline: none;
        width: 80%;
        margin-left: 10%;
        margin-top: 7rem;
        height: 3rem;
        border: none;
        border-radius: 3.125rem;
        background: #F2F2F2;
        color: #9E9E9E;
      }
    
      input::-webkit-input-placeholder {
        color: #d0d0d0;
      }
    
      .bindPhone {
        margin-top: 2.2rem;
        margin-left: 2rem;
        font-size: 1.875rem;
      }
    
      input {
        outline: none;
        /* 修改input选中的默认边框样式 */
        caret-color: #7BEDD4;
        /* 修改input的选中时的光标颜色 */
        border: none;
        /* 修改input的选中时的默认边框 */
        font-size: 1.1rem;
        margin-left: 2rem;
        padding-bottom: 0.7rem;
        border-bottom: 2px solid #f3f3f3;
        width: 82%;
      }
    
      .phone_input {
        margin-bottom: 2.5rem;
      }
    </style>
    

     

    展开全文
  • 我的是wepy框架下引入的vant 文件夹 例如我想让总价向左一点但整个组件只有一个vant-submit-bar盒子 检查元素发现vant-submit-bar_bar 的padding 可以实现改变但编辑器并没有这个盒子 解决方法:找到类的文件夹...
  • Vant官网

    千次阅读 2020-02-20 16:56:49
    https://vant-contrib.gitee.io/vant/#/zh-CN/
  • vant 文档

    千次阅读 2020-07-29 14:43:55
    https://vant-contrib.gitee.io/vant/#/zh-CN/
  • vantVant官方文档地址

    千次阅读 2020-09-29 10:19:17
    每次从百度搜索vant都没办法直接找到vant的官方文档,只能从别人的博客找到入口。太难了,记一下- - https://youzan.github.io/vant/#/zh-CN/home
  • vant loading

    2020-12-02 13:05:12
    vant中loading加载 //创建vant loading加载 const toast = vant.Toast.loading({ duration: 0, // 持续展示 toast forbidClick: true, message: "加载中..." }); toast.clear()//清除加载
  • vant按需引入vantui

    2020-12-28 23:06:02
    安装vant cnpm i vant --save 安装按需引入模块 npm i babel-plugin-import -D 在.babelrc中配置 "plugins": [ "transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}] ...
  • Vant Aliapp是移动端Vue组件库的支付宝小程序版本,两者基于相同的视觉规范,提供一致的API接口,助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到,并进行了少量的兼容适配调整。 预览 ...
  • vant安装

    2021-03-11 14:19:22
    选择了官网的 npm i vant@next -S 命令 陈尼克建议的命令是 yarn add vant@3.0.0-beta.8 -S 也不知道哪个好,先这样了,官网安装的是3.0.9版
  • vantvant-cell遍历

    2020-03-11 09:19:30
    放在vant-cell直接遍历 vant-group或者div都会套一层动西导致边框有问题 边框是用伪类写的
  • Vant Cli是一个Vue组件库组装工具,通过Vant Cli可以快速构建一套功能完备的Vue组件库。 特性 提供丰富的命令,涵盖从开发测试到合并发布的完整流程 根据约定的目录结构,自动生成优雅的文档站点和组件示例 内置...
  • Vant入门

    千次阅读 2019-06-22 17:11:00
    Vant是什么 简介 Vant是有赞开源的一套基于Vue2.0的Mobile组件库。通过Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。Vant旨在更快、更简单地...
  • Vant Weapp.zip

    2019-10-23 18:01:35
    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,高端大气上档次!(资源内含使用说明.) Vant Weapp官网: https://youzan.github.io/vant-weapp
  • 基于vant组件库的渲染包 |中文介绍 文件 官网: : 演示地址 安装 npm install epage-vant -S # or yarn add epage-vant 设计器及渲染器示例 npm方式约会(推荐) import widgets , { Render } from 'epage-vant' ...
  • vant搭建

    2020-02-23 17:01:05
    vue – ...vant – https://youzan.github.io/vant/#/zh-CN webpack vue-router – https://router.vuejs.org/zh/ vue-touch – https://github.com/vuejs/vue-touch better-scroll – htt...
  • vant vant-list碰到的坑

    千次阅读 2020-04-27 12:42:39
    vant vant-list碰到的坑 最近新写的项目都是碰见了这个问题 onload在加载时只触发一次,还是在刚进页面是触发一次,页面向下滚动时,onload并不加载 (本人所尝试的解决方案) 我在data里定义loading为false,但是...
  • vant popup

    2021-01-14 18:06:38
    使用vant中的popup无法在一开始获取到里面的元素 因为底层用的v-if 初始化渲染是没有任何东西的 mintui的popup与此不同 用的v-show
  • Vant 框架 官网中文 api 地址

    万次阅读 2020-08-02 16:06:34
    地址 https://vant-contrib.gitee.io/vant/#/zh-CN/home 点此跳转进入 Vant 中文api
  • Vant ui

    千次阅读 2019-10-04 12:43:00
    轻量、可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro...vue:将px转化为rem,适配移动端vant-UI等框架 https://www.jianshu.com/p/220a186cc033 DatetimePicker时间选择器 https://w...
  • Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
  • 先锋项目 Weapp官方帐户中的一个vant项目
  • 1. vant 官网2. 通 npm 安装npm i vant -S3.安装 babel-plugin-import 插件babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D4.在 ...
  • Vant简介

    千次阅读 2020-05-06 20:32:09
    一定义 轻量、可靠的移动端 Vue 组件库 二特性 60+ 高质量组件 90% 单元测试覆盖率 完善的中英文文档和示例 ...https://youzan.github.io/vant/#/zh-CN/ 四入门参考 https://www.imooc.com/video/19786 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,731
精华内容 3,492
热门标签
关键字:

vant