如何在 Vue 中点击菜单项后手动关闭 Vuetify 2 的下拉菜单

在 vuetify 2 中，当菜单内嵌套自定义组件（如对话框封装器）时，`close-on-click` 可能失效；通过绑定 `v-model` 控制菜单显隐，并在目标列表项添加 `@click="showmenu = false"` 即可可靠关闭。

Vuetify 2 的 默认支持 close-on-click 属性，但该行为仅对直接子元素的原生点击事件生效。一旦菜单项中嵌套了自定义组件（例如 ），其内部事件冒泡或 v-on 绑定可能干扰默认关闭逻辑，导致点击后菜单未关闭。

解决方法是放弃完全依赖 close-on-click，改用显式状态控制：为 绑定 v-model，将其与一个布尔响应式数据（如 showMenu）关联，从而获得完全可控的打开/关闭能力。

以下是优化后的代码结构：

拍我AI

AI视频生成平台PixVerse的国内版本

下载

<template>
  <v-menu
    v-model="showMenu" <!-- 关键：双向绑定控制显隐 -->
    transition="slide-y-transition"
    bottom
    left
    offset-y
    nudge-bottom="2"
    :close-on-click="!activeTour"
  >
    <template #activator="{ on, attrs }">
      <v-btn
        icon
        class="ml-md-4"
        v-bind="attrs"
        v-on="on"
      >
        <v-icon>mdi-plus-circle</v-icon>
      </v-btn>
    </template>

    <v-list>
      <!-- 在 v-list-item 上显式关闭菜单 -->
      <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" <!-- .stop 防止事件冒泡触发多次关闭 -->
            >
              {{ $t("add_entry") }}
            </v-list-item-title>
          </template>
        </WorkRegistryDialog>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false, // 初始关闭
      activeTour: false // 根据业务逻辑动态设置
    }
  },
  methods: {
    zamknij() {
      // 处理对话框打开逻辑（如显示表单）
      this.$nextTick(() => {
        // 确保 DOM 更新后执行（如有必要）
      })
    }
  }
}
</script>

✅ 关键要点说明：

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

• v-model="showMenu" 让菜单状态完全受控，避免 close-on-click 的不可靠性；
• @click="showMenu = false" 直接作用于 ，确保点击即关闭；
• 对内部 @click 添加 .stop 修饰符（如 @click.stop="zamknij"），防止事件冒泡导致重复触发或干扰菜单关闭；
• 若需在关闭菜单的同时打开对话框，建议将 zamknij 逻辑与 showMenu = false 合并调用，或使用 $nextTick 确保菜单 DOM 已移除后再操作子组件。

此方案兼容 Vuetify 2.x 全版本，不依赖外部监听器，简洁、健壮且易于维护。