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>