Vue 自定义指令实现 El-Select 选项懒加载

由于之前公司的项目中某个 select 选项数据量过大，想到了采用懒加载
故从网上学到了这个方法，并用到了项目中，实测没什么问题，所以来分享一下
很抱歉原文已经找不到了，如有侵权，请联系我删除

// 自定义指令实现 el-select 选项懒加载
<template>
<el-select v-el-select-loadmore="loadMore">
<!-- ... -->
</el-select>
</template>

<script>
  // ...
  directives: {
    'el-select-loadmore': {
      bind (el, binding) {
        const ElSelectWrap = el.querySelector(
          '.el-select-dropdown .el-select-dropdown__wrap'
        )
        ElSelectWrap.addEventListener('scroll', function () {
          const loadmore = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (loadmore) {
            binding.value()
          }
        })
      }
    }
  },
  methods: {
    loadMore() {
      // ...
    }
  }
</script>