elementUI的Dialog对话框(弹框)使用过程中出现灰色遮罩点击才关闭遮罩问题解决办法

617 阅读1分钟

一、问题展示

elementUI的Dialog对话框使用过程中出现灰色遮罩问题,点击弹出弹框按钮时,会显示弹框,但是不会高亮,还需要在点击一次弹框区域才会高亮,如下图:

acd8bb1d47444551a86c72aef410a200.gif

官方文档解决方法如下图,里面提供了一个append-to-body的属性,Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true,默认值为false:

image.png

二、代码部分

修改前代码:

image.png

修改后代码,就是在el-dialog标签上添加一个      :append-to-body="true"

image.png

三、成功解决效果展示

成功解决遮罩问题显示如下图,点击弹出弹框直接高亮显示无遮罩:

9ce9d24d790a433bac7d7ede5d175ca1.gif