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();
  }
};

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