本文详解如何在 vuetify 2 中手动控制 `v-menu` 的显隐状态，解决点击菜单内部组件（如嵌套对话框的列表项）无法自动关闭菜单的问题，核心是结合 `v-model` 绑定与显式赋值实现精准关闭。
在使用 Vuetify 2 的 <v-menu> 组件时，close-on-click 属性仅对菜单直接子元素的原生点击事件生效，而当菜单内容中嵌套了自定义组件（如 <WorkRegistryDialog>），且其内部通过 @click 或插槽激活器（#activator）接管交互逻辑时，点击事件可能被拦截或冒泡中断，导致 v-menu 无法自动关闭。
标准解法是放弃依赖 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-menu v-model="showMenu" transition="slide-y-transition" bottom left offset-y nudge-bottom="2" :close-on-click="!activeTour" >
-
在需要触发关闭的菜单项上显式绑定点击事件（推荐绑定在 <v-list-item> 上，而非其内部更深层的 v-list-item-title 或自定义组件）：
<v-list-item @click="showMenu = false"> <WorkRegistryDialog class="work-registry-activator"> <template #activator="{ on: dialog, attrs }"> <v-list-item-title v-bind="attrs" v-on="dialog" @click.stop="zamknij" <!-- 阻止冒泡，避免重复触发 menu 关闭 --> > {{ $t("add_entry") }} </v-list-item-title> </template> </WorkRegistryDialog> </v-list-item>
⚠️ 注意事项：
- @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 行为的可预测性与可维护性。
