当前位置:   article > 正文

Vue3 +el-select实现下拉加载更多功能_el-select-v2

el-select-v2

vue3做el-select下拉加载时遇到了很多问题,以前vue2的时候定义一个指令然后很容易就实现了这个功能,但是前两天用vue3的时候遇到了很多坑,不是报错就是根本没反应,也是摸索了好久才实现了,简单记录一下

1.在项目中新建文件,并添加核心代码

2.在main.js中注册指令

3.在页面中使用

好了,下拉加载大致功能就实现了,亲测有效。当然为了更好的用户体验,实现该功能的同时,一般会加上搜索功能,注意添加防抖节流防止频繁调用。

最后附上下拉加载功能核心代码

  1. import { Directive, DirectiveBinding } from 'vue'
  2. const loadMore: Directive = {
  3. beforeMount(el: any, binding: DirectiveBinding) {
  4. const selectDom = (document.querySelector(".more_select_dropdown") as any).querySelector(".el-select-dropdown .el-select-dropdown__wrap");
  5. function loadMores(this: any) {
  6. const isBase = this.scrollHeight - this.scrollTop <= this.clientHeight
  7. if (isBase) {
  8. binding.value && binding.value()
  9. }
  10. }
  11. el.selectDomInfo = selectDom
  12. el.userLoadMore = loadMores
  13. nextTick(() => {
  14. selectDom?.addEventListener('scroll', loadMores)
  15. })
  16. },
  17. beforeUnmount(el: any) {
  18. if (el.userLoadMore) {
  19. el.selectDomInfo.removeEventListener('scroll', el.userLoadMore)
  20. delete el.selectDomInfo
  21. delete el.userLoadMore
  22. }
  23. }
  24. }
  25. export default loadMore

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/神奇cpp/article/detail/890721
推荐阅读
相关标签
  

闽ICP备14008679号