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

vue的自定义select下拉框分页处理下拉列表,自定义指令_第1张图片

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

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

也不再有卡顿。

你可能感兴趣的:(前端-vue)