当前位置: 首页 > Web前端 > vue.js

[Vue]解决element-ui消息提示$message重叠问题

时间:2023-03-31 18:12:37 vue.js

贴一段代码function其中程序同步执行,先后触发两条$messages。这时候,两个$messages的弹窗重叠了。预期情况如下图上一节出现这种情况是因为Vue的异步更新队列有缓冲机制。当第一个$message被触发时,dom没有更新,导致第二个$message获取item.$el.offsetHeight的高度为0,所以第二个$message第一个$message只是向下移动了默认偏移量(即16px),并且不添加第一个$message的offsetHeight。本题解决方案1、如果是单场景,使用$nextTick处理this.$nextTick(()=>{this.$message(...);});确保在dom更新后触发$message。正确获取$el.offsetHeight2,在setTimeout回调函数中写入第二个$message(思路同$nextTick)3、async+await注意:如果有多个(>=3)$messages,$nextTick和await只能解决第一和第二重叠的情况,第二和第三也会重叠。在这种情况下,请改用setTimeout。结尾。同步更新到你的语雀https://www.yuque.com/diracke...