解决element弹出多个message提示时消息框重叠的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)