解决Vue IOS调起键盘后页面底部留白的问题

在vue开发中遇到了一个非常棘手的一个问题，就是标题所说的，在一个地图沉浸页中需要调起键盘让用户输入手机号，但是IOS部分机型会在键盘收起的时候，弹上去的部分不能全部落下，导致屏幕下边留白，并且按键全部错位。

<input ref="input" v-reset-page v-focus type="tel"placeholder="请输入手机号码">

解决方法就是用到了vue的自定义指令，创建一个自定义指令让键盘收起时scroll强制变成0，问题就解决了。

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

此文是摘抄一位大佬的文章。

原文：https://juejin.cn/post/6844903854991998984