如何在 Quasar 的 QDialog 中拦截关闭操作并实现未保存提醒

本文介绍在 quasar 框架中，如何通过监听 `@update:model-value` 事件动态阻止 qdialog 关闭，并结合二次确认弹窗，安全处理用户未保存表单数据即尝试退出的场景。

在使用 Quasar 的 QDialog 组件构建带表单的模态框时，一个常见需求是：当用户修改了输入内容但未保存，却试图通过点击遮罩层、按 Esc 键或点击右上角关闭按钮退出时，需主动拦截关闭行为，并提示“更改将丢失”，给予用户「保存」「放弃」或「返回编辑」的选择权。

值得注意的是，QDialog 并不触发传统意义上的 @before-hide 事件（该事件在 Quasar v2+ 中已移除或未暴露），因此不能依赖它进行取消操作。真正的可拦截入口是 @update:model-value 事件——它是 Vue 3 响应式 v-model 的底层更新钩子，只要 dialog 的显示状态（v-model 绑定的布尔值）即将从 true 变为 false，该事件就会被触发，且此时你仍可同步修改绑定值，从而“撤销”关闭动作。

✅ 正确实现方式

⚠️ 关键注意事项

• 不要使用 @hide 或 @before-hide：Quasar 官方文档未定义这些事件，盲目监听将无效。
• @update:model-value 是唯一可靠拦截点：它在模型值变化前/后立即触发，允许你通过重置 v-model 值来“撤回”关闭意图。
• 避免无限循环：确保在 onDialogUpdate 中仅对 val === false（即关闭意图）做干预；若误在 val === true 时也修改 dialogOpen，可能引发响应式死循环。
• 脏状态管理建议：不要仅靠 saved.value 布尔值，而应结合 watch(form, ..., {deep: true}) 或使用 useForm 等组合式函数精准追踪字段变更。
• 插件调用方式兼容性：若你使用 this.$q.dialog(...) 插件语法，该方案不适用（插件不支持 @update:model-value）。此时需改用 组件方式，或封装自定义 Dialog 组合式函数统一管理关闭逻辑。

通过上述模式，你不仅能优雅拦截关闭行为，还能提供清晰的用户路径——既防止数据意外丢失，又保持交互可控与专业。