在作手机端的表单提交的时候,在chrome浏览器调试的时候,忘记输入法会引发布局的问题。在webApp里input输入框,会自动调起输入法,可是输入法会改变浏览器的可视区域的大小。就是会把浏览器可视区域的内容变小,由于输入法要占地方。一开始不知道怎么解决了,查了写资料,网上说是监控resize,当页面发生变化的时候,会触发该事件;哈哈,这就好办了...vue
开始按钮的显示是这样的, 在填写银行帐号的时候,还会影响文本框的输入...web
由于我使用的是vue2.x,那么就在mounted钩子函数里监听该事件:chrome
btnShow 实在data里声明的变量,默认是true(其实也能够动态改变 :style 来隐藏或显示,也能够设置z-index=-1来改变按钮的显示状态);当监控的resize发生变化的时候,实时的获取浏览器的高度(newHigh);在和这个页面的实际高度(oldHigh)对比,若是 newHigh 小于 oldHigh 说明浏览器的高度被输入法遮挡了一部分;这个时候,能够让button隐藏;反之显示;浏览器
实现的效果以下:函数
基本实现了本身的需求...布局