本文介绍在 quasar 框架中，当用户修改表单后试图关闭 qdialog（如点击遮罩、按 esc 或点关闭按钮）时，如何拦截关闭行为并弹出确认提示，防止数据丢失。核心方案是利用 `@update:model-value` 事件配合手动重置 v-model 值实现“取消隐藏”。
在 Quasar 中，QDialog 默认不提供类似 @before-hide.prevent 的可取消原生事件（如 @hide 或 @before-hide 并不会接收 event.preventDefault()），因此无法像原生 DOM 事件那样直接阻止关闭。但得益于 Vue 3 的响应式 v-model 机制，QDialog 支持 v-model="show" 双向绑定，其底层会触发 @update:model-value 事件——这是唯一可靠、可干预的关闭拦截入口。
✅ 正确做法：监听 @update:model-value 并动态控制 v-model
当用户触发关闭动作（点击外部、按 Esc、点右上角 ×），Quasar 会先将 v-model 绑定的响应式变量（如 dialog1.value）设为 false，随即触发 @update:model-value。此时你可在回调中判断表单是否已保存：
- 若已保存（saved.value === true），不做干预，允许关闭；
- 若未保存，则立即将 dialog1.value 重新设为 true，强制保持对话框打开，并同步弹出二次确认 Dialog（如 dialog2）提醒用户。
⚠️ 注意事项与最佳实践
- 不要依赖 @hide 或 @before-hide：Quasar 官方文档明确说明这些事件不支持取消（event.cancelable === false），调用 event.preventDefault() 无效。
- @update:model-value 是唯一可控时机：它在 v-model 值变更后立即触发，且你拥有完全控制权——通过重置 v-model 即可“撤回”关闭动作。
- 避免无限循环：确保 checkForSave 中只在 val === false（即关闭意图）且未保存时才重置 dialog1.value = true；否则可能引发响应式死循环。
- 搭配 watch 更灵活？：若需更细粒度控制（如监听表单字段变化自动标记 dirty），建议额外使用 watch(formData, () => dirty.value = true)，而非仅依赖 saved 开关。
- 插件调用方式同样适用：即使你通过 this.$q.dialog({...}) 插件方式打开 Dialog，其内部仍基于 QDialog 组件，因此推荐改用组件方式以获得完整控制能力。
通过该方案，你既能保障用户体验（及时提醒数据风险），又能精准掌控 Dialog 生命周期，是 Quasar 应用中处理“防误关 + 表单守卫”的标准实践。
