当我们写一个页面有键盘弹起且底部按钮fixed时你会发现点击输入框是底部按钮会弹起，网上很多方法但是只适用于对应的场景,今天我们来学习一种Vue 页面的键盘弹起。

解决办法：
换个思路，检测浏览器的resize事件，当高度过小时就可以判定为出现这种情况，这时把定位改成ab或者直接隐藏掉之类的。

方法一

<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 中去 定义 一个记录高度是 属性

data: {
    screenHeight: document.body.clientHeight// 这里是给到了一个默认值 （这个很重要），
    originHeight: document.body.clientHeight//默认高度在watch里拿来做比较
}

第二步： 我们需要 讲 reisze 事件在 vue mounted 的时候 去挂载一下它的方法

mounted () {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenHeight= document.body.clientHeight
                    that.screenHeight= window.screenHeight
                })()
            }
        }

第三步： watch 去监听这个 属性值的变化，如果发生变化则讲这个val 传递给 this.screenHeight

watch: {
            screenHeight(val) {
                this.screenHeight= val
            }
        }

watch监控比较，判断按钮是否该显示出来

watch: {
            screenHeight (val) {
                if(this.originHeight != val) {
                    this.isOriginHei = false;
                }else{
                    this.isOriginHei = true;
                }
            }
        }

方法二

步骤一：定义一个指令 foot

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);
    }
  })
}

步骤二：组件引用

import Foot from 'libs/foot'
Vue.use(Foot)

步骤三：指令使用

<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>