在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 相关文章推荐
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
微信小程序发布新版本时自动提示用户更新的方法
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
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
2018/09/27 Javascript
jquery实现掷骰子小游戏
2019/10/24 jQuery
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
C#如何进行LDAP用户校验
2012/11/21 面试题
人事档案接收函
2014/01/12 职场文书
运动会稿件300字
2014/02/14 职场文书
目标责任书范本
2014/04/16 职场文书
银行金融服务方案
2014/06/11 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
护士节活动总结
2014/08/29 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
公司会议开幕词
2015/01/29 职场文书
植树节新闻稿
2015/07/17 职场文书