vue指令作滾動加載 監聽等

忽然有我的問起vue如何作滾動監聽?

既然你誠心誠意的發問了, 我就大發慈悲的告訴你.(武藏 & 小次郎)

指令能夠很好的作這件事情, 下面以element-select舉例:
directives.js

// v-loadmore: 用於在element-ui的select下拉框加上滾動到底事件監聽
Vue.directive('loadmore', {
    bind(el, binding) {
      
      // 獲取element-ui定義好的scroll盒子
      const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    
      SELECTWRAP_DOM.addEventListener('scroll', function() {

          /*
           * scrollHeight 獲取元素內容高度(只讀)
           * scrollTop 獲取或者設置元素的偏移值,經常使用於, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認爲0.
           * clientHeight 讀取元素的可見高度(只讀)
           * 若是元素滾動到底, 下面等式返回true, 沒有則返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
          
          if(CONDITION) {
              binding.value();
          }
      });
    }
})

組件中:

<template>
    <el-select 
        v-model="selectValue" 
        v-loadmore="loadMore">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.accountName"
            :value="item.id">
        </el-option>
    </el-select>
</template>

// methods
loadMore() {
    // 這裏能夠作你想作的任何事 到底執行
},