在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 更新 JavaScript 数组的 uniq 方法
Jan 23 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
jquery中JSON的解析方式
Mar 16 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
php 实现进制相互转换
2016/04/07 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
Javascript的this详解
2019/03/23 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
作风转变心得体会
2014/09/02 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015年档案室工作总结
2015/05/23 职场文书
离婚案件原告代理词
2015/05/23 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
入党申请书怎么写?
2019/06/11 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers