h5软键盘弹起 底部按钮被顶起问题解决

解决思路：
当键盘弹起时隐藏掉按钮，键盘隐藏时按钮显示
监测键盘是否弹起（浏览器页面是否发生变化）
代码：
1、定义一个底部按钮

<div class="returnbtn" v-show="isOriginHei" :class="{active: canSubmit}" v-on:click="sendSubmit()">提交</div>

2、设置默认显示和两个屏幕的初始值(此处定义在vue的data中)

　　isOriginHei: true,
　　screenHeight: document.documentElement.clientHeight, //此处也可能是其他获取方法
　　originHeight: document.documentElement.clientHeight,

 

3、在mounted里面挂载检测浏览器变化

　　mounted() {
　　　　let self = this;
　　　　window.onresize = function() {
　　　　　　return (function(){
　　　　　　　　self.screenHeight = document.documentElement.clientHeight;
　　　　　　})()
　　　　}
　　}

 

4、在watch中监测屏幕变化

　　screenHeight (val) {
　　　　if(this.originHeight > val + 100) { //加100为了兼容华为的返回键
　　　　　　this.isOriginHei = false;
　　　　}else{
　　　　　　this.isOriginHei = true;
　　　　}
　　}

 

 

作者：kuke_kuke
来源：CSDN
原文：https://blog.csdn.net/qq_33599109/article/details/79086411