在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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
浅谈js原生拖放
Nov 21 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
vue实现标签云效果的示例
Nov 09 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 8小时时间差的解决方法小结
2009/12/22 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
php语法检查的方法总结
2019/01/21 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
python发送HTTP请求的方法小结
2015/07/08 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
财政专业求职信范文
2014/02/19 职场文书
产品质量承诺书
2014/03/27 职场文书
网站创业计划书
2014/04/30 职场文书
企业读书活动总结
2014/06/30 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers