全局的vue自定义指令

export default {
    bind(el, binding) {
        const selectWrap = el.querySelector('.vxe-table--body-wrapper')
        console.log(el)
        selectWrap.addEventListener('scroll', function() {
            let sign = 0
            const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
            if (scrollDistance <= sign) {
                console.log(111111)
                binding.value()
            }
        })
    }
};

import loadMore from './table/loadMore'

const install = function(Vue) {
    Vue.directive('loadMore', loadMore)
}

if (window.Vue) {
    window['loadMore'] = loadMore
    Vue.use(install)
}
export default install

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

<template>
  <div>
    <div class='ranking-box'></div>
    <p v-if="!rank.loading">没有更多了<p>
  </div>
</template>
<style>
.ranking-box{
  height:400px;
}
</style>
<script>
data(){
  return{
    rank: {
        loading:true,//是否加载完成
        current: 1,
        size: 10,
        total: 0,
      },
  }
}
mounted() {
  let rankBox = document.querySelector(".ranking-box");
  let that = this;
  rankBox.addEventListener("scroll", function () {
    let sign = 0;
    const scrollDistance =
      this.scrollHeight - this.scrollTop - this.clientHeight;
    if (scrollDistance <= sign) {
      that.getRank();
    }
  });
},
methods:{
  getRank(){
     if(this.rank.loading){
      let parmas = {
        current: this.rank.current, //必传 当前年
        size: this.rank.size, //必传 类型(1-月,2-季,3-年)
      };
      this.$COMMON
        .api("/oa/asset/count/usage/rank", parmas, "get")
        .then((res) => {
          let { code, data, msg } = res;
          if (code == 200) {
            this.rankList = this.rankList.concat(data.records);
            this.rank.total = data.total || 0;
            if(this.rank.current*this.rank.size>=this.rank.total){
              this.rank.loading = false;
            }else{
              this.rank.loading = true;
            }
            this.rank.current++
          }
        })
        .catch((error) => {
          this.$message.error("服务器异常");
        });
    }
  }
}
<script>