Vue解決element-ui消息提示$message重疊問(wèn)題
錯(cuò)誤出現(xiàn)
貼一段代碼
函數(shù)中程序同步執(zhí)行，先后觸發(fā)兩個(gè)$message，此時(shí)兩個(gè)$message的彈窗重疊
預(yù)期的情況是下圖這樣一上一下出現(xiàn)
這因?yàn)関ue的異步更新隊(duì)列有緩沖機(jī)制，第一次$message觸發(fā)時(shí)，并沒(méi)有更新dom，導(dǎo)致第二個(gè)$message取item.$el.offsetHeight取到的高度為0，所以第二個(gè)$message只是下移了默認(rèn)的offset(即16px)，并沒(méi)有加上第一個(gè)$message的offsetHeight。
解決這個(gè)問(wèn)題的辦法
1、如果是單一場(chǎng)景，用$nextTick處理
this.$nextTick(() => {
this.$message(...);
});可以保證dom更新之后再觸發(fā)$message，正確的獲取到$el.offsetHeight
2、將第二個(gè)$message寫在setTimeout回調(diào)函數(shù)中
(其思想與$nextTick同理)
3、async + await
注意
如果有多個(gè)(>=3個(gè))$message，$nextTick以及await只能解決第1個(gè)與第2個(gè)重疊的情況，第2個(gè)、第3個(gè)還會(huì)重疊，這種情況改用setTimeout。
以上就是Vue解決element-ui消息提示$message重疊問(wèn)題的詳細(xì)內(nèi)容，更多關(guān)于Vue解決message重疊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)
前后端分離的項(xiàng)目，遇到了對(duì)密碼進(jìn)行加密的情況，在前端或者是在后端加密都是可以的，本文主要介紹了Vue使用MD5對(duì)前后端進(jìn)行加密的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue+element-ui+axios實(shí)現(xiàn)圖片上傳
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+axios實(shí)現(xiàn)圖片上傳，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了Vue首屏白屏問(wèn)題的原因和解決方法講解，Vue首屏白屏問(wèn)題是指在頁(yè)面初次加載時(shí)，部分或全部?jī)?nèi)容無(wú)法正常顯示，出現(xiàn)空白的情況。其原因可能是因?yàn)轫?yè)面渲染速度過(guò)慢，或者是因?yàn)榫W(wǎng)絡(luò)請(qǐng)求等問(wèn)題導(dǎo)致數(shù)據(jù)無(wú)法及時(shí)加載2023-05-05
這篇文章主要介紹了vue中的錨點(diǎn)定位問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-router+vuex addRoutes實(shí)現(xiàn)路由動(dòng)態(tài)加載及菜單動(dòng)態(tài)加載
本篇文章主要介紹了vue-router+vuex addRoutes實(shí)現(xiàn)路由動(dòng)態(tài)加載及菜單動(dòng)態(tài)加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開(kāi)收起的處理的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 中文本內(nèi)容超出規(guī)定行數(shù)后展開(kāi)收起的處理的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
下面小編就為大家分享一篇vue刷新和tab切換實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
本文詳細(xì)介紹了在Vue項(xiàng)目中實(shí)現(xiàn)加載動(dòng)畫的方法,通過(guò)在app.vue注入樣式、封裝js文件及在main.js掛載,最后在頁(yè)面調(diào)用觸發(fā)的具體步驟,為開(kāi)發(fā)者提供實(shí)用指南2026-05-05
這篇文章主要介紹了Vue中的ref,props,mixin屬性,文章圍繞主題ref,props,mixin展開(kāi)詳細(xì)內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07