在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 document.referrer 用法
Apr 30 Javascript
jquery ajax abort()的使用方法
Oct 28 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
js文字横向滚动特效
Nov 11 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 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数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
Vue组件化开发思考
2018/02/02 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
对python 自定义协议的方法详解
2019/02/13 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
《与朱元思书》的教学反思
2014/04/17 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
归元寺导游词
2015/02/06 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python