Vue安卓端软键盘弹出后，底部绝对定位顶上来之前写页面的时候发现在安卓端使用input的时候软键盘弹出后底部绝对定位的模

之前写页面的时候发现在安卓端使用input的时候软键盘弹出后底部绝对定位的模块都会被软件键盘顶上来。

因为我用的是Vue我就直接说下在Vue怎么解决的吧

方法一：

<template> 
 <div id="app">
    <input type="text">
    <footer v-show="isShowBottom">test</footer>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      isShowBottom: true,  //显示或者隐藏footer
      documentHeight: document.documentElement.clientHeight,  //默认屏幕高度
     }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        if(this.documentHeight>document.documentElement.clientHeight){
          this.isShowBottom = false
        }else{
          this.isShowBottom =true
        }
      })()
    }
  }
}
</script>
<style>
footer{
  position: fixed;
  bottom: 20px;
}
</style>

其实就是当出现软键盘的时候高度尺寸变了，软键盘那部分不属于页面了。绝对定位的页面底部不是手机底部而是软键盘上方的页面底部。

这种方式是在页面加载时先记录原先页面高度，当高度变小时就是软键盘弹出的时候这时将绝对定位那部分隐藏即可。