乐趣区

关于前端:Vue-点击输入框会将底部按钮或者图标上浮

jiezi

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

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

在键盘弹起时，页面高度变小，底部固定定位回升，所以咱们只须要在页面高度变小时，暗藏底部 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>
退出移动版