手机端软键盘将底部固定样式顶起

本文主要是为了解决当在手机底部书写固定样式时，用户调用软键盘，会导致固定样式被顶起，导致样式错位的问题。

1.HTML代码

<div class="footer" v-show="showFooter"></div>
<style>
.footer{
    width:100%;
    height:10%;
    /* position:fixed */
    position:absolute;
    bottom:10px;
}
</style>

2.vue.js代码

// js 部分
<script>
    export default {
        data(){
            return {
                docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
                showHeight:'',   //实时屏幕高度
                hideshow:true,  //显示或者隐藏footer
            }
        },
        mounted() {
            // window.onresize监听页面高度的变化
            window.onresize = ()=>{
                return(()=>{
                this.showHeight = document.body.clientHeight;
                })()
            }
        },
        watch:{
            showHeight:function() {
                if(this.docmHeight > this.showHeight){
                    this.showFooter=false
                }else{
                    this.showFooter=true
                }
            }
        },
    }
</script>