Vue注册自定义指令实现element-ui组件库select下拉框滚动加载更多

举报
青年码农 发表于 2022/08/25 00:26:35 2022/08/25
1.1k+ 0 0
【摘要】 点击上方“青年码农”关注 回复“特效源码”可获取各种资料 在项目开发过程中,总会遇到这样或者那样的问题,这次,用element-ui组件库的select,但是这个组件不支持分页加载更多,如果一次性把所有的数据都返回给前端,那还需要后端再加个接口。是不是有其他方式可以扩展下select? 在Vue文档中,找到了实现方式,那就是...

点击上方“青年码农”关注

回复“特效源码”可获取各种资料

在项目开发过程中,总会遇到这样或者那样的问题,这次,用element-ui组件库的select,但是这个组件不支持分页加载更多,如果一次性把所有的数据都返回给前端,那还需要后端再加个接口。是不是有其他方式可以扩展下select?

在Vue文档中,找到了实现方式,那就是“注册自定义指令”

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

网上果然有大佬用自定义指令实现了滚动触底事件,

新建directives.js,放在main.js同级目录

7f320d1bba17dd1e09afaeabc709bb5f.png

内容如下:


       import Vue from "vue";
       Vue.directive("loadmore", {
         bind(el, binding) {
           // 获取element-ui定义好的scroll盒子
           const SELECTWRAP_DOM = el.querySelector(
             ".el-select-dropdown .el-select-dropdown__wrap"
           );
           SELECTWRAP_DOM.addEventListener("scroll", function() {
             const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
             if (CONDITION) {
               binding.value();
             }
           });
       });
   
  

在main.js中注册


       import directives from "./directives";
       Vue.use(directives);
   
  

在select组件中使用


       <el-select
           placeholder="请选择"
           v-loadmore="loadMore"
       >
           <el-option
           v-for="(item, i) in marketList"
           :key="i"
           :label="item.name"
           :value="item.id"
           ></el-option>
       </el-select>
   
  

v-loadmore这个指令就是我们刚才加的,loadMore这个就是处理自己业务逻辑的方法。


       loadMore() {
         // 这里写入要触发的方法
         this.marketPage.page += 1;
         this.getmarketingList();
       },
   
  

这个方法里面的逻辑比较简单,每次触发,page+1,其实这么写不严谨,应该再加个判断是否最后一页。

文章来源: blog.csdn.net,作者:NMGWAP,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/NMGWAP/article/details/125066457

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。