Vue 点击输入框，会将底部按钮或者图标上浮

在前端移动端开发中，可能会遇到如下问题：

页面下方有按钮或者图标的时候，我们点击输入框，数字键盘就会将其上浮。

在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部footer部分，当键盘消失时再显示底部footer部分就可以解决问题了

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

我这边是通过自定义指令实现的

目录结构：

footer.ts中代码

const footer = {
  inserted(el, binding, vnode) {
    if (!el.windowHeight) el.windowHeight = document.documentElement.clientHeight
    window.addEventListener('resize', () => {
      let showHeight = document.documentElement.clientHeight
      let windowHeight = el.windowHeight//默认屏幕高度
      if (windowHeight > showHeight) {
        el.style.display = 'none'
      } else {
        el.style.display = ''
      }
    })
  }
}
export default footer

index.ts代码

import footer from './footer'
export default {
  install: function (Vue) {
    Vue.directive('footer', footer)
  }
}

如果还有其他自定义的指令，直接在directives文件夹中新建文件写，在index文件中引入注册即可

main.ts中全局引入

import directives from '@/directives' // 指令
Vue.use(directives)

页面中使用

在会上浮的元素上直接加上：v-footer 即可

<footer class="unite-footer"  v-footer>
  <div @click="setInfo">
    <img src="@/assets/ImgForm/circular.png">
    <span>保存</span>
  </div>
</footer>