贴一段代码
函数中程序同步执行,先后触发两个$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…