欢迎光临
我的个人博客网站

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


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

需求描述

如下图,

  1. 把对话框body内容部分,分成上下两部分,其中上部分高度根据窗口大小动态调整,如果内容过多,则出现滚动条,以便滚动查阅被遮挡内容,下部分内容(即关闭|保存按钮所在容器)高度固定。
  2. 对话框高度不固定,随窗口高度变化而变化

ElementUI Dialog 结合Vue实现对话框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)的高度,

赞(0) 打赏
未经允许不得转载:张拓的天空 » ElementUI Dialog 结合Vue实现对话框body“二分”布局
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏