vue.js 有办法取消q-dialog上的隐藏吗?

xt0899hw  于 2023-03-03  发布在  Vue.js
关注(0)|答案(1)|浏览(127)

我尝试在包含表单输入的对话框中构建确认模态,这样我就可以通知用户,如果他没有保存就关闭对话框,他所做的更改将会丢失。这意味着每次用户更改输入值并试图退出对话框时,都会显示模态(通过点击外部/退出按钮/关闭按钮)。现在,如果用户决定返回并保存他的更改,我将不得不防止隐藏事件已被解雇。
对话框通过quasar插件调用。
我已经尝试使用@before-hide事件侦听器来侦听和阻止hide事件,但是没有发出任何事件。
还有别的办法吗?

hk8txs48

hk8txs481#

很简单,您可以对输入使用对话框验证来防止关闭
查看此链接:https://quasar.dev/quasar-plugins/dialog#basic-validation

$q.dialog({
          title: 'Prompt',
          message: 'What is your name? (Minimum 3 characters)',
          prompt: {
            model: '',
            isValid: val => val.length > 2, // << here is the magic
            type: 'text' // optional
          },
          cancel: true,
          persistent: true
        }).onOk(data => {
          // console.log('>>>> OK, received', data)
        })
      }

也可以使用onCancel事件保存输入数据

.onCancel(async () => {
      await saveInputs();
    });

相关问题