Vue解决element-ui消息提示$message重叠问题
更新时间：2023年08月25日 10:05:54 作者：DiracKeeko
这篇文章主要为大家介绍了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重叠的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了Vue+Bootstrap实现简易学生管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
最近小编遇到这样的需求，要实现一个新闻展示页功能，刚接到这样的需求还真是一头雾水，不知从哪入手，今天小编通过实例代码给大家介绍下vue实现新闻展示页的步骤详解，感兴趣的朋友跟随小编一起看看吧2019-04-04
这篇文章主要为大家详细介绍了Vue自定义图片懒加载指令v-lazyload，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要为大家介绍了Vue之TodoList的案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>2021-11-11
这篇文章主要为大家介绍了VueJs中如何使用Teleport及组件嵌套层次结构详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
本文主要介绍了vue中插槽(slot)几种类型的使用方法,主要分三种,默认插槽,具名插槽,作用域插槽,下面就来一起介绍一下,感兴趣的可以了解一下2024-03-03
这篇文章主要介绍了vue实现父子组件之间的通信以及兄弟组件的通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下2019-01-01
在Vue中延迟执行某个函数,你可以使用setTimeout()函数或者Vue提供的生命周期钩子函数,本文通过一些示例代码给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了Vue.js 使用v-cloak后仍显示变量的解决方法 ,文中给大家提到了v-cloak的用法，需要的朋友可以参考下2018-11-11
这篇文章主要为大家介绍了Vue指令实现大屏元素分辨率适配详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最新评论