标签：custom   20px   form   none   info   settings   enter   header   布局   

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)的高度，

ElementUI Dialog 结合Vue实现对话框body“二分”布局

标签：custom   20px   form   none   info   settings   enter   header   布局   

原文地址：https://www.cnblogs.com/shouke/p/14590098.html