如何防止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;
  }
}

這樣就可以通過手動關閉的方式來防止誤觸關閉彈窗了。