本文详解如何在 vuetify 2 中手动控制 `v-menu` 的显隐状态，解决点击菜单内部组件（如嵌套对话框的列表项）无法自动关闭菜单的问题，核心是结合 `v-model` 绑定与显式赋值实现精准关闭。
在使用 Vuetify 2 的
标准解法是放弃依赖 close-on-click 的自动行为，改用受控模式（controlled mode）：通过 v-model 双向绑定一个布尔响应式变量（如 showMenu），并主动在目标元素上设置 @click="showMenu = false" 实现即时关闭。
✅ 正确实现步骤如下：
-
声明响应式状态（在 Vue 2 Options API 中）：
立即学习“前端免费学习笔记（深入）”；
data() { return { showMenu: false, activeTour: false // 根据业务逻辑动态控制 } } -
绑定 v-model 到 v-menu，并移除对 close-on-click 的过度依赖（它此时可保留用于外部非嵌套区域）：
-
在需要触发关闭的菜单项上显式绑定点击事件（推荐绑定在
上，而非其内部更深层的 v-list-item-title 或自定义组件）： > {{ $t("add_entry") }}
⚠️ 注意事项：
- @click.stop 在 v-list-item-title 上是关键：防止 WorkRegistryDialog 的点击同时触发 v-list-item 的关闭逻辑和自身打开逻辑，造成闪烁或异常；
- 若 WorkRegistryDialog 是一个 v-dialog 类组件，请确保其 v-model 不与 showMenu 冲突——二者应独立控制；
- v-model 绑定的是 showMenu 的当前显示状态，因此任何地方执行 showMenu = false 都会立即收起菜单，具备高度可控性；
- 此方案兼容 Vue 2（Options API）；若使用 Vue 3 + Composition API，需用 ref() 声明 showMenu 并通过 .value 赋值。
总结：当 v-menu 内部存在复杂交互组件时，主动管理 v-model 是最可靠、最易调试的关闭方式。它将控制权交还开发者，避免框架事件机制的不确定性，大幅提升 UI 行为的可预测性与可维护性。
