解决移动端软键盘弹出顶起页面样式问题

<template>
  <div class="app">
      <input type="text" />
      <div class="btn" v-if="isShow"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      //默认屏幕高度
      docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
      //实时屏幕高度
      showHeight: document.documentElement.clientHeight || document.body.clientHeight,
      //显示或者隐藏定位元素
      isShow: true
    }
  },
  
  mounted () {
    //开始监听
    window.addEventListener('resize', this.listenResize);
  },
  
  watch: {
    //改变高度，就判断是否显示高度是否小于屏幕高度
    showHeight: function () {
      if (this.docmHeight > this.showHeight) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    }
  },
  
  methods: {
    listenResize () {
      this.showHeight = document.body.clientHeight;
    }
  },
  
  beforeDestroy () {
    window.removeEventListener('resize', this.listenResize); // 销毁
  },


}
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 100vh;
  background-color: #f6f6f6;
  
  .btn {
    width: 50%;
    height: 50px;
    background-color: rgb(255, 255, 255);
    position: fixed;
    bottom: 0;
  }
}
</style>