vue固定Dialog对话框的高度

Element UI组件提高了不少开发效率&＃xff0c;使用 Dialog 对话框的时候发现&＃xff0c;组件说明文档提供了 width 来设置 Dialog 的宽度&＃xff0c;并没有给出如何固定高度。

对话框的高度会随着对话框中内容的多少而变化&＃xff0c;如下所示&＃xff1a;

内容太多时&＃xff1a;

这样造成的体验很不好&＃xff0c;所以&＃xff0c;为了能够防止内容超出弹框&＃xff0c;并且一直看到footer里的按钮&＃xff0c;需要固定对话框的高度&＃xff0c;我的解决办法是&＃xff1a;

在对话框内容元素的外面加一个 div&＃xff0c;然后设置 div 的高度&＃xff0c;并且设置 overflow: auto&＃xff0c;这样&＃xff0c;内容超出时会出现滚动条&＃xff0c;可以进行滑动&＃xff0c;如下&＃xff1a;

<el-dialog :visible.sync&＃61;"roleResDialogVisible" title&＃61;&＃39;授权&＃39; width&＃61;"25%" center><div class&＃61;"dialogDiv"><el-tree show-checkbox default-expand-all check-strictly></el-tree></div><span slot&＃61;"footer" class&＃61;"dialog-footer"><el-button &＃64;click&＃61;"roleResDialogVisible&＃61;false">{{ $t(&＃39;sysManage.cancel&＃39;) }}</el-button><el-button type&＃61;"primary" &＃64;click&＃61;"roleResConfirm">{{ $t(&＃39;sysManage.confirm&＃39;) }}</el-button></span>
</el-dialog>
<style lang&＃61;"scss" scoped> .dialogDiv {height: 300px;overflow: auto;}
</style>


这样&＃xff0c;不管内容多少&＃xff0c;都可以防止内容超出弹框&＃xff0c;并且一直看到footer里的按钮&＃xff0c;如下&＃xff1a;

内容过多时&＃xff0c;会出现滚动条&＃xff0c;也不会超出弹框&＃xff0c;如下&＃xff1a;