快捷導(dǎo)航

Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題

更新時(shí)間：2023年06月02日 10:56:24 作者：BreenCL

這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動(dòng)時(shí)錯(cuò)位不消失的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

一、問(wèn)題

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

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

二、解決

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

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

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

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

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

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

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

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

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

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

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

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

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

代碼如下：

// 獲取彈窗中的工程數(shù)據(jù)，該方法在點(diǎn)擊頁(yè)面中的按鈕后進(jìn)行調(diào)用
async showProject(item, type) {
    // 調(diào)用接口獲取數(shù)據(jù)
    ...
    // 更新列表數(shù)據(jù)
    ...
    this.projectList = res.data
    ...
    // 打開彈窗dialog
    ...
    // 滾動(dòng)時(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。