VUEカスタム命令、スクロールロード

1新しいファイルjs

import Vue from 'vue'
Vue.directive('rolling-load', {
  bind(el, binding) {
    //   element-ui    scroll  
    const SELECTWRAP_DOM = el.querySelector('.el-table__body-wrapper');
    SELECTWRAP_DOM.addEventListener('scroll', function() {
      // debugger
      /*
       * scrollHeight         (  )
       * scrollTop               ,   ,         ,                     ,    scrollTop     0.
       * clientHeight          (  )
       *         ,       true,      false:
       * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
       */
      let sign = 20; //                

      const CONDITION = ((this.scrollHeight - this.scrollTop === this.clientHeight) &&
        this.scrollTop > sign)//   : && this.scrollTop
      if(this.scrollTop > sign) {
        // console.log('  ')
        sign = this.scrollTop;
      }
      if(this.scrollTop < sign) {
        // console.log('  ')
        sign = this.scrollTop;
      }

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

2 mainを導入する.js

import 'rollingLoad'

3使用

<div v-rolling-load="func">div>

<script>
	func(){
		      
	}
script>