本文介绍在 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，该事件就会被触发，且此时你仍可同步修改绑定值，从而“撤销”关闭动作。
✅ 正确实现方式
<template>
<q-dialog v-model="dialogOpen" @update:model-value="onDialogUpdate">
<q-card class="q-dialog-plugin">
<q-card-section>
<div class="text-h6">编辑信息</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-input v-model="form.name" label="姓名" />
<q-input v-model="form.email" label="邮箱" />
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="取消" @click="dialogOpen = false" />
<q-btn color="primary" label="保存" @click="saveAndClose" />
</q-card-actions>
</q-card>
</q-dialog>
<!-- 未保存确认弹窗 -->
<q-dialog v-model="confirmDiscardOpen">
<q-card>
<q-card-section>
<div class="text-h6">确认放弃更改？</div>
<div class="q-pt-md">您有未保存的修改，确定要关闭而不保存吗？</div>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="返回编辑" @click="confirmDiscardOpen = false" />
<q-btn color="negative" label="放弃并关闭" @click="forceClose" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
const dialogOpen = ref(false)
const confirmDiscardOpen = ref(false)
const saved = ref(true) // 标记是否已保存（实际项目中建议用 computed 或 reactive 对象追踪脏状态）
const form = ref({ name: '', email: '' })
// 监听 model-value 更新：当 dialog 即将关闭（model 变为 false）时介入
const onDialogUpdate = (val) => {
if (!val && !saved.value) {
// 用户想关，但尚未保存 → 阻止关闭，弹出确认
dialogOpen.value = true // 强制保持打开
confirmDiscardOpen.value = true
}
}
const saveAndClose = () => {
// 实际保存逻辑（如 API 调用）
console.log('保存成功:', form.value)
saved.value = true
dialogOpen.value = false
}
const forceClose = () => {
saved.value = true // 清除脏状态
dialogOpen.value = false
confirmDiscardOpen.value = false
}
// ✨ 进阶提示：自动检测表单变更（推荐）
watch(form, () => {
if (!saved.value) return
saved.value = false // 一旦修改，标记为“未保存”
}, { deep: true })
</script>⚠️ 关键注意事项
- 不要使用 @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）。此时需改用 <q-dialog> 组件方式，或封装自定义 Dialog 组合式函数统一管理关闭逻辑。
通过上述模式，你不仅能优雅拦截关闭行为，还能提供清晰的用户路径——既防止数据意外丢失，又保持交互可控与专业。
