本文介绍在 quasar 框架中，当用户尝试关闭含未保存表单的 qdialog 时，如何可靠拦截关闭行为并弹出确认提示，核心方案是利用 `@update:model-value` 事件配合手动重置 v-model 值。
在 Quasar 应用中，QDialog 组件默认不提供类似 @before-hide.prevent 的可取消原生事件（如点击遮罩、按 Esc 或点击关闭按钮触发的隐藏逻辑），因此无法通过常规的 @before-hide 监听器直接阻止关闭——该事件实际并不存在（Quasar 官方文档及源码均未定义此事件）。
✅ 正确且推荐的解决方案是监听 @update:model-value 事件。该事件在 v-model 值即将被更新为 false（即对话框准备关闭）时同步触发，属于 Vue 的响应式更新钩子，具备完全可控性：
<q-dialog v-model="dialogOpen" @update:model-value="handleDialogClose">
<q-card class="q-dialog-plugin">
<q-card-section>
<q-form @submit="saveAndClose">
<q-input v-model="formData.name" label="Name" />
<q-input v-model="formData.email" label="Email" />
<div class="q-pt-md row justify-end">
<q-btn label="Cancel" flat @click="dialogOpen = false" />
<q-btn label="Save" type="submit" color="primary" />
</div>
</q-form>
</q-card-section>
</q-card>
</q-dialog>
<!-- 二次确认模态框 -->
<q-dialog v-model="showUnsavedConfirm">
<q-card>
<q-card-section class="text-h6">Unsaved Changes</q-card-section>
<q-card-section>You have unsaved changes. Discard and close?</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Go Back" @click="showUnsavedConfirm = false" />
<q-btn flat label="Discard" @click="confirmDiscard" color="negative" />
</q-card-actions>
</q-card>
</q-dialog>import { ref, computed } from 'vue'
const dialogOpen = ref(true)
const showUnsavedConfirm = ref(false)
const formData = ref({ name: '', email: '' })
const initialData = ref({ name: '', email: '' })
const isDirty = computed(() =>
JSON.stringify(formData.value) !== JSON.stringify(initialData.value)
)
const handleDialogClose = (isVisible) => {
// isVisible 为 false 表示用户正试图关闭对话框
if (!isVisible && isDirty.value) {
dialogOpen.value = true // 阻止关闭：强制保持打开状态
showUnsavedConfirm.value = true // 弹出二次确认
}
}
const confirmDiscard = () => {
showUnsavedConfirm.value = false
dialogOpen.value = false // 此时才真正关闭
}
const saveAndClose = () => {
// 执行保存逻辑（如 API 调用）
console.log('Saving:', formData.value)
initialData.value = { ...formData.value }
dialogOpen.value = false
}⚠️ 注意事项：
- 不要使用 event.preventDefault() 或 return false —— @update:model-value 是普通事件，无原生 DOM 事件对象，也无法被“阻止”；
- dialogOpen.value = true 必须在 handleDialogClose 中同步执行，延迟（如 nextTick 或 setTimeout）会导致视觉闪烁或逻辑失效；
- 若对话框由 Quasar 插件（this.$q.dialog()）调用，则需改用
组件方式实现，因为插件 API 不支持拦截关闭逻辑； - 对于复杂表单，建议用 watchDeep 或第三方库（如 useForm）精确追踪脏状态，避免 JSON.stringify 在嵌套对象/函数/Date 等场景下的误判。
总结：@update:model-value 是 Quasar 中唯一稳定、官方支持的对话框关闭拦截入口。结合响应式脏检查与显式 v-model 控制，即可优雅实现「退出前确认」交互，兼顾用户体验与数据安全。
