如何在 Vue 中通过点击菜单项关闭 Vuetify 的 v-menu 组件

本文详解如何在 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" 实现即时关闭。

✅ 正确实现步骤如下：

1. 声明响应式状态（在 Vue 2 Options API 中）：

   立即学习“前端免费学习笔记（深入）”；

   

   歌者PPT

   歌者PPT，AI 写 PPT 永久免费

   下载

   data() {
   return {
    showMenu: false,
    activeTour: false // 根据业务逻辑动态控制
   }
   }

2. 绑定 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"
   >

3. 在需要触发关闭的菜单项上显式绑定点击事件（推荐绑定在 <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 行为的可预测性与可维护性。