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寫(xiě)在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+Bootstrap實(shí)現(xiàn)簡(jiǎn)易學(xué)生管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了Vue+Bootstrap實(shí)現(xiàn)簡(jiǎn)易學(xué)生管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解
最近小編遇到這樣的需求，要實(shí)現(xiàn)一個(gè)新聞?wù)故卷?yè)功能，剛接到這樣的需求還真是一頭霧水，不知從哪入手，今天小編通過(guò)實(shí)例代碼給大家介紹下vue實(shí)現(xiàn)新聞?wù)故卷?yè)的步驟詳解，感興趣的朋友跟隨小編一起看看吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了Vue自定義圖片懶加載指令v-lazyload，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助<BR>2021-11-11
VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解
這篇文章主要為大家介紹了VueJs中如何使用Teleport及組件嵌套層次結(jié)構(gòu)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
本文主要介紹了vue中插槽(slot)幾種類(lèi)型的使用方法,主要分三種,默認(rèn)插槽,具名插槽,作用域插槽,下面就來(lái)一起介紹一下,感興趣的可以了解一下2024-03-03
vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)父子組件之間的通信以及兄弟組件的通信功能,結(jié)合實(shí)例形式分析了vue.js組件間通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
在Vue中延遲執(zhí)行某個(gè)函數(shù)的實(shí)現(xiàn)方式
在Vue中延遲執(zhí)行某個(gè)函數(shù),你可以使用setTimeout()函數(shù)或者Vue提供的生命周期鉤子函數(shù),本文通過(guò)一些示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Vue.js 使用v-cloak后仍顯示變量的解決方法 ,文中給大家提到了v-cloak的用法，需要的朋友可以參考下2018-11-11
這篇文章主要為大家介紹了Vue指令實(shí)現(xiàn)大屏元素分辨率適配詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09