element-ui Select 选择器 滚动加载 (vue 指令)

定义自定义指令

import Vue from 'vue'
let MyPlugin = {}
// 定义全局指令
export default MyPlugin.install = function(vue, options) {
  // loadmore 是定义的指令 名称 ， 使用时 用 v-loadmore = "dosomethingFun or data"
  Vue.directive('loadmore', {
      // bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      bind (el, binding) {
        // 获取element-ui定义好的scroll盒子  Select 选择器的下拉盒子
        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 是指令的绑定值，该值可能是字符串，数字、函数
          	// binding.value() 表示执行 v-loadmore 绑定的函数
            binding.value()
          }
        })
      }
    })
}

在main.js中应用全局指令

// Vue.use 需要在 new Vue() 之前使用
// 引用创建好的指令
import directives from './directives'
// 全局注册指令
Vue.use(directives)

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

在项目文件demo.vue 使用 Select 选择器，调用指令来监听滚动加载数据

<template>
	// v-loadmore 是前文注册过的指令，  loadMore 是指令绑定的值  相当于前文的 binding.value，由于指令值是函数，前文使用了 binding.value（）执行调用
	<el-select v-model="id" v-loadmore="loadMore">
 	  <el-option v-for="item in bmList" :key="item.id" :label="item.name" :value="item.id">
 	  </el-option>
	</el-select>
</template>

<script>
import {
    getBMList,
} from '@/api/store'

export default {
	data(){
		return {
			bmList: [],
			id:''
		}
	},
	methods: {
		loadMore(){
		  getBMList().then(res => {
            const newList = res.data.data
            if (newList.length > 0) {
              this.bmList.push(...newList)
            }
          })
		}
	}
}
</script>

指令绑定在节点后，就会自动调用滚动监听，满足条件后，指令中执行 binding.value() 来执行 loadMore 函数