vue键盘抬起_vue移动端--键盘弹起（隐藏底部按钮）

基本思路是通过监听屏幕的高度来改变底部的显示/隐藏

首先：在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;//这里需要注意一下可视区高度。

})();

};