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

错误出现

贴一段代码

函数中程序同步执行，先后触发两个$message，此时两个$message的弹窗重叠

预期的情况是下图这样一上一下出现

这因为vue的异步更新队列有缓冲机制，第一次$message触发时，并没有更新dom，导致第二个$message取item.$el.offsetHeight取到的高度为0，所以第二个$message只是下移了默认的offset(即16px)，并没有加上第一个$message的offsetHeight。

解决这个问题的办法

1、如果是单一场景，用$nextTick处理

this.$nextTick(() => {
    this.$message(...);
});

可以保证dom更新之后再触发$message，正确的获取到$el.offsetHeight

2、将第二个$message写在setTimeout回调函数中

(其思想与$nextTick同理)

3、async + await

注意

如果有多个(>=3个)$message，$nextTick以及await只能解决第1个与第2个重叠的情况，第2个、第3个还会重叠，这种情况改用setTimeout。

以上就是Vue解决element-ui消息提示$message重叠问题的详细内容，更多关于Vue解决message重叠的资料请关注脚本之家其它相关文章！