有没有办法防止 v-dialog 关闭？

Question

我正在使用<v-dialog>组件来显示我的 Web 应用程序的表单。我想实现一个未保存的更改对话框，当用户在不保存的情况下中止更改并根据按钮按下关闭/保持对话框打开时弹出。不幸的是，我在弄清楚如何阻止框架执行的默认关闭操作时遇到了很多麻烦。

因此，据我所知，您可以通过 3 种不同的方式关闭对话框：

1. 将v-model属性设置为false.
2. v-dialog除非persistentprop 设置为 ，否则单击模态外部true。
3. 按退出键。

让我们不用担心关闭我上面引用的对话框的第二种方法，并假设它设置为true.

方法#1：

我的第一种方法是只允许用户在点击表单上的取消按钮时退出对话框。当我试图禁用退出按钮的使用时，我很快就遇到了障碍。

这是我到目前为止所尝试的：在我的 App.vuemounted函数中：

mounted () {
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      console.log('The escape key was pressed.')
      e.preventDefault()
      e.returnValue = false
      e.stopImmediatePropagation()
    }
  })
} 

这应该有效。日志消息显示在控制台中，但按下退出键后对话框仍关闭。我知道我应该在这里使用关键代码，但这是为了可读性。我也试着keyup和keypress没有成功。在 Vue.js 或 Vuetify 框架中一定有一些奇怪的事情发生了。

方法#2：

在尝试禁用转义键失败后，我不得不尝试不同的方法。我尝试在 watch 函数中添加此代码，以尝试在取消时保持对话框打开：

dialog (val) {
  if (val) {
    console.log('Dialog is true')
  } else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
    console.log('User Wants to Keep Dialog Open')
    this.dialog = true
  } else {
    console.log('Dialog is False')
    this.close()
  }
}

当我尝试关闭对话框时，会弹出确认消息，然后我点击了取消按钮。然后，出于某种原因，确认对话框再次打开。所以，我再次点击取消，然后对话框消失了，就像什么都没发生过一样。这是控制台读取的内容：

用户希望保持对话框打开
对话框为真
用户希望保持对话框打开
对话框为真

我明白为什么再次调用对话框监视方法，我不明白为什么confirm对话框再次显示。在第一次取消确认消息后，该代码永远不应该执行。日志消息显示代码不可能再次执行。一定有什么我没有意识到的幕后发生了。

任何人都有防止v-dialog组件关闭的经验？或者对我的两种方法有什么帮助？提前致谢。

Answer 1

这是对话框上的一个属性：

<v-dialog persistent

这将迫使他们保持打开状态，除非您通过切换模型以编程方式调用闭包。