如何防止el-dialog点击空白不消失？

一、修改源代码

在el-dialog源代码中，我们可以找到click-outside事件的监听函数。

点击弹窗外面的区域弹窗消失，因此，我们可以在监听函数中添加一个判断条件，如果点击了弹窗内部的区域，则不关闭弹窗。

function handleWrapperClick() {
  if (this.closeOnClickModal && !this.closeOnPressEscape) {
    this.close();
  }
}

我们可以修改为：

function handleWrapperClick(evt) {
  const isClickInsideDialog = evt.target.closest('.el-dialog');
  if (this.closeOnClickModal && !this.closeOnPressEscape && !isClickInsideDialog) {
    this.close();
  }
}

这样就可以防止因为点击弹窗内部区域而误关闭弹窗了。

二、增加遮罩层

在el-dialog组件中，遮罩层是在弹窗后层上的蒙版，一般默认情况下，点击遮罩层可以关闭弹窗。如果希望防止因为误触遮罩层而关闭弹窗，则可以在组件中增加配置。

<el-dialog
  :visible.sync="dialogVisible"
  :close-on-click-modal="false">
  <span slot="title">这是标题</span>
  <p>这是内容</p>
</el-dialog>

在这里，我们将close-on-click-modal设置为false，这样点击遮罩层就不会关闭弹窗了。

三、手动关闭

除了修改源代码和增加遮罩层之外，我们也可以在代码中手动关闭弹窗，这样就可以避免误触而关闭了弹窗。比如，我们可以绑定一个方法到弹窗上面的关闭按钮上。

<el-dialog
  :visible.sync="dialogVisible"
  :close-on-click-modal="false">
  <span slot="title">这是标题</span>
  <p>这是内容</p>
  <div slot="footer">
    <el-button @click="closeDialog">关闭</el-button>
  </div>
</el-dialog>

methods: {
  closeDialog() {
    this.dialogVisible = false;
  }
}

这样就可以通过手动关闭的方式来防止误触关闭弹窗了。