vue 固定 Dialog 對話方塊的高度

2021-09-26 04:59:30 字數 922 閱讀 1904

element ui元件提高了不少開發效率,使用 dialog 對話方塊的時候發現,元件說明文件提供了 width 來設定 dialog 的寬度,並沒有給出如何固定高度。

對話方塊的高度會隨著對話方塊中內容的多少而變化,如下所示:

內容太多時:

這樣造成的體驗很不好,所以,為了能夠防止內容超出彈框,並且一直看到footer裡的按鈕,需要固定對話方塊的高度,我的解決辦法是:

在對話方塊內容元素的外面加乙個 div,然後設定 div 的高度,並且設定 overflow: auto,這樣,內容超出時會出現滾動條,可以進行滑動,如下:

"roleresdialo**isible" title=

'授權' width=

"25%" center>

="dialogdiv"

>

-expand-all check-strictly>

<

/el-tree>

<

/div>

"footer"

class

="dialog-footer"

>

"roleresdialo**isible=false"

>

}<

/el-button>

"primary" @click=

"roleresconfirm"

>

}<

/el-button>

<

/span>

<

/el-dialog>

Dialog對話方塊

確認對話方塊 單選按鈕對話方塊 多選按鈕對話方塊 列表對話方塊 一 確認對話方塊alertdialog alertdialog.builder builder new alertdialog.builder this 設定名字 builder.settitle 確認對話方塊 設定圖示 builder...

Dialog對話方塊

一 常用的對話方塊 普通對話方塊 單選對話方塊 多選對話方塊 自定義對話方塊 水平進度條對話方塊 圓形進度條對話方塊 日期選擇對話方塊 時間選擇對話方塊 普通對話方塊 button.setonclicklistener new view.onclicklistener builder.setnega...

Element 對話方塊 Dialog

在 dialog取消按鈕或者在對話方塊關閉的before colse事件中新增 closediglog 注意 清空表單一定要給el form item新增prop屬性,不然重置表單無效 上面為一種清空方式 還有種清空方式為 最簡單粗暴就是在dialog對話方塊新增v if,下次開啟對話方塊重新渲染即...