2026-08-20.md 2.0 KB

2026-08-20 工作记录

Detail.vue 床头卡跳转后关闭失效(keep-alive + el-dialog 动画打断)

现象

  • 用户点床头卡 → 弹窗内"跳转到编辑页" → router.push 跳走 → 用户返回 → 再点床头卡能开 → 但点"关闭预览"关不掉,console 里 handleDialogClose 的 console.log('床头卡弹窗已关闭') 照常打出。

根因

  • 路由 elderly/elder-file/detail/:id 的 meta.noCache = false(src/router/modules/remaining.ts:135),Detail 页被 <keep-alive> 缓存。
  • BedCardModal 的 handleCloseE 同步执行 visible.value = false(触发 el-dialog 关闭动画,约 300ms)后立即 emit('edit'),父级 handleEdit 立刻 router.push(...),路由切换(deactivate)打断了 el-dialog 正在进行的关闭动画。
  • el-dialog 内部动画状态卡死:v-model 已经是 false,但 dialog 实例不再响应后续 modelValue -> false 的关闭动作(但 emit('close') 是同步触发,所以 log 照打)。这就是「log 出来但弹窗没关」的来源。

修复

  • 在 src/views/elderly/elder/elder-file/Detail.vue 的 handleEdit 中:先 dialogVisible.value = false 显式触发关闭,再 setTimeout(..., 350) 等关闭动画走完,再 router.push。
  • 注意:不能依赖 handleCloseE 自己去关,因为它和 router.push 几乎同帧,动画照样被打断。必须由父级在跳转前给动画留出 300+ ms。

验证

  • ESLint:0 errors(仅 1 个历史 warning)

后续可考虑(暂未做)

  • BedCardModal 的 visible = ref(props.modelValue) + 两个 watch 的模式本身就是脆弱的双向同步,容易在不同生命周期/keep-alive 场景下出现 desync。根治方案是改成 computed: ts const visible = computed({ get: () => props.modelValue, set: v => emit('update:modelValue', v) }) 这是个共享组件,改造影响面较大,等真出现其他 desync 再统一改。 ### 文件 - 修改:src/views/elderly/elder/elder-file/Detail.vue(handleEdit)