vue 监听 input框focus 后虚拟键盘的弹出和收起

1,首先创建一个 virtualkeyboard.js文件  文件名无所谓

/**
 *
 * @class 监听虚拟键盘
 * @classdesc 监听虚拟键盘弹出隐藏
 *  @public onEnd 结束监听虚拟键盘
 *  @public onShow 传递一个回调 监听虚拟键盘弹出
 *  @public onHidden 传递一个回调 监听虚拟键盘隐藏
 */
class VirtualKeyboard {
  /** @param 设备类型 1 安卓 2苹果  */
 

  constructor() {
    this.type = this.IsIA()
    this.originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight
  }

  /**
   * @function  onShow 传递一个回调函数
   * @param  虚拟键盘弹出时触发
   */
  onShow = (fn) => {
    this.show = fn
  }

  /**
   * @function  onHidden 传递一个回调函数
   * @param  虚拟键盘隐藏时触发
   */
  onHidden = (fn) => {
    this.hidden = fn
  }

  /**  @function onStart 开始监听虚拟键盘  */
  onStart = () => {
    if (this.type == 1) {
      //获取原窗口的高度
      window.addEventListener('resize', this.onResize)
    }
    if (this.type == 2) {
      // 苹果系统
      document.body.addEventListener('focusin', this.onFocusin)
      document.body.addEventListener('focusout', this.onFocusout)
    }
  }

  /** @function onEnd 结束 监听 虚拟键盘  */
  onEnd = () => {
    if (this.type == 1) {
      //获取原窗口的高度
      window.removeEventListener('resize', this.onResize)
    }
    if (this.type == 2) {
      document.body.removeEventListener('focusin', this.onFocusin)
      document.body.removeEventListener('focusout', this.onFocusout)
    }
  }

  IsIA = () => {
    if (/android/gi.test(navigator.appVersion)) {
      return 1 //安卓
    } else if (
      navigator.userAgent.indexOf('iPhone') != -1 ||
      navigator.userAgent.indexOf('iPod') != -1 ||
      navigator.userAgent.indexOf('iPad') != -1
    ) {
      return 2 // 苹果
    }
  }

  onResize = () => {
    //安卓系统
    //键盘弹起与隐藏都会引起窗口的高度发生变化
    let resizeHeight =
      document.documentElement.clientHeight || document.body.clientHeight

    if (this.originalHeight - resizeHeight > 50) {
      //当软键盘弹起，在此处操作

      this.show('安卓系统: 当软键盘弹起，在此处操作')
    } else {
      //当软键盘收起，在此处操作
      this.hidden('安卓系统: 当软键盘弹起，在此处操作')
    }
  }
  // 苹果获取焦点
  onFocusin = () => {
    //软键盘弹出的事件处理
    this.show('苹果系统:软键盘弹出的事件处理')
  }

  // 苹果失去焦点
  onFocusout = () => {
    //软键盘收起的事件处理
    this.hidden('苹果系统:软键盘收起的事件处理')
  }
}

export default VirtualKeyboard

2,在需要的页面引入上面创建的js

import VirtualKeyboard from '../plugin/watchKeyBorad'  //这是自己的路径
//然后在周期函数内引入函数即可我是写在mounted函数中的
mounted(){
  this.virtualKeyboard = new VirtualKeyboard() //创建对象
  this.virtualKeyboard.onStart()    //开始监听
//监听虚拟键盘弹出事件
    this.virtualKeyboard.onShow(() => {  
//处理事件  
        console.log('虚拟键盘弹出要执行的事件')
     })
//监听键盘收起的事件
   this.virtualKeyboard.onHidden(() => {
          console.log('键盘收起事件')
        })


}

3,在离开页面的时候一定要注销 监听事件  不然会导致内存泄露

  destroyed(){
        // 一般写在页面卸载或组件卸载的生命周期
        this.virtualKeyboard.onEnd()
    },