动态隐藏表单页面的底部操作栏

• 业务场景：
  • 表单页面很多输入框，底部操作按钮是提交表单且离开页面的。
  • 失去焦点时，验证错误，需要给用户提示且给用户改成正确的值。点击该页面底部操作按钮也是失去焦点的一种情况。但希望用户能看到提示且看到输入框修改过的值。就要避免聚焦时候底部栏的展示。
• 安卓手机键盘弹出时，会发生resize事件。利用这个事件处理。

// index.vue

<template>
	<div ref="pageBody">
		<div>列表区域</div>
		<div class="shop-balance-bar" v-show="!hideBtn">底部区域</div>
	</div>
</template>

<script>
	data() {
		hideBtn: false
	},
	mounted() {
		if (sessionStorage.viewHeight == undefined) {
	        sessionStorage.viewHeight = window.innerHeight
	     }
		this.$nextTick(() => {
			this.registerResizeEvent()
		})
	},
	methods: {
		registerResizeEvent() {
			 if (this.sys == 'android') {
	  		   let _this = this;
			   let windheight = sessionStorage.viewHeight
			   window.addEventListener('resize', function() {
			     let docheight = window.innerHeight;
			     if(docheight < windheight){
			       _this.hideBtn = true;
			     } else {
			       _this.hideBtn = false;
			       // 这里尝试了用if (window === top) && window.blur()， 但是不生效
			       let pageBody = _this.$refs.pageBody
			       let ipt = pageBody.getElementsByTagName('input')
			       for(let i =0;i<ipt.length;i++) {
			         ipt[i].blur()
			       }
			     }
			   })
			 }
		}
	}
<script>