在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 CSS样式控制 学习笔记
Jul 23 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jquery form 加载数据示例
Apr 21 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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与php MySQL 之间的关系
2009/07/17 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
nginx下安装php7+php5
2016/07/31 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
js实现简单页面全屏
2019/09/17 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
速记Python布尔值
2017/11/09 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
公安机关起诉意见书
2015/05/20 职场文书
欠条格式范本
2015/07/03 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
完美解决golang go get私有仓库的问题
2021/05/05 Golang
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL