el-dialog

一、显示灰色蒙板和点击灰色蒙板不关闭弹窗

    <el-dialog
      class="main-dialog"
      :title="title"
      :visible.sync="open"
      width="500px"
      :before-close="handleClose"
      append-to-body <!-- 显示 灰色蒙板 -->
      :close-on-click-modal ="false" <!-- 点击 灰色区域不会关闭弹窗 -->
    >

二、配合上面使用，适用于 form 表单的字段比较多的时候，它会固定一个高度，使 弹窗 里面的内容显示在这个 区域 内，但伴随一个问题：height: 80% 设置会将弹窗的长度固定，当你点击弹窗下面的区域（80%）以内，会出现 弹窗关闭不掉 的问题。

可以通过 一 中 :close-on-click-modal= "false" 来解决。

.main-dialog {
  height: 80%;
  .el-dialog__body {
    flex-direction: column;
    display: flex;
    height: calc(100% - 54px);
    padding: 0px 20px 20px 20px;
    overflow: no-content;
    .load-settings-form {
      flex: 1;
      overflow: auto;
    }
    .dialog-footer {
      flex-shrink: 0;
      text-align: center;
    }
  }
}