Vue.js 是否存在阻止v-dialog关闭的方法？

我正在使用

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

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

将

v-model

属性设置为

false

在

v-对话框

模式之外单击，除非

持久

属性设置为

true

按退出键

让我们不必担心第二种关闭我上面提到的对话框的方法，假设它设置为

true

方法#1:

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

以下是我迄今为止所尝试的：在我的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()
    }
  })
} 

这应该行得通。日志消息显示在控制台中，但按下escape键后对话框仍然关闭。我知道我应该在这里使用关键代码，但这是为了可读性。我还尝试了

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()
  }
}

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

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

我理解为什么再次调用dialog watch方法，但我不理解的是为什么再次显示

confirm

对话框。在第一次取消确认消息后，该代码不应执行。日志消息表明代码不可能再次执行。一定有什么事情发生在幕后，我没有意识到

---

有没有人有过阻止

v-dialog

组件关闭的经验？或者对我的两种方法有什么帮助？提前感谢。

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

<v-dialog persistent

---

你能为你的问题创建一个代码沙盒吗？这样看会更容易。@Ohgodwhy的答案解决了这个问题，尽管Vuetify的文档没有提到它也会阻止退出按钮。Vuetify的文档说，持久性道具只会阻止单击外部，但你是对的，它解决了这个问题。我觉得自己很笨，因为没有先测试一下。下面是他们的文档所说的>在元素外部单击将不会停用它。在我的情况下，返回一页然后再次向前仍然会删除它。。。即使我从不改变模型