element-plus select 滚动加载更多

思路:监听select下拉面板的滚动事件,滚动到底部时,调用接口加载更多数据

一、自定义指令

import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {
    copyData: string | number;
    __handleClick__: any;
}

const loadmore: Directive = {
    mounted(el: ElType, binding: DirectiveBinding) {
        if (typeof binding.value !== "function") {
            throw "callback must be a function";
        }
        if (!binding.arg) {
            throw "需要传递给指令popper-class参数";
        }
        const SELECTDROPDOWN_DOM:ElType|null = document.querySelector(`.${binding.arg} .el-select-dropdown__wrap`);
        SELECTDROPDOWN_DOM?.addEventListener("scroll", function () {
            // scrollTop 这里可能因为浏览器缩放存在小数点的情况,导致了滚动到底部时
            // scrollHeight 减去滚动到底部时的scrollTop ,依然大于cl

你可能感兴趣的:(javascript)