vue3——利用自定义指令实现下拉框分页懒加载

需求：下拉框一开始请求第一页的内容，滚动到最后的时候，请求第二页的内容，如此反复，直到所有数据加载完成。

selectLoadMore.ts

javascript 复制代码

//自定义指令：实现下拉框下拉到末尾时，加载下一页的内容
// 使用时传两个参数，一个是下拉框的class，一个是下拉框滚动到末尾时触发的函数，比如：
// v-el-select-loadmore="{
//   selector: '.myOption .el-select-dropdown .el-select-dropdown__wrap',
//   loadFunction: loadMore
// }"
export default {
  mounted(el, binding) {
    //解构传来的值
    const {
      value: { selector, loadFunction }
    } = binding
    const SELECTWRAP_DOM = document.querySelector(selector)
    if (SELECTWRAP_DOM) {
      // 监听事件的处理函数，把函数单独写出来，方便销毁
      const scrollHandler = () => {
        const condition = SELECTWRAP_DOM.scrollTop + SELECTWRAP_DOM.clientHeight >= SELECTWRAP_DOM.scrollHeight - 1
        if (condition) {
          loadFunction()
        }
      }
      //赋值，为了方便销毁，这里很重要，不然销毁的时候找不到dom和对应的回调函数！！！
      el.dom = SELECTWRAP_DOM
      el.event = scrollHandler
      //监听滚动事件
      SELECTWRAP_DOM.addEventListener('scroll', scrollHandler)
    }
  },
//销毁，会在关闭弹窗时触发（这里的el-select写在弹窗里）
  beforeUnmount(el) {
    if (el.dom) {
      el.dom.removeEventListener('scroll', el.event)
    }
  }
}

记得在main.ts里面注册成全局组件！！！！

main.ts

javascript 复制代码

import vElSelectLoadmore from '@/utils/tools/selectLoadMore'
app.directive('el-select-loadmore', vElSelectLoadmore) //全局自定义指令
app.mount('#app')

使用的vue文件

javascript 复制代码

//使用时在指令里传值，这里有个坑！
//在el-select给一个参数popper-class="myOption"，因为element-plus中ei-select的选项是使用的popper.js生成的，无法直接获取，直接获取下拉框的dom获取不到
          <el-select
            v-el-select-loadmore="{
              selector: '.myOption .el-select-dropdown .el-select-dropdown__wrap',
              loadFunction: loadMore
            }"
            v-model="userForm.accountName"
            placeholder="请选择用户"
            popper-class="myOption"
          >
            <el-option
              v-for="(item, index) in userData"
              v-loading="optionLoading(index)"
              :key="item.id"
              :label="item.username"
              :value="item.id"
            />
          </el-select>

//总共的数据条数
let totalCount: number = 0
//当前滚动页
let page: number

/**
 * 自定义指令触发的回调
 */
function loadMore() {
  //计算总页数
  let maxPagSize: number = Math.max(Math.ceil(totalCount / 10), 1)
  //不超过总页数才发请求
  if (page < maxPagSize) {
    page += 1
    //发请求，获得接口数据
    getUserListWrap(page, 10)
  }
}

/**
 * 控制下拉框loding是否出现，isOptionLoading是在getUserListWrap请求函数里面的，userData是请求函数获得是下拉框数据，这样可以使下拉到最后一个option的时候，出现loding效果，更加完善美观
 * @param index 下拉框循环的index
 */
function optionLoading(index: number): boolean {
  if (isOptionLoading.value && index == userData.length - 1) {
    return true
  } else {
    return false
  }
}

总结：

1、在el-select给一个参数popper-class="myOption"，因为element-plus中el-select的选项是使用的popper.js生成的，无法直接获取，直接获取下拉框的dom获取不到

2、在自定义指令里面销毁事件的时候，在mounted必须把事件存在el上，不然不好销毁，一开始是以下这么写的：发现这样不好销毁，因为在 beforeUnmount拿不到function，this只能按以下这么写才行，如果单独把funtion拎出来，this就报错找不到

javascript 复制代码

export default {
  mounted(el, binding) {
    const {
      value: { selector, loadFunction }
    } = binding
    const SELECTWRAP_DOM = document.querySelector(selector)

    if (SELECTWRAP_DOM) {
      SELECTWRAP_DOM.addEventListener('scroll', function () {
        const condition = this.scrollTop + this.clientHeight >= this.scrollHeight - 1
        if (condition) {
          loadFunction()
        }
      })
    }
  }
}

vue3的demo代码如下：

复制代码

<template>
  <el-form-item label="用户名称：">
        <el-select 
        popper-class="myOption"
          v-model="accountName" 
          placeholder="请输入或选择用户"  
           v-el-select-loadmore="loadMore">
            <el-option v-for="item in options" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value" />
        </el-select>
        </el-form-item>
</template>
 
<script setup lang="ts">
import {ref,onMounted} from 'vue'
let page = ref(1)
let pageSize = ref(10)
let total = 100
let totalCount=6
let stopLoading = false
let accountName = ref('')
const options = ref([])
onMounted(() => {
  options.value.length=0
  loadOptions(1)
})

function loadMore() {
  //这里设置接口的最大页数totalCount为6，超过6页就没数据了
        if (page.value <= totalCount) {
            page.value += 1;
        //获得接口数据
          loadOptions(page.value);
        }
    }

function loadOptions(page:number) {
      // 模拟接口发送数据，异步加载数据
      setTimeout(() => {
        for (let i = (page-1)*10+1; i <= page*10; i++) {
        options.value.push({
        value: `Option${i}`,
        label: `Option${i}`
        });
        }
      }, 500);
}
//在自定义指令
const vElSelectLoadmore = {
  mounted(el: any, binding: any) {
    // 坑：
    const SELECTWRAP_DOM:Element|null = document.querySelector(
                '.myOption .el-select-dropdown .el-select-dropdown__wrap'
    );
    if (SELECTWRAP_DOM) {
      SELECTWRAP_DOM.addEventListener('scroll', function () {
                const condition = this.scrollTop+this.clientHeight >= this.scrollHeight-1;
        // 当滚动条滚动到最底下的时候执行接口加载下一页
                
        if (condition) {
          binding.value && binding.value()
        }
            });
    }

  },

}

</script>