vue3自定義指令實現el-select下拉加載更多

1. 新建js文件
export default (app) => {
  app.directive('loadmore', {
    beforeMount(el, binding) {
      const element = el.querySelector('.t-select__dropdown');
      element.addEventListener('scroll', () => {
        const { scrollTop, scrollHeight, clientHeight } = element;
        const scrollDistance = scrollHeight - scrollTop - clientHeight;
        if (scrollDistance <= 0) {
          binding.value();
        }
      });
    },
  });
};

2. mian.js註冊
import drgDirectives from './utils/directive/loadmore';
drgDirectives(app);

3. 使用
<el-select
  v-model="val"
  v-loadmore="loadmore"
  filterable
  :options="options"
  clearable
/>

  const loadmore = () => {

   console.log('觸底的時候觸發loadmore');

 };