今天遇到这样一个问题：手机端输入表单信息时，键盘把底部的按钮顶起，这样就把一部分表单遮盖住了。
详情如下图：
可以看到，详细地址被遮盖住了，这样的用户体验肯定不好，解决办法如下：
通过将实时屏幕高度和默认屏幕高度进行比较，如果实时屏幕的高度大于默认屏幕高度，就将按钮隐藏，否则就显示按钮。
具体实现如下：
1.将底部设置为fixed
<div class="footer" v-show="hidshow"><a @click="save">保存地址</a></div>.footer {position: fixed;bottom: 0;width: 100%;height: 1.3rem;border-top: 1px solid #e0e0e0;background: #ffffff;a {display: block;margin: 0.18rem auto;text-align: center;width: 95%;height: 0.9rem;line-height: 0.9rem;border-radius: 0.45rem;font-size: 0.28rem;color: #fff;background-color: #17C169;}}
2.在data中定义两个高度，分别是实时屏幕高度和默认屏幕高度
data () {return {docmHeight: document.documentElement.clientHeight, //默认屏幕高度showHeight: document.documentElement.clientHeight, //实时屏幕高度hidshow:true //显示或者隐藏footer};},
3.在mounted里面进行监听
mounted(){// window.onresize监听页面高度的变化window.onresize = ()=>{return(()=>{this.showHeight = document.body.clientHeight;})()}},
4.用watch监控比较，判断按钮是否显示出来
watch:{showHeight:function() {if(this.docmHeight > this.showHeight){this.hidshow=false}else{this.hidshow=true}}}
这样就能很好的解决移动端点击输入框，键盘把底部的内容顶起这个问题了。
感谢我以为你不在乎这位朋友的帮助。
