vue手机端开发聚焦不灵敏

vue手机端开发聚焦不灵敏

前置：

手机端开发时有时使用UI框架中的输入框或者文本域在点击的时候聚焦不是很快速。因为一是有的控件带有动画过度效果，二是移动设备的屏幕点击事件大多会延迟300ms左右才会触发（所有版本的Android Chrome浏览器，如果设置viewport meta的值有user-scalable=no，浏览器也是会马上触发点击事件没有延迟），这是因为为了检查用户是否在做双击。

解决：

当然更优更好的解决方案有很多，此处记录的只是我自己解决此问题的一种方法。使用 fastclick

需要详细了解的可以看下这位大神的透彻讲解：https://www.cnblogs.com/ylweb/p/10549040.html

1.可以直接引用也可以npm引入，因为是vue项目开发的直接使用npm方式了

npm install fastclick --save

也可以使用标签引入（未测试）：

<script type='application/javascript' src='/path/to/fastclick.js'></script>

2.在main.js中引入并使用

import FastClick from 'fastclick' FastClick.attach(document.body); FastClick.prototype.focus = function (targetElement) { var length; if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') { length = targetElement.value.length; targetElement.focus(); targetElement.setSelectionRange(length, length); } else { targetElement.focus(); } };

至此，我的问题解决，希望对你有帮助！