0

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

菜单项.vue

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

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

菜单组.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>

布局.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没有任何反应......我做错了什么？

沙盒

4

1 回答 1

0

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

您最好使用onClickin the<a-menu>或onTitleClickfor <a-sub-menu>items

于 2021-01-04T21:25:40.907 回答