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