移动端 小键盘问题 解决2

自定义指令 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);
    }
};