移動端點擊輸入框，彈出鍵盤，底部被頂起問題（vue）

 這個問題相信做移動端開發的童鞋會有深刻體會，以前用jq開發時就很頭疼這個問題，每次底部footer部分需要用position:fixed，如果頁面內容不是很長，沒有超出屏幕范圍，那就還好，沒有問題；一旦超出屏幕范圍，當你點擊輸入框，彈出鍵盤時，底部固定定位的footer部分就會被頂起來，很丑！有木有。

在鍵盤彈起時，頁面高度變小，底部固定定位上升，所以我們只需要在頁面高度變小時，隱藏底部footer部分，當鍵盤消失時再顯示底部footer部分就可以解決問題了。

解決方法：檢測瀏覽器的resize事件，當高度過小時就可以判定為出現這種情況，這時把定位改成absolute或者直接隱藏掉之類的。

第一步： 先在 data 中去 定義 一個記錄高度是 屬性

data () {
    return {
        docmHeight: document.documentElement.clientHeight,  //默認屏幕高度
        showHeight: document.documentElement.clientHeight,   //實時屏幕高度
        hidshow:true  //顯示或者隱藏footer
    };
  },

第二步： 我們需要將 reisze 事件在 vue mounted 的時候 去掛載一下它的方法

mounted() {
    // window.onresize監聽頁面高度的變化
    window.onresize = ()=>{
        return(()=>{
            this.showHeight = document.body.clientHeight;
        })()
    }
  },

第三步：watch監控比較，判斷按鈕是否該顯示出來

showHeight:function() {
        if(this.docmHeight > this.showHeight){
            this.hidshow=false
        }else{
            this.hidshow=true
        }
    }

第四步：在模板中給footer添加v-show

<div class="footer" v-show="hidshow">
      <div class="footerBtn">核驗</div>
</div>