vue element ui 打开弹窗出现黑框问题

最新推荐文章于 2024-08-06 09:59:19 发布

夏小花花

最新推荐文章于 2024-08-06 09:59:19 发布

阅读量790

点赞数 5

分类专栏： Vue javascript css 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xiaohua616/article/details/138007075

版权

42 篇文章 1 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

文章讲述了作者在项目开发中遇到的弹框嵌套问题，即在Vue的ElementUI中，当一个Dialog中嵌套另一个Dialog时，外部Dialog会显示一个黑色边框。通过设置`append-to-body`属性，问题得以解决。

摘要由CSDN通过智能技术生成

问题描述

大家好！今天是2024年4月20日 | 农历三月十二，周六的我又做在公司里面写起了代码

今天在做项目的时候遇到一个奇怪的问题，如下图所示：

因为这个页面我做了两个弹框，先弹出来第一个弹框，然后再通过第一个弹框打开第二个弹框，当打开第二个弹框的时候，就会出现一个黑色的框，当你鼠标在点击一下的时候就消失了

当时我满脑子都是问号？？？？这是咋回事，应该查找资料，最后完美解决，解决方案如下：

在这里插入图片描述

在el-dialog代码块中添加append-to-body属性
如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性

 <el-dialog
        title="批量备注"
        :visible.sync="dialogVisible"
        append-to-body
        width="50%">

大家如果有遇到类似相同的问题，可以试一下这种解决方案！！！

关注

专栏目录