解决element中对话框遮挡的问题，让你的页面更美观

原创已于 2025-06-09 15:57:04 修改 · 3.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

于 2021-11-04 09:30:45 首次发布

element 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种解决Element UI中Dialog嵌套时遮罩层遮挡问题的方法。通过调整append-to-body属性，可以确保第二个弹窗不会被遮罩层遮挡，从而改善用户体验。

前言

你是否有过这样的经历：当你在使用 element 中的 dialog 对话框时，第一个弹框还没有关闭的时候，第二个弹框却已经弹出了，结果页面被遮罩层挡住了，让人感到十分烦躁。这种情况在开发中很常见，但却不是无解的问题。本文将会介绍一种解决这个问题的方法，让你在开发中避免这种令人困扰的情况。让我们一起来看看吧！

`element` 嵌套 `dialog` 遮罩层的问题，如下图：

在这里插入图片描述

通过翻阅 element 官方 api 我发现在 dialog 组件上有这么一个属性定义了嵌套 dialog 的解决办法，通过将 append-to-body 放在第二个 dialog 组件上即可解决被遮罩层遮住的问题。

在这里插入图片描述

append-to-body是 boolean 值，默认是 false，我们只需要在第二个 dialog 组件上将它设置为 true 即可，:append-to-body="true"

栗子

<div class="popUp">
  <!-- // 第一个弹出框 //-->
  <el-dialog title="维修详情" :visible.sync="outerVisible">
  	<!-- // 第二个弹出框 //-->
    <el-dialog width="40%" title="维修视频" :visible.sync="innerVisible" :append-to-body="true">
      <div class="videoBox"><video :src="wxsp" controls="controls"></video></div>
    </el-dialog>
  </el-dialog>
</div>