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 @   欢欢11  阅读(1351)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示