在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 相关文章推荐
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
PDO::prepare讲解
2019/01/29 PHP
jQuery 常见学习网站与参考书
2009/11/09 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[54:33]2018DOTA2亚洲邀请赛小组赛 A组加赛 Liquid vs Optic
2018/04/03 DOTA
Python中操作MySQL入门实例
2015/02/08 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
任课老师推荐信范文
2013/11/24 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
幼儿园实习生辞职信
2014/01/20 职场文书
项目建议书模板
2014/05/12 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
golang生成vcf通讯录格式文件详情
2022/03/25 Golang
MySQL 数据表操作
2022/05/04 MySQL
关于mysql中string和number的转换问题
2022/06/14 MySQL
HttpClient实现表单提交上传文件
2022/08/14 Java/Android