vue自定义指令实现下拉列表加载更多

直接上代码

<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>

<!-- 
新建directive.js文件
全局注册，页面直接v-xxx使用 
export default (vue) => {

}
-->