用vue3做el-select下拉加载时遇到了很多问题,以前vue2的时候定义一个指令然后很容易就实现了这个功能,但是前两天用vue3的时候遇到了很多坑,不是报错就是根本没反应,也是摸索了好久才实现了,简单记录一下
1.在项目中新建文件,并添加核心代码
2.在main.js中注册指令
3.在页面中使用
好了,下拉加载大致功能就实现了,亲测有效。当然为了更好的用户体验,实现该功能的同时,一般会加上搜索功能,注意添加防抖节流防止频繁调用。
最后附上下拉加载功能核心代码
import { Directive, DirectiveBinding } from 'vue'
const loadMore: Directive = {
beforeMount(el: any, binding: DirectiveBinding) {
const selectDom = (document.querySelector(".more_select_dropdown") as any).querySelector(".el-select-dropdown .el-select-dropdown__wrap");
function loadMores(this: any) {
const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
if (isBase) {
binding.value && binding.value()
}
}
el.selectDomInfo = selectDom
el.userLoadMore = loadMores
nextTick(() => {
selectDom?.addEventListener('scroll', loadMores)
})
},
beforeUnmount(el: any) {
if (el.userLoadMore) {
el.selectDomInfo.removeEventListener('scroll', el.userLoadMore)
delete el.selectDomInfo
delete el.userLoadMore
}
}
}
export default loadMore