处理输入法挡住输入框

定义指令

let timer = null;
Vue.directive('fixKeyBoardBug', {
  inserted(el) {
    const fixKeyBoardBugFocus = function () {
        timer && clearTimeout(timer);
        timer = setTimeout(() => {
          const {top, height} = el.getBoundingClientRect()
          const st = top + height - window.visualViewport.height + 50
          if (st > 0) {
            window.scrollTo(0, st);
          }
        }, 300);
    };
    const fixKeyBoardBug = function () {
        timer = setTimeout(() => {
            var scrollTop = window.scrollTop;
            window.scrollTo(0, 0);
            setTimeout(() => {
                window.scrollTo(0, scrollTop);
            }, 0);
        }, 100);
    };
    el.addEventListener('blur', fixKeyBoardBug);
    el.addEventListener('focus', fixKeyBoardBugFocus)
  }
});

使用

      <input v-fixKeyBoardBug type="tel" maxlength="11" placeholder="请输入手机号" />