vue移动端点击输入框，弹出键盘,遮挡输入框

vue移动端点击输入框，弹出键盘,遮挡输入框

1.在 data 中去定义记录高度的变量

data () {
    return {
        defaultHeight: '0',  //默认屏幕高度
        nowHeight:  '0',  //实时屏幕高度
    };
  },

2. 在 mounted 中获取默认高度和屏幕高度

mounted() {

          //获取默认高度
           this.defaultHeight = $(window).height();
            window.onresize = () => {
            return (() => {
                //实时屏幕高度
                this.nowHeight =$(window).height();
            })();
            };
  },

3.：watch监听比较默认高度和屏幕高度，判断键盘是否弹出

watch:{
nowHeight:function() {//这里注意函数名为要监听的属性
              if(this.defaultHeight!= this.nowHeight){
                    //键盘弹出操作
                    setTimeout(()=>{
                        document.activeElement.scrollIntoView(false)//焦点所在元素移动到可视区域并位于底部，可选择顶部、居中
                         //底部若是被挡住可以向上滚动一定距离
                          let scrollTop=document.body.scrollTop
                        window.scrollTo(0, scrollTop+100);
                    },200)
                }else{
                        //键盘收起操作
                }
    }
}

瑕疵:

如果密码框是一些安全键盘比如小米安全键盘,键盘还是会挡住输入框!
还请各位大佬赐教!