如何中止Quasar q-dialog隐藏事件？表单未保存弹窗拦截需求

核心思路 #

由于你是通过Quasar的$q.dialog()插件调用对话框，而非模板内的<q-dialog>组件，@before-hide事件并不适用。需要通过自定义关闭逻辑+表单修改状态跟踪来实现需求：禁用默认关闭行为，在触发关闭时（ESC、外部点击、关闭按钮）先判断是否需要弹出确认框。

具体实现步骤 #

1. 跟踪表单修改状态 #

在调用Dialog的组件中，定义变量标记表单是否被修改：

data() {
  return {
    isFormDirty: false,
    formData: { /* 初始化表单数据 */ }
  }
}

在表单输入框绑定输入事件，修改时标记状态：

<!-- 你的表单组件内部 -->
<q-input v-model="formData.username" @input="$emit('form-dirty', true)" />

在父组件中监听子组件的事件更新状态：

// 调用Dialog时的props配置
props: {
  formData: this.formData,
  onFormDirty: (dirty) => { this.isFormDirty = dirty }
}

2. 自定义Dialog插件的关闭行为 #

调用$q.dialog()时禁用默认关闭，手动绑定所有触发关闭的场景：

this.$q.dialog({
  component: require('./YourFormComponent.vue').default,
  props: {
    formData: this.formData,
    onFormDirty: (dirty) => { this.isFormDirty = dirty }
  },
  preventClose: true, // 禁用ESC、外部点击的默认关闭
  onEscape: () => this.handleCloseConfirm(), // 监听ESC键
  onBackdropClick: () => this.handleCloseConfirm(), // 监听外部点击
  buttons: [
    {
      label: '关闭',
      handler: () => this.handleCloseConfirm()
    },
    {
      label: '保存',
      color: 'primary',
      handler: () => {
        // 执行表单保存逻辑
        this.saveFormData();
        this.$q.dialog.hide(); // 保存成功后手动关闭
        this.isFormDirty = false;
      }
    }
  ]
})

3. 实现关闭确认逻辑 #

编写handleCloseConfirm方法，根据表单状态判断是否弹出确认：

handleCloseConfirm() {
  // 表单未修改，直接关闭
  if (!this.isFormDirty) {
    this.$q.dialog.hide();
    return;
  }

  // 弹出确认模态框
  this.$q.dialog({
    title: '确认关闭',
    message: '未保存的内容将会丢失，确定要关闭吗？',
    cancel: true,
    persistent: true, // 点击外部不会关闭确认框
    onOk: () => {
      // 用户确认关闭，关闭原对话框
      this.$q.dialog.hide();
      this.isFormDirty = false;
    },
    onCancel: () => {
      // 用户选择返回，不做任何操作，保留原对话框
    }
  })
}

关键注意点 #

• preventClose: true是核心配置，它会阻止Dialog的默认关闭行为，让我们能完全控制关闭逻辑。
• 如果表单组件是独立封装的，一定要通过props或事件将表单修改状态传递到调用Dialog的父组件中。
• 确认框需要设置persistent: true，避免用户点击外部误关闭确认框。

内容的提问来源于stack exchange，提问作者Smasher