基于element-plus的选择组件el-select实现下拉加载封装

 在vue3项目当中使用element-plus的UI组件el-select选择器，有时候会用到选择器下拉下载的功能，封装一个指令可以进行这样操作。

在main.ts 当中封装v-loadmore指令：

app.directive('load-more', {
  updated(el, binding) {
    const trigger: HTMLElement = el.querySelector('.select-trigger')!;
    const id: string = trigger.getAttribute('aria-describedby')!;
    if (id) {
      const popper: HTMLElement = document.getElementById(id)!;
      const selectWrap: HTMLElement = popper.querySelector(
        '.el-scrollbar .el-select-dropdown__wrap'
      )!;
      /**
       * scrollHeight 获取元素内容高度(只读)
       * scrollTop 获取或者设置元素的偏移值,
       *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
       * clientHeight 读取元素的可见高度(只读)
       * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
       * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
       */
      // 提前1个元素加载数据
      selectWrap.addEventListener('scroll', () => {
        const { scrollHeight, scrollTop, clientHeight } = selectWrap;
        const conditon = scrollHeight - scrollTop - 34 < clientHeight;
        if (conditon) {
          binding.value();
        }
      });
    }
  }
});

在组件当中使用：

      
        

          {{ item.tokenName }}
          

            
              {{ item.balance }}
            
            
              {{ item.tokenSymbol }}
            
          
        
      
    

加载函数：

const handleEcoScroll = () => {
  if (scrollLoad.value) {
    return;
  }
  const totalHistory = tokenList.pageNum.total;
  console.log(totalHistory);
  const { page } = tokenList.pageNum;
  console.log(' ~ file: CrossIn.vue:143 ~ handleEcoScroll ~ page:', page);
  const { limit } = objToken.value;
  const num = Math.ceil(totalHistory / limit);
  console.log(num);
  if (num > page) {
    objToken.value.page += 1;
    console.log(objToken.value.page);
    handleTokenList(chainName, objToken.value);
  }
};