ElementUI Dialog 結合Vue實現對話框body“二分”布局

Dialog 結合Vue實現對話框body“二分”布局

需求描述

如下圖，

1. 把對話框body內容部分，分成上下兩部分，其中上部分高度根據窗口大小動態調整，如果內容過多，則出現滾動條，以便滾動查閱被遮擋內容，下部分內容(即關閉|保存按鈕所在容器)高度固定。
2. 對話框高度不固定，隨窗口高度變化而變化

代碼實現

<template>
  <el-dialog
    title="負載配置"
    width="60%"
    :visible="dialogVisible"
    custom-class="dialog-settings"
  >
    <load-settings-form :loadSettingsForm="loadSettingsForm" ref="loadSettingsForm"></load-settings-form>
    <div class="dialog-footer">
      <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為對話框標題欄(即class=".el-dialog__header"的div)的高度，