定义样式如下:
.abow_dialog {
display: flex;
justify-content: center;
align-items: Center;
overflow: hidden;
.el-dialog {
margin: 0 auto !important;
height: 90%;
overflow: hidden;
.el-dialog__body {
position: absolute;
left: 0;
top: 54px;
bottom: 0;
right: 0;
padding: 0;
z-index: 1;
overflow: hidden;
overflow-y: auto;
}
}
}
在el-dialog标签中设置class="abow_dialog"即可
弹窗为页面高度的90%,且上下居中。
el-dialog__body内容部分会根据内容的高度,自动显示上下的滚动条。
结合《directive全局定义侦听window.resize,局部绑定侦听宽高的变化》可实现如下图效果:

————————————————
版权声明:本文为优快云博主「tomabow」的原创文章
原文链接:https://blog.youkuaiyun.com/tomabow/java/article/details/89332683
本文介绍如何使用CSS自定义Element UI的Dialog组件,实现全屏居中显示,并自动调整滚动条。通过定义.abow_dialog样式,使弹窗占页面高度90%,并根据内容高度自动显示滚动条。
2305

被折叠的 条评论
为什么被折叠?



