防止 HTML <dialog> 用 Vue 关闭

Question

我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码：

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

//I want this toggle to prevent it from closing...
let preventClosing = true;

const closingHandler = function(event){
  //...but it has no effect
  if(preventClosing){
    event.preventDefault();
  } 
}

<button @click="dialogTemplateRef.showModal()">open</button>
<dialog ref="dialogTemplateRef" @close="closingHandler">
  <button @click="dialogTemplateRef.close()">close</button>
</dialog>

使用

event.preventDefault()

无法阻止对话框关闭。使用 Vue 的事件修饰符（如

.stop

或

.prevent

）似乎也没有效果。这可能吗？

Answer 1

我发现这是不可能的。它与 Vue 无关，而是 HTML 对话框元素的关闭事件。事实证明，关闭事件“不可取消，不会冒泡。”