解决ios 微信vue点击input标签两次才响应的问题

 背景：我们公司H5View项目使用的是VantUI，今天有个需求是做个带有搜索框的页面，按照之前的方式，引入van-search标签，开心的我以为已经搞定了。但是测试在测的过程中，发现在安卓设备上使用正常，ios设备上，input标签很难点击，焦点很难定位到输入框。

  经过在网上的搜寻，主要的解决方案有以下几种：

  1.input的z-index设置成1000，提高其层级

  2.检查样式中的设置是否有

    {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        box-sizing: border-box;
    }

  在设置之后，均无效果，ios中的input还是很难获取焦点。

  后续，我把重心放在了input标签上，使用<input>标签也还是会有这个问题（项目中使用的是van-search），所以我觉得这个应该和控件没啥关系。

  后来我发现，使用Safari浏览器，input标签可以正常获取焦点，所以，我分析可能是微信浏览器的内部点击延迟？

  就在此时，网上的一篇文章吸引了我的注意

  IOS微信浏览器点击延迟

  文章中提到了使用fastclick插件解决ios点击延迟的问题。

  但是我是用之后还是没啥用，后续，该框架的issues中的一个回答帮我解决了问题，

  传送门faskclick解决方案:

  在项目中，我在main.js中全局使用fastClick，在beforeMount方法中，解决了点击延时的问题。希望可以帮助到大家！

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"/>
  </div>
</template>

<script>
  import fastClick from 'fastclick'

  export default {
    beforeMount() {
      fastClick.attach(document.body)
      fastClick.prototype.focus = (ele) => {
        'use strict';
        ele.focus();
      }; //修改focus()方法
    },
    name: 'App'
  }
</script>

<style>
  html, body {
    -webkit-overflow-scrolling: touch;
  }
</style>