在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 ...
随机推荐
- asp.net mvc4 之Webapi之应用客户端访问服务器端
一.说明 客户端项目类型设计为:winform(winform窗体项目类型) 服务器端项目类型设计为:asp.net mvc4 webapi 在这里分为项目运行和调试两种情况讨论: 运行: 这种情况 ...
- Cisco设备参数总结
Cisco设备参数总结 1.MAC与TCAM的区别:两张表所其作用的环境不同,MAC表是全局表,一般通过全局CPU进程转发需要查看MAC表,但是,现在基本都是硬件快速转发,那么这个时候就生成了CAM表 ...
- Docker容器的数据卷(data volume),数据卷容器,数据卷的备份和还原。
Docker容器的数据卷(data volume),数据卷容器,数据卷的备份和还原. 数据卷就是数据(一个文件或者文件夹). Docker的理念之一是将应用与其运行的环境打包,docker容器的生命周 ...
- php常用加密函数总结
$var = 123; /** * md5 加密(单项加密.不可逆) * param $var 需要加密的变量(int\float\string\bool\null),资源类型(resource)和复 ...
- Ubuntu下声卡驱动解决方法alsa
一.首先介绍一下什么是ALSA : Advanced Linux Sound Architecture 的简称为 ALSA ,译成中文的意思是先进的Linux声音架构(这是google翻译的):一谈到 ...
- -webkit-mask-box-image给框架加个同样大小的遮罩
很棒的css属性,可以在div上方建个同大小的遮罩,配合线性变化gradient可以实现很酷的样式,比如:时间选择的UI组件,里面有个模糊的上方遮罩 手册地址:https://developer.mo ...
- Looksery Cup 2015 C. The Game Of Parity —— 博弈
题目链接:http://codeforces.com/problemset/problem/549/C C. The Game Of Parity time limit per test 1 seco ...
- Windows Server 2012 修改桌面图标
在virtualbox 4.2.18中装了个Windows Server 2012 来体验下,结果发现桌面图标都不知道在哪改.在百度文库上找到了解决方法:http://wenku.baidu.com/ ...
- 在线判题系统hustoj的搭建
摘要:ACM/ICPC程序设计竞赛,越来越受到各个高校的重视,是程序设计竞赛中的奥林匹克.Hustoj是搭建在linux系统上的判题系统.能够判断代码的正确性.会及时返回通过或者不通过,如果不通过会返 ...
- CISCO-配置SSH
PC直接连在交换机端口上,PC的ip地址是:192.168.1.1/24 在交换机的操作步骤如下: 1.设置交换机管理ip Switch#conf t Switch(config)#int vlan ...