在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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 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
iis6手工创建网站后无法运行php脚本的解决方法
2017/06/08 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
一篇不错的Python入门教程
2007/02/08 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
python 检查文件mime类型的方法
2018/12/08 Python
python实现视频读取和转化图片
2019/12/10 Python
python中property和setter装饰器用法
2019/12/19 Python
Python文件操作函数用法实例详解
2019/12/24 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
2014年维修工作总结
2014/11/22 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
社区重阳节活动总结
2015/03/24 职场文书
护理自荐信
2019/05/14 职场文书
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android