Vue3封装指令:el-select滚动分页加载

2024-12-11  本文已影响0人  Ving

下述代码只演示了 el-select 的滚动加载。其他属性 如 loading、remote、 filterable 等,若需要可自行添加

1、添加 el-select 的 poper-class 属性自定义l类名,用于定位元素(需与selectScroll.js文件中类名一致

<el-select  :popper-class="'my-select-scroll'"></el-select>

2、封装指令 selectScroll.js

/**
 * 自定义指令:el-select 滚动加载 
 */
// directives/selectScroll.js
import { nextTick } from 'vue';

export default {
    mounted(el, binding) {
        let debounceTimer = null;

        // 定义一个函数来设置滚动监听器
        const setupScrollListener = (dropdownEl) => {
            if (!dropdownEl) return;

            const handleScroll = async () => {
                // 清除之前的定时器
                if (debounceTimer) {
                    clearTimeout(debounceTimer);
                }

                // 设置新的定时器,等待用户停止滚动后再执行加载逻辑
                debounceTimer = setTimeout(async () => {
                    // 当滚动到底部附近时
                    if (dropdownEl.scrollTop + dropdownEl.clientHeight >= dropdownEl.scrollHeight - 50) {
                        if (typeof binding.value === 'function') {
                            await binding.value();
                        }
                    }
                    // 清除定时器
                    debounceTimer = null;
                }, 200); // 防抖延迟时间,单位为毫秒
            };

            // 绑定监听事件
            dropdownEl.addEventListener('scroll', handleScroll);
            // 将取消函数保存到 el 上,以便稍后可以移除监听器
            dropdownEl._handleScroll = handleScroll;
        };

        // 监听 el-select 的打开事件以添加滚动监听器
        if (el) {
            // 此处绑定的是点击事件,若有其他情况,如focus事件,需自行处理
            el.addEventListener('click', async () => {
                // 确保下拉菜单已经渲染
                await nextTick();
                // 通过 自定义类名 找到目标元素
                const mySelect = document.querySelector('.my-select-scroll');
                if (mySelect) {
                    // 查找对应的下拉框元素
                    const dropdownEl = mySelect.querySelector('.el-select-dropdown__wrap');
                    // 绑定滚动监听器
                    setupScrollListener(dropdownEl);
                }
            });
        }

        // 移除滚动监听器的方法
        const removeScrollListener = (dropdownEl) => {
            if (dropdownEl && dropdownEl._handleScroll) {
                dropdownEl.removeEventListener('scroll', dropdownEl._handleScroll);
                delete dropdownEl._handleScroll;
            }
        };

        // 确保在组件卸载时移除监听器
        el._removeListeners = () => {
            const dropdownEl = document.querySelector('.my-select-scroll .el-select-dropdown__wrap');
            removeScrollListener(dropdownEl);
        };
    },
    beforeUnmount(el) {
        if (el._removeListeners) {
            el._removeListeners();
            delete el._removeListeners;
        }
    }
};

3、注册指令

import App from './App'
import selectScroll from './common/selectScroll'
const app = createApp(App)
// 注册下拉滚动指令
app.directive('selectScroll', selectScroll)

4、使用指令

<template>
    <el-select 
        v-model="value" 
        :popper-class="'select-scroll'" 
        v-selectScroll="handleSelectScroll"
    >
        <el-option v-for="item in list" :key="item.value" :label="item.label" :value="item.value>
        </el-option>
    </el-select>
</template>

<script setup>
const params = ref({
    pageNum: 1,
    pageSize: 10,
})
const value = ref("")
const list = ref([])

// 下拉框加载更多
async function handleSelectScroll() {
    /**
     * 自行处理请求数据,需要注意的是此处 list.value 赋值要用 cancat 或者 push
     */
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读