有時(shí)候select里面的數(shù)據(jù)會(huì)很多，這時(shí)候就需要分頁(yè)，那么我們?nèi)绾伪O(jiān)聽(tīng)select觸底呢？
這時(shí)候我們就要寫一個(gè)自定義指令，然后在main.js中注冊(cè)，這個(gè)寫兩個(gè)版本，vue2.x和vue3
v-load-more=‘loadMore’
vue2.x
在src或者你項(xiàng)目的其他目錄下面創(chuàng)建一個(gè)directives文件，然后在里面新建一個(gè)loadmore.js
如果對(duì)自定義指令還不熟悉可以先看vue2.x自定義指令
這時(shí)候線打印bind中參數(shù)出來(lái)看看

export default {bind(el, binding) {console.log(el)console.log(binding)}, }

在相同的目錄下面新增一個(gè)index.js用來(lái)管理自定義指令的注冊(cè)

import loadMore from './loadmore' const directives = {loadMore, }export default {install(Vue) {Object.keys(directives).forEach((key) => {Vue.directive(key, directives[key])})}, }

在main.js中引入并通過(guò)vue.use注冊(cè)全局自定義指令

import directives from './directives/index' Vue.use(directives)

這時(shí)候在看看loadmore.js中打印出來(lái)的值,發(fā)現(xiàn)select下拉框就在el里面

那我們就可以通過(guò)querySelector來(lái)獲取下拉框的dom,監(jiān)聽(tīng)里面的滾動(dòng)條位置，一下是loadmore.js中完整代碼

export default {bind(el, binding) {const dropdownDom = el.querySelector('.el-select-dropdown__wrap')dropdownDom.addEventListener('scroll', function () {const condition = this.scrollHeight - this.scrollTop <= this.clientHeightif (condition) {binding.value && binding.value()}})}, }

使用的使用直接v-load-more就好了

<el-select v-model="value" placeholder="請(qǐng)選擇" v-load-more="loadMore"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>methods: {loadMore(){console.log('到底了')} }

vue3.0
目錄創(chuàng)建文件與vue2.x描述是一樣的，這里就不重復(fù)了，自定義指令在vue3.0中鉤子函數(shù)都改變了
具體看官網(wǎng)vue3.0自定義指令
index.js中的注冊(cè)方法vue2x和vue3.0一樣，可以看上面
loadmore.js

export default {beforeMount(el, binding) {console.log(el)}, }

按照慣例，我們先打印出el看看下拉框在不在el里面，這時(shí)候發(fā)現(xiàn)下拉框并不在select中，而是在body下面

那么我們只能通過(guò)設(shè)置select屬性中的popper-class才能獲取到對(duì)應(yīng)的下拉框
使用方法 v-load-more:[name]動(dòng)態(tài)傳參

<el-select:model-value="modelValue"class="m-2"placeholder="Select"@change="changeValue":popper-class="item.popperClass"v-load-more:[item.popperClass]="loadMore" ><el-optionv-for="item in item.options":key="item.value":label="item.label":value="item.value"/> </el-select> <script setup>const loadMore = () => {console.log('到底了')} </script>

完整的loadmore.js

export default {beforeMount(el, binding) {if (!binding.arg) returnconst selectDom = document.querySelector(`.${binding.arg} .el-select-dropdown__wrap`)function loadmore() {const isBase = this.scrollHeight - this.scrollTop <= this.clientHeightif (isBase) {binding.value && binding.value()}}el.selectDomInfo = selectDomel.userloadmore = loadmoreselectDom.addEventListener('scroll', loadmore)},beforeUnmount(el) {if(el.userloadmore) {el.selectDomInfo.removeEventListener('scroll', el.userloadmore)delete el.selectDomInfodelete el.userloadmore}} }

總結(jié)

以上是生活随笔為你收集整理的vue element select 下拉加载更多的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。