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

最新推荐文章于 2024-07-04 18:53:51 发布

nidunlove

最新推荐文章于 2024-07-04 18:53:51 发布

阅读量4k

点赞数 1

分类专栏： elementui vue web前端开发前端技巧 css 文章标签： element-ui safari 弹窗 alert confirm

本文链接：https://blog.csdn.net/nidunlove/article/details/90142385

版权

前端技巧同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

web前端开发

7 篇文章 0 订阅

订阅专栏

问题描述：

近期遇见一个问题，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仅做参考）。。。。。

期待有更好的方案。。。。

nidunlove

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
element-ui的confirm和alert弹窗在Safari浏览器看不见的bug及其简单解决

问题描述：近期遇见一个问题，element-ui的$confirm弹窗后执行确认后$alert弹窗。在Chrome正常，但是在Safari则会出现闪现一下alert弹窗，然后只剩下灰色的蒙板，且点击关不掉的问题。问题代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录