如何使el-dialog点击空白处不关闭

要让`element-ui`中的`el-dialog`组件在点击空白区域时不自动关闭，你可以通过设置`custom-class`属性并添加自定义CSS样式来实现。首先，在`el-dialog`上添加一个唯一的`custom-class`：

<el-dialog :custom-class="dialogCustomClass" title="标题">
  <!-- 内容 -->
</el-dialog>

<script>
export default {
  data() {
    return {
      dialogCustomClass: ''
    };
  },
  //...
}
</script>

然后，在CSS中阻止默认的点击事件关闭行为，并保持对话框打开状态。例如，你可以选择对话框的容器元素（`.el-dialog__wrap`）来添加这个样式：

.dialog-custom-wrap {
  pointer-events: none; /* 阻止点击穿透 */
}

.dialog-custom-wrap:hover {
  pointer-events: auto; /* 当鼠标悬停时，恢复点击行为 */
}

接着，在Vue实例中，当`dialogCustomClass`有值时应用这个样式：

methods: {
  openDialog() {
    this.dialogCustomClass = 'dialog-custom-wrap';
    // 其他对话框打开操作
  },
  closeDialog() {
    this.dialogCustomClass = '';
    // 关闭对话框操作
  }
},
mounted() {
  this.openDialog();
}

现在，当你想要显示对话框时，调用`openDialog()`，用户需要鼠标悬停或者点击对话框内的内容才能关闭它。当不再需要这个功能时，调用`closeDialog()`。