当我们写一个页面有键盘弹起且底部按钮fixed时你会发现点击输入框是底部按钮会弹起,网上很多方法但是只适用于对应的场景,今天我们来学习一种Vue 页面的键盘弹起。
解决办法:
换个思路,检测浏览器的resize事件,当高度过小时就可以判定为出现这种情况,这时把定位改成ab或者直接隐藏掉之类的。
方法一
1
| <mt-button v-show="isOriginHei" class="add-client" type="default" size="large" @click.native="submitClientInfo"><icon-svg iconClass="baocun" class="icon-xinzeng"></icon-svg>提交</mt-button>
|
第一步: 先在 data 中去 定义 一个记录高度是 属性
1 2 3 4
| data: { screenHeight: document.body.clientHeight originHeight: document.body.clientHeight }
|
第二步: 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
1 2 3 4 5 6 7 8 9
| mounted () { const that = this window.onresize = () => { return (() => { window.screenHeight= document.body.clientHeight that.screenHeight= window.screenHeight })() } }
|
第三步: watch 去监听这个 属性值的变化,如果发生变化则讲这个val 传递给 this.screenHeight
1 2 3 4 5
| watch: { screenHeight(val) { this.screenHeight= val } }
|
watch监控比较,判断按钮是否该显示出来
1 2 3 4 5 6 7 8 9
| watch: { screenHeight (val) { if(this.originHeight != val) { this.isOriginHei = false; }else{ this.isOriginHei = true; } } }
|
方法二
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| let listenAction; let originalHeight; let currHeight; export default new Object().install = (Vue, options = {}) => { Vue.directive('foot', { insert(el, binding) { const elStyle = el.style; let active = false; originalHeight = document.body.clientHeight; const reset = () => { if(!active) { return ; } elStyle.display = 'flex'; active = false; } const hang = () => { if(active) { return ; } elStyle.display = 'none' active = true; } const getCurrHeight = () => { let getHeight = document.body.clientHeight; return getHeight; } const check = () => { currHeight = getCurrHeight(); if(currHeight != originalHeight) { hang(); }else { reset(); } } listenAction = () => { check() } window.addEventListener('resize', listenAction); }, unbind() { window.removeEventListener('resize',listenAction); } }) }
|
步骤二:组件引用
1 2
| import Foot from 'libs/foot' Vue.use(Foot)
|
步骤三:指令使用
1 2 3 4
| <m-flex class="pay-group" v-foot> <m-flex-item class="should-pay">应付金额:<span>¥99</span></m-flex-item> <m-button @click="goPay" class="pay-btn">去支付</m-button> </m-flex>
|