解决办法:软件盘弹起,隐藏按钮。收起时,再展示按钮
<template>
<button v-show="isOriginHei">按钮</button>
<template>
<script>
export default {
name: 'Vue',
data() {
return {
isOriginHei: true, // 按钮是否展示
screenHeight: document.documentElement.clientHeight, // 作为判断软件盘是否弹起的变量
originHeight: document.documentElement.clientHeight // 默认窗口高度
}
},
mounted() {
window.onresize = function() { // 每当窗口高度发生改变,就修改screenHeight
self.screenHeight = document.documentElement.clientHeight;
};
},
watch: {
// 检测这个变量的变化,如果默认窗口高度大于这个值,说明软件盘弹起
screenHeight(val) {
if (this.originHeight > val + 100) {
//加100为了兼容华为的返回键
this.isOriginHei = false; // 软件盘弹起,隐藏按钮
} else {
this.isOriginHei = true; // 软键盘收起,展示此按钮
}
}
}
</script>