elementUI的弹框el-dialog优化高度为视口高度

问题：elementUI的弹框el-dialog高度虽然是根据内容自动撑开，但是当内容很多的时候，往往下面的操作按钮会被遮挡，需要滚动条才能保存，用户体验极差。现在对弹框进行优化1、当内容不多的时候，弹框自动撑开高度就可以。2、内容很多的时候，弹框高度为视口高度的90%（90vh），中间内容区出现滚动条。// el-dialog高度自适应，内容超出时中间出现滚动条.common-dialog {d

SwJieJie

8408人浏览 · 2022-05-31 16:33:06

SwJieJie · 2022-05-31 16:33:06 发布

问题：
elementUI的弹框el-dialog高度虽然是根据内容自动撑开，但是当内容很多的时候，往往下面的操作按钮会被遮挡，需要滚动条才能保存，用户体验极差。
在这里插入图片描述

现在对弹框进行优化
1、当内容不多的时候，弹框自动撑开高度就可以。

2、内容很多的时候，弹框高度为视口高度的90%（90vh），中间内容区出现滚动条。

// el-dialog高度自适应，内容超出时中间出现滚动条
.common-dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        position: relative;
        .el-dialog__header{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: 60px;
            z-index: 1;
        }
        .el-dialog__body {
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            max-height: 90vh;//最大高度为视口高度的90%
            padding-top: 80px;
            padding-bottom: 100px;
            z-index: 1;
        }
        .el-dialog__footer{
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 80px;
            z-index: 1;
        }
    }
}