vue 自定义指令--滚动到容器底部

最近碰到了一个使用场景是使用 element-ui ，对于table展示数据，但是有个需求是滚动加载分页和使用页码表分页两个结合起来，滚动加载的话使table表格无限加载，封装了一个滚动指令
对滚动条的监听，其实是监听父容器（能产生滚动条的），而不是滚动的内容

// directive/loadmore.js'
const loadmore = {};
loadmore.install = (Vue, options = {}) => {
  Vue.directive('loadmore', {
    bind(el, binding) {
      // 是否执行回调事件
      let eventAction = true
      el.addEventListener('scroll', function (e) {
        var scrollTop = e.target.scrollTop;
        var eHeight=e.target.offsetHeight;
        var sHeight=e.target.scrollHeight;
        //  滚动到指定区域执行回调事件
        if ((typeof binding.value === 'function') && scrollTop +eHeight>= sHeight && eventAction) {
          // 执行事件回调函数
          binding.value()
          eventAction = false
        }  else if (scrollTop +eHeight< sHeight) {
          eventAction = true
        }
      },true)
    }
  })
};
export default loadmore;

在main.js里面

import loadmore from './directive/loadmore'
Vue.use(loadmore)

使用

//template
<el-table v-loadmore="moreInfo">
//js
 methods: {
    moreInfo() {
        //....
      });
    }
}