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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ElementUI Dialog 结合Vue实现对话框body“二分”布局，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1146字，纯文字阅读大概需要2分钟。

内容图文

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“二分”布局全部内容，希望文章能够帮你解决ElementUI Dialog 结合Vue实现对话框body“二分”布局所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---