element select 自动展开_element Select组件封装 下拉框加上滚动加载

本文是在element-ui的基础上优化的。

需要操作dom元素，去监听scroll事件，然后当下拉滚动触底就执行自己需要的代码操作。

这里我使用的是局部注册指令。

directives:{

loadmore:{

inserted: function (el,binding) {

// 获取element-ui定义好的scroll盒子

const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');

SELECTWRAP_DOM.addEventListener('scroll', function() {

/*

* scrollHeight 获取元素内容高度(只读)

* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.

* clientHeight 读取元素的可见高度(只读)

* 如果元素滚动到底, 下面等式返回true, 没有则返回false:

* ele.scrollHeight - ele.scrollTop === ele.clientHeight;

*/

const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;

if(CONDITION) {

binding.value();

}

})

}

}</