使用vant 遇到的坑

1：解决移动端点击输入框input放大
在index.html加入

 

<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-s

2：vue+Vant项目实现一个计时功能，显示时分秒并且周围圆环变化，选用了Vant Circle组件，版本是^1.6.15。
bug：Circle组件在移动设备上的显示出现偏移。
场景：项目引用了rem(postcss-pxtorem)，开发后发现 计时器圆环 在iphone6及iphoneX显示正常，在其它机型或安卓端都会出现偏移。
原因：vant的源码里面要将transform-origin设置成固定的尺寸，
解决方式：在.postcssrc.js中，在propList里面加上’!transform-origin’就可以，例如propList: [’!transform-origin’]，就可以了。

3：在桌面端上模拟移动端 touch 事件，实现方式来自于 hammerjs/touchemulator.

在桌面端上模拟移动端 touch 事件，实现方式来自于 hammerjs/touchemulator.

Install

NPM

npm i @vant/touch-emulator -S

YARN

yarn add @vant/touch-emulator

使用指南

直接在代码中引入模块即可，模块会自动完成初始化并生效

import '@vant/touch-emulator';

CDN 引入

<script src="https://cdn.jsdelivr.net/npm/@vant/touch-emulator"></script>