在mpvue框架中使用Vant WeappUI组件库的注意事项
1如何引入组件库
有两种方法 1 npm下载 2 下载代码,下面介绍第二种方法。
在gitHub上, 链接如下 https://github.com/youzan/vant-weapp 首先在自己项目目录static下新建一个vant文件夹,用于存放组件文件,把dist文件夹下的所有文件拷贝到static下面的vant目录下,如下所示:

2 如何使用
1 在需要使用组件的页面所在的文件夹下新建一个页面main.json, (新建页面后必须npm run dev 才能生效)在其中引入相应的组件即可,如下图所示引入了van-popup组件和van-picker组件:

2 在对应的页面中使用, 这个页面使用了van-popup组件和van-picker组件。在弹层中选择年份。

3 注意事项
popup的事件命名中使用了减号, 直接使用会导致组件不生效,解决方法如下: 找到vant目录下popup目录下的index.js文件(就是上面所说的在static下面新建的vant),修改其中的事件名,如下注释部分,把短横线命名改为驼峰命名,即可生效。

3 到这里就可以在页面中使用了相应的组件了。
在mpvue框架中使用Vant WeappUI组件库的注意事项的更多相关文章
- 小程序使用mpvue框架无缝接入Vant Weapp组件库
有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式,然而由于mpvue是对微信原生开发的再次封装,这也为我们引入UI组件添加了不少麻 ...
- django-drf框架中排序和查询组件
0910自我总结 django-drf框架中排序和查询组件 一查询相关 1.模糊查询 1.导入模块组件 from rest_framework.filters import SearchFilter ...
- Vant UI 组件库如何做rem适配?
Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么V ...
- 5-1 Vant | 移动组件库
Vant 什么是Vant Vant是一个轻量,可靠的移动端组件库,2017开源 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付 ...
- 微信小程序没找到构建npm或者没找到node_modules目录以及如何在小程序中引入vant weapp组件
微信小程序没找到构建npm或者没找到node_modules目录解决方法如下: 按照微信小程序提供的文档npm install是不行的,直接提示没找到可构建的npm包. 1.直接安装:npm init ...
- 把项目中的vant UI组件升级
首先把之前 的VANT 卸载掉 npm uninstall vant 然后重新安装 一次vant npm i vant -S
- vue使用饿了么element-ui框架中的上传组件进度条无法使用,:on-progress钩子无法触发的原因
自己写的例子都是好好的,调试了半天,在项目里怎么都出不来 最终终于找到原因: 在上传文件时要做进度显示需要用到xhr.upload.onprogress事件,此时如果你的项目里用到mock.js模拟数 ...
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...
- 微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
随机推荐
- exp/imp三种模式——完全、用户、表
ORACLE数据库有两类备份方法.第一类为物理备份,该方法实现数据库的完整恢复,但数据库必须运行在归挡模式下(业务数据库在非归挡模式下运行),且需要极大的外部存储设备,例如磁带库:第二类备份方式为逻辑 ...
- 活动推荐 | 听说 PHP 是最好的语言 - 和 OneAPM 一起參与上海 PHPCon 技术盛宴吧
2015年7月11日,第三届 PHP 大会就要和各位 PHPer 正式见面了.本年度,由 Think 技术社区主办,OneAPM 赞助的 PHPCon2015 是为全部热爱技术的 PHPer 提供的最 ...
- LightOJ1245 Harmonic Number (II) —— 规律
题目链接:https://vjudge.net/problem/LightOJ-1245 1245 - Harmonic Number (II) PDF (English) Statistics ...
- CSU 1554 SG Value —— 思维
题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1554 Description The SG value of a set (mult ...
- Java线程池技术以及实现
对于服务端而言,经常面对的是客户端传入的短小任务,需要服务端快速处理并返回结果.如果服务端每次接受一个客户端请求都创建一个线程然后处理请求返回数据,这在请求客户端数量少的阶段看起来是一个不错的选择,但 ...
- java前三天
JDK :开发 JRE:运行 JVM:运行环境(跨平台) 注释:推荐使用第二种方式设置环境变量 nopad++ :设置 注释:1字节等于8位,也就等于2的8次方 2字节等于16位,也就等于2的16次方 ...
- [LeetCode] Scramble String -- 三维动态规划的范例
(Version 0.0) 作为一个小弱,这个题目是我第一次碰到三维的动态规划.在自己做的时候意识到了所谓的scramble实际上有两种可能的类型,一类是在较低层的节点进行的两个子节点的对调,这样的情 ...
- Java操作系统硬件的方法Unsafe
通常Java代码都是运行在JVM中而不能直接访问系统硬件如进行内存分配释放等,但如果有需要跳过JVM直接用Java访问系统硬件,比如像C语言指针一样操作的话就可以调用Unsafe对象相关方法. 1.U ...
- 动态规划专题 01背包问题详解 HDU 2546 饭卡
我以此题为例,详细分析01背包问题,希望该题能够为大家对01背包问题的理解有所帮助,对这篇博文有什么问题可以向我提问,一同进步^_^ 饭卡 Time Limit: 5000/1000 MS (Java ...
- 【旧文章搬运】关于NtUserBuildHwndList的一点记录~
原文发表于百度空间,2011-04-07========================================================================== 该函数与r ...