在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 相关文章推荐
js页面跳转的常用方法整理
Oct 18 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
vue中如何实现变量和字符串拼接
Jun 19 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
PHP新手入门学习方法
2011/05/08 PHP
PHP实现的json类实例
2015/07/28 PHP
Smarty模板引擎缓存机制详解
2016/05/23 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript globalStorage类代码
2009/06/04 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python排序方法实例分析
2015/04/30 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
Python处理中文标点符号大集合
2018/05/14 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
药品促销活动方案
2014/02/14 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
学校募捐倡议书
2014/05/14 职场文书
选秀节目策划方案
2014/06/06 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2014年营销工作总结
2014/11/22 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
会计工作岗位职责
2015/02/03 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书