<template>
  <div class="content">
    <el-select v-model="value"
               v-el-select-loadmore="loadMore()"
               placeholder="請選擇">
      <el-option v-for="(item,index) in list.slice(0,rangeNumber)"
                 :key="index"
                 :label="item.name"
                 :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import Vue from 'vue';
Vue.directive('el-select-loadmore', {
  //el指令所繫結的元素，可以用來直接操作 DOM
  //binding一個物件 binding.value指令的繫結值，此處指令的繫結值是loadMore()的值
  bind: function (el, binding) {
    // 獲取element-ui定義好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      console.log(this)
      /**
       * scrollHeight 獲取元素內容高度(只讀)
       * scrollTop 獲取或者設定元素的偏移值,常用於, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值預設為0.
       * clientHeight 讀取元素的可見高度(只讀)
       * 如果元素滾動到底, 下面等式返回true, 沒有則返回false:
       * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
       */
      const condition = (this.scrollHeight - this.scrollTop) <= this.clientHeight ? true : false;
      if (condition) binding.value();
    });
  }
})
export default {
  data () {
    return {
      list: [
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
        { id: 2086, name: "KTV" },
        { id: 2069, name: "NBA" },
      ],
      value: '',
      rangeNumber: 10,
    }
  },
  methods: {
    loadMore () {
      return () => this.rangeNumber += 5 //每次滾動到底部可以新增條數  可自定義
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>