element-plus中的dialog弹框在官网示例中都是固定宽度但是不固定高度的,高度由内容撑开。但是很多时候这种样式不是很好看,我们可能会需要固定宽高。这种情况下需要在全局下,新增一个样式设置,专门处理固定高度的弹框样式。
// customComponent.vue
<template>
<el-dialog class="fixedHeightModel">
// 内容区域
<div style="height: 100%"></div>
</el-dialog>
</template>
// global.less
.fixedHeightModel {
position: relative;
display: flex;
flex-direction: column;
.el-dialog__body {
position: relative;
flex: 1;
overflow: auto;
}
}
在有了以上配置后,弹框内的根组件通过设置高度100%即可布满el-dialog__body,然后就可以在固定高度的区域内进行任意布局修改了。