el-dialog 貌似不设置样式的时候默认不居中显示,如下所示:
在这里插入图片描述
个人感觉居中好看一点,就修改了样式:

.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% - 200px);
     max-width:calc(100% - 30px);
}
.el-dialog .el-dialog__body {
     flex:1;
     overflow: auto;
}

其中,

 position absolute
 top 50%
 left 50%
 margin 0 !important
 transform translate(-50%, -50%)

是通过 transform 来实现水平和垂直居中。

max-height calc(100% - 30px)
max-width calc(100% - 30px)

是设置对话框的高度和宽度。

display flex
flex-direction column
>.el-dialog__body
overflow auto

以上代码的作用:给 el-dialog__body 加 overflow auto 实现 body内部滚动。

但是,因为overflow容器需要外部限制容器的大小才能产生内部滚动,所以使用 flex 把 el-dialog__body 的大小限制为总大小减去头和尾的大小。

页面效果如下:
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐