版本

vue 2.6.10

element-ui 2.15.6

场景描述

在使用element ui 的时候使用了 dialog 对话框组件 但是对话框打开后，页面会先被黑色遮罩，点击一下页面后，遮罩层消失，然后可以正常使用 dialog 框

1. 点击取消编辑按钮

1. 页面整体变暗

1. 点击任意黑暗的地方，页面恢复正常，dialog框可以正常使用

解决方案

找到element官网

https://element.eleme.cn/#/zh-CN/component/dialog

下拉找到这个属性

在el-dialog标签上加上这个属性即可

:modal-append-to-body="false"

解决后效果

阴影会遮罩在dialog框下方，就是dialog框变保持亮度，其他区域变暗

补充

如果不希望有阴影，可以将 是否需要遮罩层 设置为 false

在el-dialog标签上加上这个属性即可

:modal="false"