基于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();
        }
      });
    }
  }
});

在组件当中使用：

<el-select
      v-model="tokenSymbolVal"
      v-bind="$attrs"
      v-load-more="handleEcoScroll"
      class="w-full"
      clearable
      filterable
      remote
      collapse-tags-tooltip
      reserve-keyword
      :placeholder="$t('eth.selectToken')"
      remote-show-suffix
      :remote-method="handleRemoteMethod"
      :loading="initLoad"
      :no-data-text="$t('cross.birdge')"
      @visible-change="handleVisibleChange"
      @change="handleSelectChange"
      @clear="handleSelectClear"
    >
      <el-option
        v-for="item in tokenList.list"
        :key="item.ecosystem"
        :label="item.tokenSymbol"
        :value="String(item.ecosystem)"
      >
        <div class="flex justify-between items-center">
          <span>{{ item.tokenName }}</span>
          <div class="flex items-center">
            <span>
              {{ item.balance }}
            </span>
            <span class="ml-1">
              {{ item.tokenSymbol }}
            </span>
          </div>
        </div>
      </el-option>
    </el-select>

加载函数：

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

文章来源地址https://uudwc.com/A/gV3m1