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

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

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

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

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

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

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

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

内容如下：

   

    

     

      

     
     

      

       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，其实这么写不严谨，应该再加个判断是否最后一页。