iView select选择器实现下拉加载 Vue2自定义指令+事件监听

最新推荐文章于 2024-08-21 09:16:00 发布

Multi8?

最新推荐文章于 2024-08-21 09:16:00 发布

阅读量339

点赞数 5

文章标签： view design 前端 javascript

本文链接：https://blog.csdn.net/songSZH/article/details/137045914

版权

一、在.vue文件中，定义局部自定义指令

如果Select组件在Modal中，可以把bind函数变为update即可

  directives: {
    'scroll-load-more': {
    // 如果Select组件在Modal中，可以把bind函数变为update即可
      bind(element, binding, vnode) {
        let _this = vnode.context; //获取vue上下文
        const SELECTWRAP_DOM = element.querySelector(
          '.ivu-select .ivu-select-dropdown'
        )
        //绑定scroll事件监听
        SELECTWRAP_DOM.addEventListener('scroll', function () {
          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },

二、methods中定义自定义指令函数

data:{
	return {
		goupList:[],
		currentPage: 1,
		currentSize: 10,
		totally: 0
	}
},

methods:{
	async loadmore() {
      this.currentPage ++
      let data = {
        pageNo: this.currentPage,
        pageSize: this.currentSize,
      }
      let res = await getList(data)
      let d = res.data
      if(d.code === 200) {
      //判定条件
        if(this.groupList.length < this.totally) {
          this.groupList = this.groupList.concat(d.data.list)
          this.totally = d.data.total
        }
      } else {
        this.$Message.error(d.msg)
      }
    },
}

三、html结构，绑定自定义指令v-

自定义指令一定要写对！！！！

<Select v-model="form.groupIds" placeholder="请选择" v-scroll-load-more="loadmore">
	<Option v-for="item in groupList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>