elementUI el-dialog弹框居中

Posted dyy-dida

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了elementUI el-dialog弹框居中相关的知识,希望对你有一定的参考价值。

添加如下样式,现在这个弹框既能在视窗居中,又能在内容过多时防止弹框大小超出视窗,还能把滚动限制在body内部从而使得头和尾始终可见,再也不用滚上滚下去找各种标题和按钮了!

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

  

 

以上是关于elementUI el-dialog弹框居中的主要内容,如果未能解决你的问题,请参考以下文章

Vue+ElementUI中 el-dialog弹框蒙层问题

如何设置element中el-dialog弹框组件居中窗口

el-dialog 全屏 el-dialog__body高度不够问题

Vue——每次弹出el-dialog,都会执行mounted

elementUI(el-dialog)小记

elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件