一、問題

在給列表中的某些值外層嵌套了Element組件中的el-tooltip后，在滑動鼠標(biāo)滑輪時(shí)el-tooltip的提示框不會消失（或不會立即消失，被滾動到頂上），影響了界面的顯示；

產(chǎn)生這種情況的原因是因?yàn)?code>el-tooltip是監(jiān)聽鼠標(biāo)是否移動，所以當(dāng)鼠標(biāo)不移動只進(jìn)行滾動的時(shí)候提示并不會消失，由于組件內(nèi)設(shè)置了z-index的屬性，滾到上面后依然懸浮在頁面上層影響界面的顯示，具體問題如圖所示：

二、解決

解決思路為監(jiān)聽滾動條的滾動事件，在觸發(fā)滾動事件時(shí)將當(dāng)前顯示的el-tooltip設(shè)置display:none進(jìn)行隱藏（Element也是通過這種方式隱藏該元素的，只是Element通過監(jiān)聽鼠標(biāo)移動進(jìn)行觸發(fā)的）；

首先找到需要綁定事件的滾動條，我這里用的是Element的組件el-scrollbar，給它設(shè)置一個(gè)ref屬性，后面通過該屬性找到該滾動條在其滾動事件中進(jìn)行操作。

如果沒有使用該組件可以去監(jiān)聽滾動事件，或者監(jiān)聽所需要的事件即可；

<el-scrollbar
  class="scrollbar-for"
  ref="projectBar"
>
    <!-- 代碼部分略過 -->
    ...
</el-scrollbar>

之后找到需要消失el-tooltip，因?yàn)榱斜淼拿恳豁?xiàng)都加了el-tooltip所以設(shè)置id并通過id找到需要消失的el-tooltip元素有點(diǎn)不太現(xiàn)實(shí)，如果通過class找到一個(gè)el-tooltip的元素集合數(shù)組，

再去遍歷數(shù)組給每一項(xiàng)設(shè)置display:none的屬性開銷會很大，這時(shí)候去觀察整個(gè)界面的DOM結(jié)構(gòu)，通過觀察發(fā)現(xiàn)初始化界面后el-tooltip的元素并不會出現(xiàn)，

懸停在要顯示進(jìn)行文字提示的地方觸發(fā)tooltip后才會使tooltip元素掛載到DOM樹上面；

這里再次觸發(fā)文字提示el-tooltip，可以發(fā)現(xiàn)每次顯示的el-tooltip都會在DOM樹的最后，也就是document.getElementsByClassName選中的元素?cái)?shù)組集合中的最后一項(xiàng)；

此時(shí)事件源和元素都是已知了，直接利用事件源給元素設(shè)置樣式即可，methods中添加一個(gè)關(guān)閉事件即可，最后將這個(gè)事件在Vue的mounted鉤子函數(shù)中調(diào)用即可，這時(shí)在觸發(fā)滾動事件的一瞬間，當(dāng)前顯示的el-tooltip會直接被隱藏掉，代碼如下：

closeTooltip() {
	// 此處事件源可以替換，按需切換即可
    this.$refs.projectBar.wrap.onscroll = () => {
        let list = document.getElementsByClassName('el-tooltip__popper')
        if (list.length > 0) {
            list[list.length - 1].style.display = 'none'
        }
    }
}

一般到這里就解決了，但是注意一下如果你也使用的是彈窗其它彈出樣式的組件，會出現(xiàn)this.$refs.projectBar為undefined的情況，這里通過上面這些設(shè)置是不能滿足效果的，因?yàn)闈L動條元素沒有獲取到，自然也就不能添加事件，

這里需要用到Vue的另一個(gè)事件this.$nextTick()，我這里使用了彈窗el-dialog，彈窗中的數(shù)據(jù)也是通過點(diǎn)擊某個(gè)DOM元素（這里可能是按鈕或者其它標(biāo)簽DOM元素）后進(jìn)行獲取的，

所以需要在獲取數(shù)據(jù)的事件中調(diào)用this.$nextTick()，等待DOM更新后再調(diào)用上述的closeTooltip()方法，這時(shí)this.$refs.projectBar就不會再為undefined了，自然也就能通過綁定事件去使el-tooltip消失了

代碼如下：

// 獲取彈窗中的工程數(shù)據(jù)，該方法在點(diǎn)擊頁面中的按鈕后進(jìn)行調(diào)用
async showProject(item, type) {
    // 調(diào)用接口獲取數(shù)據(jù)
    ...
    // 更新列表數(shù)據(jù)
    ...
    this.projectList = res.data
    ...
    // 打開彈窗dialog
    ...
    // 滾動時(shí)設(shè)置el-tooltip消失
    this.$nextTick(() => {
        this.closeTooltip()
    })
}
// 設(shè)置el-tooltip消失
closeTooltip() {
	// 此處事件源可以替換，按需切換即可
    this.$refs.projectBar.wrap.onscroll = () => {
        let list = document.getElementsByClassName('el-tooltip__popper')
        if (list.length > 0) {
            list[list.length - 1].style.display = 'none'
        }
    }
}

順帶一提Vue.nextTick([callback,context])，官方定義為：在下次DOM更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。

在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新之后的DOM。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論