版本

vue 2.6.10

element-ui 2.15.6

場景描述

在使用element ui 的時候使用了 dialog 對話框組件 但是對話框打開后，頁面會先被黑色遮罩，點擊一下頁面后，遮罩層消失，然后可以正常使用 dialog 框

1. 點擊取消編輯按鈕

1. 頁面整體變暗

1. 點擊任意黑暗的地方，頁面恢復正常，dialog框可以正常使用

解決方案

找到element官網(wǎng)

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

下拉找到這個屬性

在el-dialog標簽上加上這個屬性即可

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

解決后效果

陰影會遮罩在dialog框下方，就是dialog框變保持亮度，其他區(qū)域變暗

補充

如果不希望有陰影，可以將 是否需要遮罩層 設置為 false

在el-dialog標簽上加上這個屬性即可

:modal="false"