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