el-select下拉框滾動條觸底加載數據方法
創建一個js文件,例如directives.js
import { nextTick } from 'vue'
export const Loadmore = app => {
app.directive('loadmore', {
mounted: function(el, binding) {
nextTick(() => {
let dropdownClass = $(el).find(".el-scrollbar .el-select-dropdown__wrap")
dropdownClass.bind("scroll",(item)=>{
let scrollTop = $(item.target).scrollTop()
let scrollHeight = $(item.target).get(0).scrollHeight
let clientHeight = $(item.target).get(0).clientHeight
//const { scrollTop, scrollHeight, clientHeight } = item
const scrollDistance = scrollHeight - scrollTop <= clientHeight
if (scrollDistance) {
binding.value() // 調用加載更多的回調函數
}
})
// const domClass =
// '#' + dropdownClass + ' .el-select-dropdown .el-select-dropdown__wrap'
// const domClass =
// '.popperCustom .el-scrollbar .el-select-dropdown__wrap'
// const element = document.querySelector(domClass)
// 監聽滾動事件
// element &&
// element.addEventListener('scroll', () => {
// const { scrollTop, scrollHeight, clientHeight } = element
// const scrollDistance = scrollHeight - scrollTop <= clientHeight
// if (scrollDistance) {
// binding.value() // 調用加載更多的回調函數
// }
// })
})
},
})
}
然后在main.js中引用
import * as Directives from '@/utils/directives';
Object.values(Directives).forEach(fn => fn(instance))
然后在el-select中使用v-loadmore調用方法和實現方法即可

浙公網安備 33010602011771號