在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】


Posted in Javascript onJune 09, 2019

1如何引入组件库

有两种方法 1 npm下载 2 下载代码,下面介绍第二种方法。

在gitHub上, 链接如下  https://github.com/youzan/vant-weapp  首先在自己项目目录static下新建一个vant文件夹,用于存放组件文件,把dist文件夹下的所有文件拷贝到static下面的vant目录下,如下所示:

在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

2 如何使用

1 在需要使用组件的页面所在的文件夹下新建一个页面main.json, (新建页面后必须npm run dev 才能生效)在其中引入相应的组件即可,如下图所示引入了van-popup组件和van-picker组件:

在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

2 在对应的页面中使用, 这个页面使用了van-popup组件和van-picker组件。在弹层中选择年份。

在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

3 注意事项

popup的事件命名中使用了减号, 直接使用会导致组件不生效,解决方法如下: 找到vant目录下popup目录下的index.js文件(就是上面所说的在static下面新建的vant),修改其中的事件名,如下注释部分,把短横线命名改为驼峰命名,即可生效。

在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

3 到这里就可以在页面中使用了相应的组件了。

总结

以上所述是小编给大家介绍的在mpvue框架中使用Vant WeappUI组件库的注意事项,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
浅谈js中的闭包
Mar 16 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 #Javascript
微信小程序与webview交互实现支付功能
Jun 07 #Javascript
在微信小程序中使用vant的方法
Jun 07 #Javascript
微信小程序实现折线图的示例代码
Jun 07 #Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 #Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 #Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 #Javascript
You might like
php基础知识:类与对象(1)
2006/12/13 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
详解Vuex中mapState的具体用法
2017/09/28 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
用python批量移动文件
2021/01/14 Python
css3中仿放大镜效果的几种方式原理解析
2020/12/03 HTML / CSS
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
出生证明格式
2015/06/15 职场文书
领导离职感言
2015/08/03 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis