vue在移动端出现的问题以及解决方式

1. ios手机input点击无效不能点击
   出现原因:在ios11以上的手机中,当点击input后,若屏幕出现滚动条,在input失去焦点后,滚动条位置依然存在,造成点击的位置不对,不能点击
   解决办法在vue中自定义指令检测input失去焦点事件,在失去焦点时将滚动条复位.

main.js中加入如下代码
Vue.directive('resetPage', {
  inserted: function (el) {
    // 监听键盘收起事件
    document.body.addEventListener('focusout', () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // 软键盘收起的事件处理
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      }
    })
  }
})

input标签中加入这个指令
<input v-reset-page id="usermobile" placeholder="请输入手机号" v-model="phoneNum"  type="number" oninput="if(value.length>11) value=value.slice(0,11)" pattern="[0-9]*" />