问题描述:
近期遇见一个问题,element-ui的$confirm弹窗后执行确认后$alert弹窗。
在Chrome正常,但是在Safari则会出现闪现一下alert弹窗,然后只剩下灰色的蒙板,且点击关不掉的问题。
问题代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
},
created: function () {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// this.$message({
// type: 'success',
// message: '删除成功!'
// });
// setTimeout(()=>{
console.log(111)
this.$alert('这是一段内容1115', '标题名称', {
confirmButtonText: '确定',
// closeOnClickModal:true
// callback: action => {
// // this.$message({
// // type: 'info',
// // message: `action: ${ action }`
// // });
// }
});
// },100);
}).catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
this.$alert('这是一段内容2222', '标题名称', {
confirmButtonText: '确定',
// closeOnClickModal:true
// callback: action => {
// // this.$message({
// // type: 'info',
// // message: `action: ${ action }`
// // });
// }
});
});
// `this` 指向 vm 实例
// console.log('a is: ' + this.a)
// this.$alert('这是一段内容', '标题名称', {
// confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
// }
// });
},
monted(){
// this.$alert('这是一段内容', '标题名称', {
// confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`
// });
// }
// });
}
})
</script>
</html>
分析:
如上,$confirm确认弹窗后执行$alert弹窗。Safari只剩下蒙板,但是dom还在。点击隐藏的弹窗位置依旧可以关掉弹窗。。。。
如图dom还在,但是不显示,外层的.el-message-box__wrapper选择右侧元素样式取消或关闭fixed会显示,如下:
估计是element-ui和Safari这边的bug。
出现类似的Safari或者element-ui的问题此可做参考。。。
解决方案:
1.改$alert弹窗为$message的提示方式。。。。。。
2.用setTimeout执行延长$alert的时间,且延迟1s以上(1s仅做参考)。。。。。
期待有更好的方案。。。。