element-plus弹框dialog组件的自动撑开与固定高度问题

529 阅读1分钟

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,然后就可以在固定高度的区域内进行任意布局修改了。