element-ui的confirm和alert弹窗在Safari浏览器看不见的bug及其简单解决

最新推荐文章于 2026-08-11 09:50:44 发布

原创最新推荐文章于 2026-08-11 09:50:44 发布 · 4.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端技巧

vue

web前端开发

本文描述了在Safari浏览器中使用Element-UI的$confirm和$alert弹窗时遇到的显示问题，提供了两种解决方案：改用$message提示或使用setTimeout延时执行$alert。

问题描述：

近期遇见一个问题，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>