1：解决移动端软键盘弹起底部固定布局被顶上去问题
在前端页面布局中经常会把一些按钮通过fixed或absolute固定到底部，但如果页面上有input或textarea被点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去，有时会十分影响美观，下面是在Vue项目中如何通过隐藏的方式实现不被顶上去的
实现步骤
1. 在mounted中添加对resize屏幕变化监听并获取到屏幕原始高度
2. 在watch中添加对data中定义的屏幕高度的监听
-----------2.1：小于原始高度底部布局就隐藏，否则就显示
3. 在beforeDestroy中删除对resize屏幕变化的监听
完整代码
<template><div class="wrapper"><input type="text" class="input"><span class="btn" @click="btnClick" v-show="isShow">跳转下一步</span></div>
</template><script>export default {name: "Demo",data() {return {originalHeight: 0, //原始高度screenHeight: 0, //实时高度isShow: true,}},mounted() {//首次进入的原始高度this.originalHeight = document.documentElement.clientHeight;window.addEventListener('resize', this.watchResize);},beforeDestroy() {window.removeEventListener("resize", this.watchResize);},watch: {screenHeight(newHeight) { //监听屏幕高度变化this.isShow = this.originalHeight <= newHeight;}},methods: {watchResize() {//实时变化的窗口高度this.screenHeight = document.documentElement.clientHeight;},btnClick() {this.$router.push({path: "/home2"})}}}
</script><style scoped lang="less">.wrapper {position: relative;width: 100%;height: 100%;background: #eee;.input {display: inline-block;height: 60px;margin: 10px;border: 2px solid #00ff00;}.btn {position: fixed;left: 50%;bottom: 3%;margin-left: -150px;width: 300px;height: 40px;text-align: center;line-height: 40px;background: chocolate;}}
</style>
注意事项
1：在项目中如果使用window.onresize的方式对屏幕进行监听时，则这种监听是全局的监听，如果不注销则对其他页面屏幕的变化也会进行监听，所以必须在beforeDestroy中进行注销
mounted() {window.onresize = () => {this.screenHeight = document.documentElement.clientHeight;};},beforeDestroy() {window.onresize = () => {}},
2：通过addEventListener方式对resize进行监听，通过手机验证如果不注销也不会影响其他页面，但是最好我们都写上
2：解决安卓手机上调出软键盘，屏幕背景图被压缩的问题
在Vue项目的App.vue类中添加如下代码：
<script>export default {name: "app",created() {var height= document.documentElement.clientHeight; //获取当前可视区域的高度window.onload = function(){ //在页面整体加载完毕时document.getElementById('app').style.height= height + 'px'//给根布局设置高度}}}</script>
vue代码：
<div class="wrapper" id = "demo"><input type="text" class="input"></div>.wrapper {position: relative;width: 100%;height: 100%;background: url("../public/static/images/demo.png") no-repeat center;background-size: cover;}
这样设置后，当软键盘弹起时，如果未遮挡获取焦点的元素，则背景图不会动，如果软键盘遮挡了获取焦点的元素，则背景图和图上的元素都会整体往上移动，而不会对背景图进行压缩。
注意事项
1: 有时候我们想直接在vue代码中直接控制最外层标签的高度不就可以吗，这样也不用全局设置了，如
created() {this.originalHeight = document.documentElement.clientHeight;window.onload = function () { //加不加window.onload都是不可以的document.getElementById('demo').style.width = '100%'; //不会生效，而宽度由内部标签撑开document.getElementById('demo').style.height = this.originalHeight + 'px'; //不会生效，而高度由内部标签撑开document.getElementById('demo').style.background = "url('static/images/demo.png') no-repeat center";document.getElementById('demo').style.backgroundImage = "cover";}},
样式为：
.wrapper {position: relative;}
实践证明这样是不可以的，虽然originalHeight获取到的是可视区的大小，但是把高度设置给最外层标签后并不会生效，而是最外层标签的高度和宽度都是由其内部标签高度和宽度决定的。如图加不加window.onload都是不可以的。
2: 我们能不能在代码中设置id为app标签的高度呢？如
created() { //注意这里设置高度不加 window.onload (加上就不可以了)this.originalHeight = document.documentElement.clientHeight;document.getElementById('app').style.height = this.originalHeight + 'px';},
vue代码：（其实和上面一样）<div class="wrapper" id = "demo"><input type="text" class="input"></div>.wrapper {position: relative;width: 100%;height: 100%;background: url("../public/static/images/demo.png") no-repeat center;background-size: cover;}
这种方式是可以的，但这种方式设置后也是全局的，也就是对所有页面都会生效，如果你偏要只在当前页面有效的话，那可以在适当的位置再重置根布局高度，如：
document.getElementById('app').style.height = 'auto';
