如何在Vue中阻止HTML <dialog>元素关闭？

首先明确：HTML原生<dialog>的close事件是不可取消的，这就是你用event.preventDefault()和Vue事件修饰符都无效的原因——这个事件是在对话框已经关闭后才触发的，没法回溯阻止关闭动作。

要实现阻止关闭的需求，得从触发关闭的源头入手拦截，下面是具体实现方案：

步骤1：拦截内部关闭按钮的点击 #

不要直接调用dialog.close()，先判断preventClosing状态，再决定是否执行关闭：

import { ref } from 'vue';
const dialogTemplateRef = ref();
let preventClosing = true;

const handleCloseBtnClick = () => {
  if (!preventClosing) {
    dialogTemplateRef.value.close();
  }
};

步骤2：拦截ESC键关闭 #

监听对话框的keydown事件，当按下ESC键时，若preventClosing为true则阻止默认行为：

const handleKeydown = (event) => {
  if (preventClosing && event.key === 'Escape') {
    event.preventDefault();
  }
};

步骤3：拦截Backdrop点击关闭（仅showModal()打开的对话框有效） #

当对话框用showModal()打开时，点击外部背景会触发关闭，需要监听click事件判断点击目标是否为背景，再拦截：

const handleDialogClick = (event) => {
  if (preventClosing && event.target === dialogTemplateRef.value) {
    event.preventDefault();
  }
};

完整代码 #

<button @click="dialogTemplateRef.showModal()">打开对话框</button>
<dialog 
  ref="dialogTemplateRef"
  @keydown="handleKeydown"
  @click="handleDialogClick"
>
  <button @click="handleCloseBtnClick">关闭</button>
</dialog>

import { ref } from 'vue';
const dialogTemplateRef = ref();
let preventClosing = true;

const handleCloseBtnClick = () => {
  if (!preventClosing) {
    dialogTemplateRef.value.close();
  }
};

const handleKeydown = (event) => {
  if (preventClosing && event.key === 'Escape') {
    event.preventDefault();
  }
};

const handleDialogClick = (event) => {
  if (preventClosing && event.target === dialogTemplateRef.value) {
    event.preventDefault();
  }
};

这样就能根据preventClosing的状态，完全控制对话框是否允许关闭了。

内容的提问来源于stack exchange，提问作者launchoverit