Dialog 結合Vue實作對話框body“二分”布局
需求描述
如下圖，
- 把對話框body內容部分，分成上下兩部分，其中上部分高度根據視窗大小動態調整，如果內容過多，則出現滾動條，以便滾動查閱被遮擋內容，下部分內容(即關閉|保存按鈕所在容器)高度固定，
- 對話框高度不固定，隨視窗高度變化而變化
代碼實作
<template>
<el-dialog
title="負載配置"
width="60%"
:visible="dialogVisible"
custom-
>
<load-settings-form :loadSettingsForm="loadSettingsForm" ref="loadSettingsForm"></load-settings-form>
<div >
<el-button @click="closeDialog">關閉</el-button>
<el-button type="primary" @click="saveLoadSettings('loadSettingsForm')">保存</el-button>
</div>
</el-dialog>
</template>
<script>
// 略
</script>
<style lang="scss">
.dialog-settings {
height: 70%;
.el-dialog__body {
height: auto;
flex-direction: column;
display: flex;
height: calc(100% - 54px);
padding: 0px 20px 20px 20px;
overflow: none;
.load-settings-form {
flex: 1;
overflow: auto;
}
.dialog-footer {
flex-shrink: 0;
text-align: center;
}
}
}
</style>
說明：
height: calc(100% - 54px); // 設定對話框body高度為對話框高度-對話框標題欄高度
這里的54px為對話框標題欄(即的div)的高度，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270839.html
標籤：Html/Css
上一篇：day03---Vue(03)
下一篇：有意思！不規則邊框的生成方案