Fork me on GitHub

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');
 };

 

posted @ 2023-04-28 16:33  欢欢11  阅读(891)  评论(0编辑  收藏  举报