vue 监听手机键盘是否弹出及input是否聚焦成功

//定义移动端类型
function pageStats() {
  let u = navigator.userAgent,
    app = navigator.appVersion;
  let obj = {};
  obj.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
  obj.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  return obj;
}

//监听手机键盘是否弹出
function keyboard(res,size) {
  let deviceType = pageStats();
  if (deviceType.isiOS) {
    setTimeout(function () {
      let aaa = document.body.scrollTop;
      console.log(aaa);
      console.log(size.scrollTop);
      if (aaa !== size.scrollTop) {
      } else {
       //ios端弹出失败回调
        }, msg => {
        });
      }
      console.log(aaa !== size.scrollTop); //true 键盘弹出成功
    }, 1000)
  }
  if (deviceType.isAndroid) {
    setTimeout(function () {
      let bbb = document.body.clientHeight;
      console.log(bbb);
      console.log(size.windowHeight);
      if (bbb !== size.windowHeight) {
      } else {
        //安卓端弹出失败回调
        }, msg => {
        });
      }
      console.log(bbb !== size.windowHeight); //true 键盘弹出成功
    }, 1000)
  }
}

//手机号输入框获取焦点是否成功
export function clickInput(res) {
  let size = {
    windowHeight: res.windowHeight,
    scrollTop: res.scrollTop
  };
  res.hasFocus = document.hasFocus() && document.activeElement === res.$refs.phone;
  if (res.hasFocus) {
    console.log('input聚焦成功');
    keyboard(res,size);  //键盘是否弹出
  } else {  //TODO
   //聚焦失败回调
    console.log('input聚焦失败');
  }
}

//写入一个js文件  在组件中引用并传值

 

例:

 <input type="tel" ref="phone"  @click="clickInput"/>

<script>
  import {clickInput} from '../../assets/js/js文件名';

  export default {
    data() {
      return {
        deviceType: null,
        scrollTop: 0,
        windowHeight: 0
      }
    },
    methods: {
      clickInput(){
        clickInput(this)
      },
      getSize () {//TODO 原生JS获取
        this.scrollTop = document.body.scrollTop;//document.body.scrollTop() jquery;//用于ios键盘监听
        this.windowHeight = document.body.clientHeight;//document.window.offsetHeight() jquery ;//用于Android键盘监听
      },

    },
 
    mounted() {
      this.getSize();
    },
}