Element-ui中元素滾動(dòng)時(shí)el-option超出元素區(qū)域的問(wèn)題
復(fù)現(xiàn)場(chǎng)景, 看圖

分析原因
為簡(jiǎn)單起見(jiàn), 把選項(xiàng)區(qū)域描述為popperEl
- popperEl的z-index 比較大, 會(huì)覆蓋在其他元素上面
- popperEl默認(rèn)是插入body元素的(可以將popper-append-to-body設(shè)為false后不插入到body)
- popperEl是在mouseup事件里去做隱藏邏輯的, 而按下鼠標(biāo), 移動(dòng)滾動(dòng)條的時(shí)候, 并沒(méi)有觸發(fā)mouseup事件.
- popperEl并沒(méi)有監(jiān)聽(tīng)滾動(dòng)事件(沒(méi)法監(jiān)聽(tīng), 也沒(méi)必要監(jiān)聽(tīng))
解決方案
方案一
我最初想到的解決方案是通過(guò)css解決,通過(guò)popper-class屬性給Select下拉框添加類(lèi)名,然后用css來(lái)做, 試了一下這個(gè)方案并不可行(只能在某些特定的場(chǎng)景下起作用),遂放棄,可能最優(yōu)雅最高性能的方法就是用css來(lái)搞定, 有踩過(guò)這個(gè)坑的朋友請(qǐng)指點(diǎn)一下
方案二
通過(guò)監(jiān)聽(tīng)$root的scroll事件,利用事件冒泡,只需要在根元素上添加scroll事件的監(jiān)聽(tīng)就可以了, 測(cè)試一番之后, 發(fā)現(xiàn)scroll事件根本不支持冒泡, event.bubbles為false)。
方案三
通過(guò)查看element-ui 的select.vue, 發(fā)現(xiàn)控制popperEl顯隱的是visible 和 emptyText這兩個(gè)實(shí)例屬性, 很明顯, emptytext是不能動(dòng)的, 只能在visible上動(dòng)手腳了. 這里放一小段源碼
<transition
name="el-zoom-in-top"
@before-enter="handleMenuEnter"
@after-leave="doDestroy">
<el-select-menu
ref="popper"
:append-to-body="popperAppendToBody"
v-show="visible && emptyText !== false">
<el-scrollbar
tag="ul"
wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list"
ref="scrollbar"
:class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
v-show="options.length > 0 && !loading">
<el-option
:value="query"
created
v-if="showNewOption">
</el-option>
<slot></slot>
</el-scrollbar>
<p
class="el-select-dropdown__empty"
v-if="emptyText &&
(!allowCreate || loading || (allowCreate && options.length === 0 ))">
{{ emptyText }}
</p>
</el-select-menu>
</transition>
全局搜索this.visible, 發(fā)現(xiàn)了這個(gè)方法
handleClose() {
this.visible = false;
},
這下好辦了, 按圖索驥, 順藤摸瓜, 找到這個(gè)
<template> <div class="el-select" :class="[selectSize ? 'el-select--' + selectSize : '']" @click.stop="toggleMenu" v-clickoutside="handleClose"> 后面的省略...
找到v-clickoutside指令之后, 豁然開(kāi)朗 原來(lái)點(diǎn)擊其他區(qū)域的時(shí)候, popperEl會(huì)自動(dòng)關(guān)閉的奧秘在這里, 結(jié)合方案二的靈感, 現(xiàn)給出如下代碼.
// src/mixins/fackClickOutSide.js
let lock = true;
let el = null;
const MousedownEvent = new Event('mousedown', {bubbles:true});
const MouseupEvent = new Event('mouseup', {bubbles:true});
const fakeClickOutSide = () => {
document.dispatchEvent(MousedownEvent);
document.dispatchEvent(MouseupEvent);
lock = true; // console.log('dispatchEvent');
};
const mousedownHandle = e => {
let classList = e.target.classList;
if(classList.contains('el-select__caret') || classList.contains('el-input__inner')) {
lock = false;
return;
}
if(lock) return;
fakeClickOutSide();
};
const mousewheelHandle = e => {
if(lock || e.target.classList.contains('el-select-dropdown__item') || e.target.parentNode.classList.contains('el-select-dropdown__item')) return;
fakeClickOutSide();
};
const eventListener = (type) => {
el[type + 'EventListener']('mousedown', mousedownHandle);
window[type + 'EventListener']('mousewheel', mousewheelHandle);
window[type + 'EventListener']('DOMMouseScroll', mousewheelHandle); // fireFox 3.5+
}
export default {
mounted() {
el = this.$root.$el;
el.addFakeClickOutSideEventCount = el.addFakeClickOutSideEventCount || 0;
(! el.addFakeClickOutSideEventCount) && this.$nextTick(() => {
eventListener('add');
});
el.addFakeClickOutSideEventCount += 1;
},
destroyed() {
eventListener('remove');
el.addFakeClickOutSideEventCount -= 1;
},
}
使用姿勢(shì)
建議在根組件上混合進(jìn)去, 當(dāng)然,你也可以在需要的組件上去混合(不太建議, 這點(diǎn)代碼性能損耗應(yīng)該不大吧, 哈哈哈)
// src/App.vue
import fakeClickOutSide from '@/mixins/fakeClickOutSide.js'
export default {
name: 'App',
mixins: [fakeClickOutSide],
}
測(cè)試
常規(guī)基礎(chǔ)用法 和 自定義模板用法(模板內(nèi)沒(méi)有嵌套的標(biāo)簽) 均完美通過(guò).
自定義模板內(nèi)如果嵌套多級(jí)標(biāo)簽, 需要在標(biāo)簽上添加標(biāo)記,然后在mousewheel事件回調(diào)里判斷是否有這個(gè)標(biāo)記.
總結(jié)
依然存在的問(wèn)題(隱患):
- 在mousewheel事件回調(diào)沒(méi)有做節(jié)流, 考慮到有鎖, 且滾輪事件觸發(fā)的頻率也不是很高(相對(duì)于mousemove事件來(lái)講), 性能消耗并不大, 遂不做節(jié)流(主要是懶).
- 在mousewheel事件回調(diào)里,判斷event.target 是否是在popperEl元素內(nèi)部的方法感覺(jué)不是很靠譜, 且效率不高, 在mousedown 事件里判斷是不是el-select元素的方法也存在同樣的隱患, 后期再想辦法修改(修改是不可能修改的, 又不是不能用).
- 在自定義模板用法里, 如果有嵌套的標(biāo)簽, 那么在mousewheel事件回調(diào)里判斷event.target 是不是在popperEl元素內(nèi)部的方法就崩潰了(這是個(gè)雷), 目前的解決辦法是手動(dòng)在嵌套的標(biāo)簽上都加上一個(gè)標(biāo)記, 在事件里,添加這個(gè)標(biāo)記的判斷, 但是這種做法對(duì)于已經(jīng)編寫(xiě)完成的模板無(wú)效, 只能再次修改, 考慮過(guò)使用遞歸向上查找, 但是效率不高, 性能消耗太大, 且自定義el-option模板這種情況在我們現(xiàn)階段的業(yè)務(wù)中幾乎不存在, 所以就沒(méi)有考慮這個(gè)bug.
感謝一位大佬長(zhǎng)期以來(lái)給予的幫助.
相關(guān)文章
Vue-cli打包后部署到子目錄下的路徑問(wèn)題說(shuō)明
這篇文章主要介紹了Vue-cli打包后部署到子目錄下的路徑問(wèn)題說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
使用vuex解決刷新頁(yè)面state數(shù)據(jù)消失的問(wèn)題記錄
這篇文章主要介紹了使用vuex解決刷新頁(yè)面state數(shù)據(jù)消失的問(wèn)題記錄,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue3中實(shí)現(xiàn)異步組件的方法實(shí)例
前端開(kāi)發(fā)經(jīng)常遇到異步的問(wèn)題,請(qǐng)求函數(shù)、鏈接庫(kù)等,下面這篇文章主要給大家介紹了關(guān)于vue3中實(shí)現(xiàn)異步組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
VueJS實(shí)現(xiàn)用戶管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了VueJS實(shí)現(xiàn)用戶管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05
Vue中對(duì)比scoped css和css module的區(qū)別
這篇文章主要介紹了Vue中scoped css和css module的區(qū)別對(duì)比,scoped css可以直接在能跑起來(lái)的vue項(xiàng)目中使用而css module需要增加css-loader配置才能生效。具體內(nèi)容詳情大家參考下本文2018-05-05
vue數(shù)據(jù)監(jiān)聽(tīng)解析Object.defineProperty與Proxy區(qū)別
這篇文章主要為大家介紹了vue數(shù)據(jù)監(jiān)聽(tīng)解析Object.defineProperty Proxy源碼示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03

