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

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

解决方式:

父级浮层设置:modal-append-to-body="false"属性,同时在子级浮层设置:modal-append-to-body="true" append-to-body属性

Element组件之【Dialog 对话框】

参数说明类型可选值默认值
visible是否显示 Dialog,支持 .sync 修饰符booleanFALSE
titleDialog 的标题,也可通过具名 slot (见下表)传入string
widthDialog 的宽度string50%
fullscreen是否为全屏 DialogbooleanFALSE
topDialog CSS 中的 margin-top 值string15vh
modal是否需要遮罩层booleanTRUE
modal-append-to-body遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上booleanTRUE
append-to-bodyDialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 truebooleanFALSE
lock-scroll是否在 Dialog 出现时将 body 滚动锁定booleanTRUE
custom-classDialog 的自定义类名string
close-on-click-modal是否可以通过点击 modal 关闭 DialogbooleanTRUE
close-on-press-escape是否可以通过按下 ESC 关闭 DialogbooleanTRUE
show-close是否显示关闭按钮booleanTRUE
before-close关闭前的回调,会暂停 Dialog 的关闭function(done),done 用于关闭 Dialog
center是否对头部和底部采用居中布局booleanFALSE

 

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

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐