Element-UI中el-dialog使用遇到的坑：打开弹框再点击浏览器的上一个页面的按钮，弹框的遮罩层没有关闭

大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

---

重现步骤如下：

1. 打开使用el-dialog编写的弹框
2. 点击浏览器的回退按钮
   

现象：弹框的遮罩层没有关闭

解决办法：
根据官网文档可知，在弹框中添加如下代码即可解决
:modal-append-to-body = “false”

原因分析：官方文档的说明入下图

Element-ui中弹框的遮罩层由下面这行代码实现，具体的CSS在此就不写了。通过属性modal-append-to-body控制下面这行代码是插入至body元素之上，还是插入在使用el-dialog的父元素上。

<div class="v-modal" tabindex="0" style="z-index: 2032;"></div>

由于默认是true，即插入在body元素之上。而Vue建立的项目是单页面项目，整个项目总共就只有一个页面。因此按照复现步骤操作，弹框没有点击关闭，body元素中的遮罩层也就没有关闭，点击浏览器的回退按钮也就能够看到弹框的遮罩层。

当modal-append-to-body的值为false时，弹框的遮罩层就插入在使用el-dialog的父元素中，点击点击浏览器的回退按钮，el-dialog所在的父元素不显示，弹框的遮罩层自然也就看不到啦。

弹框示例：

<el-dialog
    :modal-append-to-body="false"
    width="30%"
 >
  这是一个弹框
 </el-dialog>

如果涉及的页面有很多，可以在引入Element UI的地方设置modalAppendToBody的默认值为false，这样效果就是全局的了。

ElementUI（引用Element ui时使用的变量名）.Dialog.props.modalAppendToBody.default = false

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。