element ui el-dialog 居中，并且内容多的时候内部可以滚动

一方湖泊

已于 2022-01-26 13:13:38 修改

阅读量1.1k

点赞数

分类专栏： # HTML/CSS/JavaScript 文章标签： css3

于 2022-01-19 20:32:45 首次发布

本文链接：https://blog.youkuaiyun.com/wqkeep/article/details/122589231

版权

HTML/CSS/JavaScript 专栏收录该内容

11 篇文章

订阅专栏

custom-class="pub_dialog"

<el-dialog title="图标设置" :visible.sync="iconModal" custom-class="pub_dialog">
</el-dialog>

css 放到公共css文件里（放到App.vue的css中），不能放到页面的style里

// dialog自定义
.pub_dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
}
 
.pub_dialog .el-dialog__body {
    overflow: auto;
}

参考：https://blog.youkuaiyun.com/zz975896590/article/details/119991141