Element UI组件提高了不少开发效率,使用 Dialog 对话框的时候发现,组件说明文档提供了 width 来设置 Dialog 的宽度,并没有给出如何固定高度。
对话框的高度会随着对话框中内容的多少而变化,如下所示:
内容太多时:
这样造成的体验很不好,所以,为了能够防止内容超出弹框,并且一直看到footer里的按钮,需要固定对话框的高度,我的解决办法是:
在对话框内容元素的外面加一个 div,然后设置 div 的高度,并且设置 overflow: auto,这样,内容超出时会出现滚动条,可以进行滑动,如下:
<el-dialog :visible.sync="roleResDialogVisible" title='提示' width="25%" center>
<div class="sync-dialog__div">
<el-tree show-checkbox default-expand-all check-strictly>
</el-tree>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="roleResDialogVisible=false">
{{ $t('sysManage.cancel') }}
</el-button>
<el-button type="primary" @click="roleResConfirm">
{{ $t('sysManage.confirm') }}
</el-button>
</span>
</el-dialog>
<style lang="scss" scoped>
.sync-dialog__div {
height: 300px;
overflow: auto;
}
</style>
复制代码
这样,不管内容多少,都可以防止内容超出弹框,并且一直看到footer里的按钮,如下:
内容过多时,会出现滚动条,也不会超出弹框,如下: