vue3 el-select实现触底加载更多(ts版)

思路

使用全局指令来实现触底加载功能

通过el-select中的popper-class给下拉框加入一个类名

在src下的utils文件夹中创建selectLoadMoreDirective.ts文件

import { Directive, DirectiveBinding } from 'vue'

const loadMore: Directive = {
  beforeMount(el: any, binding: DirectiveBinding) {
    console.log(el)
    const selectDom = (document.querySelector(".more_select_dropdown") as any).querySelector(".el-select-dropdown .el-select-dropdown__wrap");
    console.log(selectDom, 'selectDom++++++++++++++');

    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

 main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from '/@/router'
import loadMore from '@/utils/selectLoadMoreDirective'
 
const app = createApp(App)
app.use(router)
app.directive('loadMore', loadMore)

home.vue