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

正文完