vue el-dialog 对话框居中显示
el-dialog 貌似不设置样式的时候默认不居中显示,如下所示:个人感觉居中好看一点,就修改了样式:.el-dialog {display: flex;flex-direction: column;margin:0 !important;position:absolute;top:50%;left:50%;...
·
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 的大小限制为总大小减去头和尾的大小。
页面效果如下:
更多推荐
所有评论(0)