vue3+el-select实现触底加载更多功能(ts版)

 更新时间:2023年07月11日 11:05:56   作者:我总是词不达意  
这篇文章主要给大家介绍了基于vue3和el-select实现触底加载更多功能,文中有详细的代码示例,感兴趣的同学可以借鉴参考下

思路

使用全局指令来实现触底加载功能

通过el-select中的popper-class给下拉框加入一个类名

在src下的utils文件夹中创建selectLoadMoreDirective.ts文件

import { Directive, DirectiveBinding } from 'vue'
const loadMore: Directive = {
  beforeMount(el: any, binding: DirectiveBinding) {
    console.log(el)
    const selectDom = (document.querySelector(".more_select_dropdown") as any).querySelector(".el-select-dropdown .el-select-dropdown__wrap");
    console.log(selectDom, 'selectDom++++++++++++++');
    function loadMores(this: any) {
      const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (isBase) {
        binding.value && binding.value()
      }
    }
    el.selectDomInfo = selectDom
    el.userLoadMore = loadMores
    nextTick(() => {
      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

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from '/@/router'
import loadMore from '@/utils/selectLoadMoreDirective'
const app = createApp(App)
app.use(router)
app.directive('loadMore', loadMore)

home.vue

<template>
  <div class="p-2">
    <el-select v-model="selectedValue" v-loadMore="loadMore" class="more-select" popper-class="more_select_dropdown"
      @change="selectChange">
      <el-option v-for="(item, index) in list" :key="`${item.value}${index}`" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>
<script setup name="Home" lang="ts">
import { ComponentInternalInstance, computed, getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue';
const selectedValue = ref([])
const selectData = reactive({
  pageIndex: 1,
  pageSize: 5,
  finished: false
})
const list = ref([
  {
    value: 1,
    label: '测试1'
  },
  {
    value: 2,
    label: '测试2'
  },
  {
    value: 3,
    label: '测试3'
  },
  {
    value: 4,
    label: '测试4'
  },
  {
    value: 5,
    label: '测试5'
  },
  {
    value: 6,
    label: '测试6'
  },
  {
    value: 7,
    label: '测试7'
  },
  {
    value: 8,
    label: '测试8'
  },
])
//触底函数
const loadMore = () => {
  console.log(' 触底了');
  // 防抖处理
  setTimeout(() => {
    if (selectData.finished) return //值为true,则代表没有数据了
    selectData.pageIndex += 1
    // list.value = list.value.concat(list2.value)
    for (let i = 1; i <= 8; i++) {
      list.value.push({
        value: i,
        label: `测试${i}`
      })
    }
  }, 500)
}
//选中值发生变化时触发
const selectChange = () => {
  console.log('选中的xxxx')
}
</script>

到此这篇关于vue3+el-select实现触底加载更多功能的文章就介绍到这了,更多相关vue3+el-select 加载更多功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue微信分享插件使用方法详解

    vue微信分享插件使用方法详解

    这篇文章主要介为大家详细绍了vue微信分享插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Vue3中Composition的API用法详解

    Vue3中Composition的API用法详解

    这篇文章主要为大家详细介绍了Vue3中Composition的一些常见API的用法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06
  • Vue3+TS实现语音播放组件的示例代码

    Vue3+TS实现语音播放组件的示例代码

    这篇文章主要介绍了如何利用Vue+TS实现一个简易的语音播放组件,文中的示例代码讲解详细,对我们学习Vue有一定的帮助,需要的可以参考一下
    2022-03-03
  • 如何修改ant design组件自带样式

    如何修改ant design组件自带样式

    这篇文章主要介绍了如何修改ant design组件自带样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue3 封装 element-plus 图标选择器实现步骤

    Vue3 封装 element-plus 图标选择器实现步骤

    这篇文章主要介绍了Vue3 封装 element-plus 图标选择器,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • vuex中的state属性解析

    vuex中的state属性解析

    这篇文章主要介绍了vuex中的state属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue实现移动端拖动排序

    vue实现移动端拖动排序

    这篇文章主要为大家详细介绍了vue实现移动端拖动排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • vue的列表交错过渡实现代码示例

    vue的列表交错过渡实现代码示例

    这篇文章主要介绍了vue的列表交错过渡实现代码示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue3获取当前路由地址

    vue3获取当前路由地址

    本文详细讲解了vue3获取当前路由地址的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • vue-cli-service build 环境设置方式

    vue-cli-service build 环境设置方式

    这篇文章主要介绍了vue-cli-service build 环境设置方式,具有很好的参考价值,希望对大家有所帮助。
    2023-01-01

最新评论