element 的el-dialog 浮层嵌套,第二次弹出的会被遮住
困扰了很久的一个问题,就是用element-ui的浮层组件进行浮层嵌套时候,当子浮层关闭时,父级浮层上面会有一层灰色遮罩层
当关闭子级浮层后,父级浮层上面会有一层灰色蒙层
解决方式:
父级浮层设置:modal-append-to-body="false"属性,同时在子级浮层设置:modal-append-to-body="true" 和 append-to-body属性
根据我的实际情况,只用设置 append-to-body 即可
Element组件之【Dialog 对话框】
参数 | 说明 | 类型 | 可选值 | 默认值 |
visible | 是否显示 Dialog,支持 .sync 修饰符 | boolean | — | FALSE |
title | Dialog 的标题,也可通过具名 slot (见下表)传入 | string | — | — |
width | Dialog 的宽度 | string | — | 50% |
fullscreen | 是否为全屏 Dialog | boolean | — | FALSE |
top | Dialog CSS 中的 margin-top 值 | string | — | 15vh |
modal | 是否需要遮罩层 | boolean | — | TRUE |
modal-append-to-body | 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 | boolean | — | TRUE |
append-to-body | Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true | boolean | — | FALSE |
lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | TRUE |
custom-class | Dialog 的自定义类名 | string | — | — |
close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | TRUE |
close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | TRUE |
show-close | 是否显示关闭按钮 | boolean | — | TRUE |
before-close | 关闭前的回调,会暂停 Dialog 的关闭 | function(done),done 用于关闭 Dialog | — | — |
center | 是否对头部和底部采用居中布局 | boolean | — | FALSE |