Vue移动端input,textarea点击输入框，弹出软件键盘，底部被顶起问题

软件盘弹出引起底部被顶起问题

思路：通过监听屏幕高度，判断是否弹出软键盘，隐藏底部标签

直接上代码：

data () {
      return {
      docmHeight: window.innerHeight, //默认屏幕高度
      showHeight: window.innerHeight, //实时屏幕高度
      hidshow: true, //显示或者隐藏footer
      }
    },

    mounted() {
  // window.onresize监听页面高度的变化
    window.addEventListener('resize', () => {
      this.showHeight = window.innerHeight
      console.log('this.showHeight:' + this.showHeight);
      console.log('this.docmHeight:' + this.docmHeight);
      if (this.docmHeight - this.showHeight > 50) {
        //Android系统: 软键盘弹出 隐藏footer
        this.hidshow = false
      } else {
        //Android系统: 软键盘收起 显示footer
        this.hidshow = true
      }
    });
    },

 <div class="bottom-fixed" v-show="hidshow">
      <div class="storage" v-text="'取消'"  @click="handleReturn"></div>
      <div class="submit"  v-text="'提交'" @click="handleSubmit"></div>
    </div>

html标签根据自己的底部标签来，重点是 v-show="hidshow"