在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 相关文章推荐
JS 建立对象的方法
Apr 21 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
微信小程序发布新版本时自动提示用户更新的方法
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模拟服务器实现autoindex效果的方法
2015/03/10 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
JS类库Bindows1.3中的内存释放方式分析
2007/03/08 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
python可以用哪些数据库
2020/06/22 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
理工学院学生自我鉴定
2014/02/23 职场文书
承诺书范本
2015/01/21 职场文书