vue 自定义指令上拉加载更多

项目是用ant-design-vue 写的，在需求中，要求表格有上拉加载更多的的分页效果。

实现其效果需要用到vue自定义指令。由于我们这个指令在很多个组件都使用到了。做成公有指令。

首先，创建一个directive的文件夹，用于管理项目中所有的指令js。

在directive文件夹下，创建一个上拉加载更多的loamore.js

/**
 * 加载更多数据的指令
 */
 export default {
	install(Vue) {
		Vue.mixin({
			directives: {
				loadmore: {
					bind(el, binding) {
						let bindTime;
						clearTimeout(bindTime)
						bindTime = window.setTimeout(function () {
							let selectWrap = el.querySelector(".ant-table-body");
							if (!selectWrap) selectWrap = el.querySelector(".el-table__body-wrapper");
							var lastScrollTop = 0;
							selectWrap.addEventListener("scroll", function () {
								// 触底或者触顶多少距离上限
								let offsetValue = 300;
									if (lastScrollTop != this.scrollTop) {
										lastScrollTop = this.scrollTop;
										// 计算距离
										const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;
										// 触底距离小于等于上限距离时，回调
										if (scrollDistance <= offsetValue) { // 上拉加载
											binding.value('down', this);
										}
									}
							}, false);
						}, 200);
					}
				}
			}
		});
	}
};

 引入这个指令，只需要在main.js中，写以下两行代码

//加载更多数据的指令
import loadMore from '@/directive/loadMore'
Vue.use(loadMore)

在组件中使用，我们这个指令，仅针对ant-design-vue中的table组件。

因此，在将私有指令绑定到table上就行

<a-table
          v-loadmore="loadMore"
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :scroll="{y: 162 }"
          :row-key="(record, index) => record.id"
          class="scroll-box"
        ></a-table>

这个表格就有上拉加载更多的效果啦。