解決移動端鍵盤彈起導致的頁面fixed定位元素布局錯亂

　　最近做了一個移動端項目，頁面主體是由form表單和底部fixed定位的按鈕組成，當用戶進行表單輸入時，手機軟鍵盤彈起，此時頁面的尺寸發生變化，底部fixed定位的元素自然也會上移，可能就會覆蓋頁面中的某些元素。具體情形，如下圖所示（按鈕將文字覆蓋了）：

　                

 

　解決方案：

　　上面提到，產生這種情況的原因是軟鍵盤彈起，窗口尺寸發生變化，那么就通過監聽尺寸的方式解決一下這個問題（當鍵盤彈出時，將按鈕隱藏；鍵盤收回時，將按鈕顯示出來）：

• data中聲明數據：

data() {
    return {
        docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
        hideshow:true  //顯示或者隱藏footer
    }
}

• 監聽頁面高度：

watch: {
    //監聽顯示高度
    showHeight:function() {
        if(this.docmHeight > this.showHeight){
            //隱藏
            this.hideshow=false
        }else{
            //顯示
            this.hideshow=true
        }
    }
},

mounted() {
    //監聽事件
    window.onresize = ()=>{
        return(()=>{
            this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
        })()
    }
}

• 設置元素的顯示與隱藏：

<el-button v-show="hideshow">確認操作</el-button>

　　

　　這樣，按鈕就能正常顯示了：