单击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函数时，通过单击keya nothing happen....what，我做错了什么？

沙盒

Answer 1

看起来，ant设计实现了自己的单击处理程序，当安装程序可用时，它将覆盖任何设置。

您最好在<a-menu>或onTitleClick中对<a-sub-menu>项使用<a-sub-menu>