自定义指令 positionAdjust
/*
用于解决小键盘导致输入框被挡住的问题
*/
function adjustListener() {
// 延时执行,等键盘弹出界面页面resize完成
setTimeout(() => {
let { top: elTop, height: elHeight } = this.getBoundingClientRect();
let innerH = window.innerHeight;
let compareH = elTop - innerH;
let scrollDom = findScrollDom(this);
if (scrollDom) {
let paddingBottomStr = window
.getComputedStyle(scrollDom, null)
.getPropertyValue('padding-bottom');
let paddingBottom = parseInt(
paddingBottomStr.substring(0, paddingBottomStr.length - 2)
);
let needScrollTop = compareH + elHeight + 50 + paddingBottom;
if (compareH > -paddingBottom) {
scrollDom.scrollTop = scrollDom.scrollTop + needScrollTop;
}
}
}, 400);
}
function findScrollDom(dom) {
let overflow = window
.getComputedStyle(dom, null)
.getPropertyValue('overflow');
let overflowY = window
.getComputedStyle(dom, null)
.getPropertyValue('overflow-y');
if (overflow === 'auto' || overflowY === 'auto') {
return dom;
} else if (dom.getAttribute('id') === 'page_Container') {
// 已经递归到页面的根节点,结束递归
return null;
} else {
return findScrollDom(dom.parentNode);
}
}
export default {
bind(el, binding, vnode) {
el.addEventListener('click', adjustListener, false);
},
unbind(el) {
el.removeEventListener('click', adjustListener);
}
};