本文介绍在 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。此时你可在回调中判断表单是否已保存：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 若已保存（saved.value === true），不做干预，允许关闭；
- 若未保存，则立即将 dialog1.value 重新设为 true，强制保持对话框打开，并同步弹出二次确认 Dialog（如 dialog2）提醒用户。
<template>
<q-dialog v-model="dialog1" @update:model-value="checkForSave">
<q-card style="min-width: 400px">
<q-card-section>
<div class="text-h6">编辑表单</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-input v-model="formData.name" label="姓名" />
<q-input v-model="formData.email" label="邮箱" />
<q-checkbox v-model="saved" label="我已保存更改" />
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="取消" @click="dialog1 = false" />
<q-btn color="primary" label="保存" @click="saveAndClose" />
</q-card-actions>
</q-card>
</q-dialog>
<!-- 二次确认弹窗 -->
<q-dialog v-model="dialog2">
<q-card style="min-width: 350px">
<q-card-section class="text-center">
<div class="text-h6">确认退出？</div>
<div class="text-subtitle2 q-mt-md">您有未保存的更改，确定要放弃吗？</div>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="返回编辑" @click="dialog2 = false" />
<q-btn color="negative" label="放弃并关闭" @click="forceClose" />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
const dialog1 = ref(true)
const dialog2 = ref(false)
const saved = ref(false)
const formData = ref({ name: '', email: '' })
// 监听 model-value 变更 —— 关键拦截点
const checkForSave = (val) => {
if (val === false && !saved.value) {
// 用户想关闭，但尚未保存 → 阻止关闭
dialog1.value = true // 强制维持打开状态
dialog2.value = true // 弹出确认框
}
}
const saveAndClose = () => {
// 实际保存逻辑（如 API 调用）
console.log('表单已保存:', formData.value)
saved.value = true
dialog1.value = false
}
const forceClose = () => {
// 用户明确选择放弃 → 清空状态并关闭
formData.value = { name: '', email: '' }
saved.value = false
dialog1.value = false
dialog2.value = false
}
</script>⚠️ 注意事项与最佳实践
- 不要依赖 @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 应用中处理“防误关 + 表单守卫”的标准实践。
