element-ui的el-dialog 浮层嵌套，第二次弹出的会被遮住

 

困扰了很久的一个问题，就是用element-ui的浮层组件进行浮层嵌套时候，当子浮层关闭时，父级浮层上面会有一层灰色遮罩层

当关闭子级浮层后，父级浮层上面会有一层灰色蒙层

解决方式：

父级浮层设置:modal-append-to-body="false"属性，同时在子级浮层设置:modal-append-to-body="true" 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

 

如有疑问，欢迎小伙伴指正提问！