高度固定方案

一. 前言

Element UI组件提高了不少开发效率，使用 Dialog 对话框的时候发现，组件说明文档 (opens new window) 提供了 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里的按钮，如下：

内容过多时，会出现滚动条，也不会超出弹框，如下：