Dialog 结合Vue实现对话框body“二分”布局
需求描述
如下图，
- 把对话框body内容部分，分成上下两部分，其中上部分高度根据窗口大小动态调整，如果内容过多，则出现滚动条，以便滚动查阅被遮挡内容，下部分内容(即关闭|保存按钮所在容器)高度固定。
- 对话框高度不固定，随窗口高度变化而变化
代码实现
<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)的高度，
