加载更多指令

/**
 * @desc dom 触底加载 可用于 el-table 和其他 el/dom 元素
 * @example v-load-more:[selector]="loadMore"
 * @example this.selector = 'xxx'
 */
export default {
    bind (el, binding) {
        const selector = binding.arg || '.el-table__body-wrapper';
        const dom = el.querySelector(selector);
        function handler (e) {
            /**
                 * scrollHeight 获取元素内容高度(只读)
                 * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的 scrollTop 的值默认为 0.
                 * clientHeight 读取元素的可见高度(只读)
                 * 如果元素滚动到底, 下面等式返回 true, 没有则返回 false:
                 * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                 */
            const condition = Math.ceil(this.scrollHeight) - Math.ceil(this.scrollTop) <= Math.ceil(this.clientHeight);
            if (condition) {
                typeof binding.value === 'function' && binding.value(e);
            }
        }
        if (dom) {
            dom.addEventListener('scroll', handler);
            el.__loadmore__handler__ = handler;
            el.__dom__ = dom;
        }
    },
    unbind (el) {
        el.__dom__.removeEventListener('scroll', el.__loadmore__handler__);
        delete el.__loadmore__handler__;
        delete el.__dom__;
    }
};