解决element弹出多个message提示时消息框重叠的问题

1.场景

项目中使用el-upload上传多个文件,在beforeUpload回调函数中添加了一些验证,需要使用message弹出消息提示。但出现了消息框重叠的现象,网上搜了2种解决方案:
1.使用await异步弹窗。
2.使用this.$nextTick()。
不过上面两种方法都不适合我的场景,第一种方法会造成beforeUpload函数阻塞导致上传出现问题。第二种方法没效果。
后来想到了之前项目中也遇到过类似的情况,当时的方案是使用setTimeout()方法手动添加了一个延迟效果。一尝试果然解决了弹窗重叠的问题,虽然方法很low,不过这不外乎也是解决方案的一种。

2.代码

代码很简单,在需要弹窗的外层套一个setTimeout()就行了:

setTimeout(() => {
	this.$message.error("XXXXXXXXX!");
}, 10);

3.温馨提示

理论上也适用Notification 通知(未尝试)。

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐