動態隱藏表單頁面的底部操作欄

• 業務場景：
  • 表單頁面很多輸入框，底部操作按鈕是提交表單且離開頁面的。
  • 失去焦點時，驗證錯誤，需要給用戶提示且給用戶改成正確的值。點擊該頁面底部操作按鈕也是失去焦點的一種情況。但希望用戶能看到提示且看到輸入框修改過的值。就要避免聚焦時候底部欄的展示。
• 安卓手機鍵盤彈出時，會發生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>