本文详解如何在 vuetify 的 `vmenu` 中嵌套 `appdatetimepicker`（基于 vdatepicker）时，防止菜单在点击或选择日期后意外关闭，核心方案是合理使用 `persistent` 与 `no-click-animation` 属性。
在 Vuetify 应用中，将日期/时间选择器（如自定义封装的 AppDateTimePicker）嵌入 VMenu 是常见需求，但默认行为会导致一个典型问题：用户点击日期单元格后，VMenu 立即关闭。这是因为 Vuetify 的 VMenu 默认启用 close-on-content-click（点击菜单内容区域外自动关闭），而日期选择器内部的点击事件可能被冒泡或误判为“菜单外部点击”，尤其在使用第三方封装组件（如 Vuexy 模板中的 AppDateTimePicker）时更为明显。
你可能已尝试过以下常见无效方案：
- 在日期选择器上添加 @click.stop —— 通常无法阻止 VMenu 内部的事件监听逻辑；
- 设置 :close-on-content-click="false" —— 此属性在较新版本 Vuetify（v3.x）中已被移除或不再生效；
- 使用 :disable-keys="true" 或 :retain-focus="true" —— 对点击关闭无实质影响。
✅ 正确解法：启用 persistent 模式
persistent 是 VMenu（以及 VDialog、VTooltip 等）的原生布尔属性，启用后将完全禁用所有自动关闭机制——包括点击遮罩层（scrim）、按 ESC 键、以及点击菜单内容区域外。这正是解决日期选择器干扰问题的关键：
立即学习“前端免费学习笔记（深入）”；
no-click-animation >
⚠️ 注意事项与最佳实践：
- persistent 是“全有或全无”策略：它会同时禁用 ESC 关闭和点击遮罩关闭。若需保留部分关闭能力（例如仍允许按 ESC 关闭），则需手动控制 model-value，结合 @update:model-value 监听并过滤日期选择期间的关闭请求（进阶场景，推荐优先使用 persistent 简化逻辑）。
- no-click-animation 并非必需，但在 persistent 下频繁打开/关闭日期面板时，可避免因 VMenu 内部状态短暂切换导致的视觉闪烁，提升用户体验。
- 确保 AppDateTimePicker 自身未强制调用 this.$emit('update:modelValue') 后主动触发父级菜单关闭逻辑（检查其源码或文档）。若存在此类行为，需在该组件内增加条件判断或通过 v-model 的 .sync 替代方案隔离事件流。
? 总结：面对 VMenu + 日期选择器的关闭冲突，persistent 是 Vuetify 官方支持、简洁可靠的解决方案。它不依赖事件拦截或 DOM 操作，语义清晰且兼容性好。搭配 no-click-animation 即可实现稳定、流畅的交互体验——让菜单真正“专注”于当前任务，直到用户明确完成操作（如点击其他按钮或离开上下文）。
