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

如有疑问,欢迎小伙伴指正提问!

原文地址:https://www.cnblogs.com/itzfz/p/15032863.html