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使用MD5对前后端进行加密的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要为大家详细介绍了vue+element-ui+axios实现图片上传，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要介绍了Vue首屏白屏问题的原因和解决方法讲解，Vue首屏白屏问题是指在页面初次加载时，部分或全部内容无法正常显示，出现空白的情况。其原因可能是因为页面渲染速度过慢，或者是因为网络请求等问题导致数据无法及时加载2023-05-05
这篇文章主要介绍了vue中的锚点定位问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
本篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了Vue 中文本内容超出规定行数后展开收起的处理的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
下面小编就为大家分享一篇vue刷新和tab切换实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
本文详细介绍了在Vue项目中实现加载动画的方法,通过在app.vue注入样式、封装js文件及在main.js挂载,最后在页面调用触发的具体步骤,为开发者提供实用指南2026-05-05
这篇文章主要介绍了Vue中的ref,props,mixin属性,文章围绕主题ref,props,mixin展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-05-05
这篇文章主要为大家详细介绍了Vue动态生成表格的行和列，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
最新评论