创建一个ts文件,注册自定义指令
import { Directive, DirectiveBinding } from 'vue'
const loadMore: Directive = {
beforeMount(el: any, binding: DirectiveBinding) {
const selectDom = document.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
function loadMores(this: any) {
const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
if (isBase) {
binding.value && binding.value()
}
}
el.selectDomInfo = selectDom
el.userLoadMore = loadMores
selectDom?.addEventListener('scroll', loadMores)
},
beforeUnmount(el: any) {
if (el.userLoadMore) {
el.selectDomInfo.removeEventListener('scroll', el.userLoadMore)
delete el.selectDomInfo
delete el.userLoadMore
}
}
}
export default loadMore
在所需页面引入创建的自定指令(示例为局部引入)
import vLoadMore from 'src/utils/loadMore'
在select组件上添加v-load-more指令
<el-select v-load-more="getMoreData"></el-select>
然后就搞定了,可以处理getMoreData中写你的获取更多数据的方法了
const getMoreData = async () => {
console.log('获取更多数据')
}