困擾了很久的一個問題,就是用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 |
如有疑問,歡迎小伙伴指正提問!