本文介绍在 quasar 框架中，如何通过 `@update:model-value` 事件拦截 qdialog 的关闭行为，结合状态判断实现“修改未保存时弹出确认提示”的交互逻辑，避免数据意外丢失。
在使用 Quasar 的 QDialog 组件构建表单模态框时，一个常见需求是：当用户已修改表单内容但尚未保存，却尝试通过点击遮罩层、按 Esc 键或点击关闭按钮退出对话框时，需中断默认关闭流程，并弹出二次确认（如“放弃更改？您的修改将丢失”）。遗憾的是，QDialog 并未提供类似 @before-hide 的可取消事件——官方文档与源码均证实该事件并不存在。
✅ 正确且推荐的解决方案是监听 @update:model-value 事件。该事件在 v-model 绑定的布尔值即将被更新为 false（即准备关闭）时触发，属于 vue 的响应式更新钩子，具备完全可控性：你可以在回调中根据业务逻辑决定是否“撤销”关闭动作。
实现步骤
-
绑定 v-model 并监听更新事件
-
在事件处理器中拦截关闭逻辑
使用 ref 管理对话框状态与表单变更标记（例如 hasChanges），并在 @update:model-value 回调中判断：- 若已保存（saved.value === true）→ 允许关闭；
- 若存在未保存修改 → 立即将 dialogopen 重置为 true（强制保持打开），同时弹出确认 Dialog（如 QDialog 或 this.$q.dialog()）：
import { ref, watch } from 'vue' const dialogOpen = ref(false) const hasChanges = ref(false) const saved = ref(true) // 初始为已保存状态 // 监听表单输入变化 watch(() => [form.title, form.content], () => { hasChanges.value = true saved.value = false }) const onDialogUpdate = (isVisible) => { if (isVisible === true) return // 打开时不处理 if (saved.value) return // 已保存，允许关闭 // 阻止关闭：恢复 model 值 dialogOpen.value = true // 弹出确认提示（使用 Quasar Dialog Plugin） this.$q.dialog({ title: '确认放弃更改？', message: '您有未保存的修改，确定要关闭吗？', cancel: true, persistent: true }).onOk(() => { saved.value = true // 标记为已放弃 dialogOpen.value = false }).onCancel(() => { // 用户选择继续编辑，无需额外操作 }) }
注意事项与最佳实践
- ⚠️ 不要依赖 @hide 或 @before-hide：这些事件在 QDialog 中并不存在，属常见误解。
- ✅ @update:model-value 是唯一可靠入口：它在 v-model 被外部（插件、键盘、点击）修改前触发，时机精准。
- ? 手动重置 v-model 是关键：dialogOpen.value = true 必须同步执行，否则 Vue 的响应式系统会立即应用 false 值导致关闭。
- ? 若使用 this.$q.dialog() 插件方式调用（非组件方式），则需改用 persistent: true + 自定义 ok / cancel 回调控制流程，原理相同。
- ? 建议配合 watch 或 computed 追踪表单脏状态（dirty state），避免仅靠 input 事件遗漏初始值比对。
通过该方案，你既能保持 Quasar 的声明式开发体验，又能实现专业级的防误关交互，兼顾用户体验与数据安全性。