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 的大小限制为总大小减去头和尾的大小。
页面效果如下: