Vue 自定义指令——滚动加载

1 定义自定义指令

export default Vue => {
  Vue.directive("loadmore", {
    bind(el, binding) {
      // 获取element-ui定义好的dom
      const SELECTWRAP_DOM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
      SELECTWRAP_DOM.addEventListener("scroll", function() {       
      // 加 6 是想预留一定的距离 快到底的时候去执行指令
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight + 6;

        if (CONDITION) {
          binding.value();
        }
      });
    }
  });
};

可将各个定义好的自定义指令放入 directives.ts 文件。我们将一些 辅助文件一般放在 src 下的 lib 中。

具体各个含义可查看官方文档：
vue 自定义指令

2 挂载自定义指令

在 Vue 项目的 main.js 中导入directives.ts(import directives from "@/lib/directives.ts"),然后使用 Vue.use(directives)

3 再具体想使用的地方使用

我在 select 下拉框使用到的实例如下

             <el-select v-loadmore="loadMore">
                <el-option>
                 
                </el-option>
              </el-select>

			 loadMore() {
			 //如果有下一页，请求数据的 pageNum ++,继续请求数据 ，将请求到的数据 concat 到 select 中绑定的数据即可。
			    if (this.hasNextPage) {
			      this.pageNum++;
			      this.getData();
			    }
			  }

即可实现 select下拉框下滑快到底的时候加载数据。