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

 

如有疑問,歡迎小伙伴指正提問!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 element-ui + el-dialog + Vue.component 注冊的tinymce富文本控件 第二次及以后打開dialog出現問題解決方法 element-ui框架的el-dialog彈出框被遮罩層擋住了 element-ui遮罩層el-dialog的使用 element ui el-dialog 中嵌套 el-dialog 出現的遮罩層如何關閉? 餓了么element UI 彈出層 修改默認樣式不能在