在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 Array增加each方法
Apr 07 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
js实现拖动缓动效果
Jan 13 Javascript
详解React 元素渲染
Jul 07 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
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jQuery 表格工具集
2010/04/25 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
小程序云开发实战小结
2018/10/25 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
javascript网页随机点名实现过程解析
2019/10/15 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
详解Django CAS 解决方案
2019/10/30 Python
Django异步任务线程池实现原理
2019/12/17 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
应聘面试自我评价
2014/01/24 职场文书
商场中秋节活动方案
2014/02/07 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
办公用房租赁协议书
2014/11/29 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
销售助理岗位职责
2015/02/11 职场文书
党小组评议意见
2015/06/02 职场文书
Java实现多文件上传功能
2021/06/30 Java/Android
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL