vue的自定义select下拉框分页处理下拉列表，自定义指令

描述：需求是下拉框输入内容时，向后台请求相应数据，当数据成千上万时，这时的下拉筛选变得非常的卡顿，于是想到了做分页的办法，这里就需要用到vue的自定义指令，因为我的项目中，这个指令要用的地方比较多，所以，我定义了一个全局指令

1.创建一个全局指令文件 directives.js

import Vue from 'vue'
// 获取电影列表
export default Vue.directive('loadmore', {
  bind (el, binding, vnode) {
    console.log(el, binding, vnode)
    // 获取element-ui定义好的scroll盒子
    console.log(el, 'el')
    console.log(vnode, 'vnode')
    console.log('bind', binding)
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    })
  }
})

在main.js引入这个文件

import directives from '../static/todo/directive'
Vue.use(directives)

在组件中就可以使用了 v-loadmore

loadmore (e) { // 加载更多的院线名称
      console.log('获取更多院线名称')
      this.current = this.current + 1
      this.getChainList()
    },

这样一个有下拉加载更多的自定义指令就完成了

也不再有卡顿。