問題描述：
近期遇見一個問題，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僅做參考）。。。。。
期待有更好的方案。。。。