关于前端:Vue-解决elementui消息提示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。

完结。

同步更新到本人的语雀
https://www.yuque.com/diracke…

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据