[ Vue ] 解决移动端开发中由于虚拟键盘弹出导致fixed布局失效的问题

1. 背景：使用Vue.js做移动端App开发，使用了Vant框架，编辑器WebStrom，真机测试为MI PAD 4。

2. 问题：

如图所示："技术支持...''使用了fixed布局，但是在点击输入框进行输入时，fixed布局随着键盘弹出被移动位置。

3. 产生原因：查阅了一些资料后发现，该情况在安卓机中存在，IOS系统不会出现该问题，原因可能与键盘弹出的机制有关系，更详细的原因未深究。

4. 解决思路：当键盘弹出时，设置底部Fixed布局元素不显示，即v-show='false'

5. 解决方法：

主要代码：

 data() {
   return {
     ...
     docmHeight: document.documentElement.clientHeight, // 默认屏幕可视高度
     showHeight: 0, //body元素高度
     isShow: true, //显示或隐藏
   }
 },
 mounted() {
   // window.onresize监听页面高度的变化
   window.onresize = () => {
   return(()=>{
     this.showHeight = document.body.clientHeight
     })()
   }
 },
 watch: {
   showHeight() {
     if(this.docmHeight > this.showHeight){
       this.isShow = false
     }else{
       this.isShow = true
     }
   }
 }

底部元素代码：

<div class="bottom" v-show="isShow">技术支持：中国矿业大学环测学院</div>

样式：

.bottom {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 10px;

    text-align: center;
    font-size: 14px;
  }

记于2020.5.18