问题:
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;
        }
    }
}

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐