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实现带自动吸附功能的悬浮球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
ElementUI中el-input无法输入、修改及删除问题解决办法
这篇文章主要给大家介绍了关于ElementUI中el-input无法输入、修改及删除问题的解决办法,这种问题产生是因为input在vue中的受控,我们需要去重新改变一下监听和实现,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了Vue实现无限加载瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本篇文章主要介绍了vue-cli如何快速构建vue项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
示对象存储是腾讯云提供的一种存储海量文件的分布式存储服务，本文主要介绍了用vue.js实现图片上传功能，感兴趣的小伙伴们可以参考一下2021-05-05
自定义指令是 vue 中使用频率仅次于组件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五个生命周期钩子，接下来通过本文给大家详细介绍Vue指令工作原理实现方法，需要的朋友参考下吧2021-06-06
这篇文章主要为大家详细介绍了vue自定义翻页组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
解决Vue运行项目报错proxy error: could not proxy request
这篇文章主要给大家介绍了关于如何解决Vue运行项目报错proxy error:could not proxy request的相关资料,Proxy Error指的是代理服务器无法正确处理请求的错误,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了详解Vue组件之间的数据通信实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了VUE插件vue-treeselect的使用及说明，具有很好的参考价值，希望对大家有所帮助。2023-07-07
最新评论