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

Question

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

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

1. 将v-model 属性设置为false。
2. 在 v-dialog 模式之外单击，除非 persistent 属性设置为 true。
3. 按退出键。

我们不用担心关闭我上面提到的对话框并假设它设置为true 的第二种方式。

方法一：

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

这是我迄今为止尝试过的：在我的 App.vue mounted 函数中：

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：

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

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

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