vue3自定义指令实现el-select下拉加载更多

发布时间 2023-04-28 16:39:09作者: 欢欢11
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');
 };