单击事件未在 antd 菜单项中触发

Question

我正在使用 vue3 和 antdv 创建一个动态菜单

MenuItem.vue

<template>
  <slot name="menu-item" :items="[data]" />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: ['data']
})
</script>

MenuGroup.vue

<template>
  <a-sub-menu>
    <template #title>
      <component v-if="data.icon" :is="data.icon"></component>
      <span>{{ data.label }}</span>
    </template>
    <slot name="menu-item" :items="data.items" />
  </a-sub-menu>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: ['data']
})
</script>

Layout.vue

     <a-menu theme="dark" mode="inline" v-model:selectedKeys="selectedKeys">  
        <component v-for="block in menu" :key="block.key" :is="block.component" :data="block">
          <template v-slot:menu-item="{ items }">
            <a-menu-item v-for="item in items" :key="item.key" @click="handleMenuClick">
              <component v-if="item.icon" :is="item.icon"></component>
              <span>{{ item.label }}</span>
            </a-menu-item>
          </template>
        </component>
      </a-menu>

编辑： 在菜单里面放一个普通的菜单项会触发点击事件

     <a-menu-item @click="handleMenuClick">
          <span>title</span>
        </a-menu-item>

我的项目数组：

     [
  {
    key: 'keyA',
    label: 'labelA',
    icon: HomeOutlined,
    component: MenuItem,
    route: '/someroute'
  },
  {
    key: 'keyB',
    label: 'labelB',
    icon: HomeOutlined,
    component: MenuGroup,
    items: [
      {
        key: 'keyc',
        label: 'labelc',
        icon: ToolOutlined,
        route: '/route-sample'
      }
    ]
  }

代码看起来可以工作，但是当我点击子菜单 keyc 时，函数 handleMenuClick 被调用，点击 keya 什么都没有发生....我做错了什么？

sandbox

Answer 1

看起来 ant design 实现了自己的点击处理程序，当它可用时将覆盖您设置的任何内容。

您最好在<a-menu> 或onTitleClick 中使用onClick 来表示<a-sub-menu> 项目