vue移动端键盘弹起隐藏底部按钮

<div class="buttom" v-show="isShow"> </div>

基本思路是通过监听屏幕的高度来改变底部的显示 / 隐藏
首先：在 data 中获取屏幕的默认以及实时高度 —->

data() {
return {
    isShow:true,// 按照标准隐藏
    domHeight: document.documentElement.clientHeight,  // 默认屏幕高度
    showHeight: document.documentElement.clientHeight,   // 实时屏幕高度
}

然后实现监听事件(监听高度变换从而改变 isShow 的值)

  showHeight() {if (this.domHeight > this.showHeight) {this.hidshow = false;} else {this.hidshow = true;}
    }

最后再 mounted(需要注意换取的哪里的高度)移动端建议是可见区域
document.body.clientWidth ==> BODY 对象宽度
document.body.clientHeight ==> BODY 对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

 window.onresize = () => {return (() => {this.showHeight = document.documenElement.clientHeight;// 这里需要注意一下可视区高度。})();};