Menu导航菜单 - 图1

Menu 导航菜单

为页面和功能提供导航的菜单列表。

何时使用

导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

更多布局和导航的使用可以参考：通用布局。

代码演示

  • ···

  • Menu导航菜单 - 图2 Navigation One

  • ···

  • Menu导航菜单 - 图3 Navigation Two

  • ···

  • Menu导航菜单 - 图4 Navigation Three - Submenu

  • ···

  • Navigation Four - Link

  • ···

顶部导航

水平的顶部导航菜单。

  1. <template>
  2.   <a-menu v-model:selectedKeys="current" mode="horizontal">
  3.     <a-menu-item key="mail">
  4.       <mail-outlined />
  5.       Navigation One
  6.     </a-menu-item>
  7.     <a-menu-item key="app" disabled>
  8.       <appstore-outlined />
  9.       Navigation Two
  10.     </a-menu-item>
  11.     <a-sub-menu>
  12.       <template #title>
  13.         <span class="submenu-title-wrapper">
  14.           <setting-outlined />
  15.           Navigation Three - Submenu
  16.         </span>
  17.       </template>
  18.       <a-menu-item-group title="Item 1">
  19.         <a-menu-item key="setting:1">Option 1</a-menu-item>
  20.         <a-menu-item key="setting:2">Option 2</a-menu-item>
  21.       </a-menu-item-group>
  22.       <a-menu-item-group title="Item 2">
  23.         <a-menu-item key="setting:3">Option 3</a-menu-item>
  24.         <a-menu-item key="setting:4">Option 4</a-menu-item>
  25.       </a-menu-item-group>
  26.     </a-sub-menu>
  27.     <a-menu-item key="alipay">
  28.       <a href="https://antdv.com" target="_blank" rel="noopener noreferrer">
  29.         Navigation Four - Link
  30.       </a>
  31.     </a-menu-item>
  32.   </a-menu>
  33. </template>
  34. <script lang="ts">
  35. import { defineComponent, ref } from 'vue';
  36. import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
  37. export default defineComponent({
  38.   setup() {
  39.     const current = ref<string[]>(['mail']);
  40.     return {
  41.       current,
  42.     };
  43.   },
  44.   components: {
  45.     MailOutlined,
  46.     AppstoreOutlined,
  47.     SettingOutlined,
  48.   },
  49. });
  50. </script>

  • Menu导航菜单 - 图5Navigation One

    • Menu导航菜单 - 图6Item 1

      • Option 1
      • Option 2

    • Item 2

      • Option 3
      • Option 4

  • Menu导航菜单 - 图7Navigation Two

  • Menu导航菜单 - 图8Navigation Three

内嵌菜单

垂直菜单，子菜单内嵌在菜单区域。

  1. <template>
  2.   <a-menu
  3.     id="dddddd"
  4.     style="width: 256px"
  5.     v-model:openKeys="openKeys"
  6.     v-model:selectedKeys="selectedKeys"
  7.     mode="inline"
  8.     @click="handleClick"
  9.   >
  10.     <a-sub-menu key="sub1" @titleClick="titleClick">
  11.       <template #title>
  12.         <span>
  13.           <MailOutlined />
  14.           <span>Navigation One</span>
  15.         </span>
  16.       </template>
  17.       <a-menu-item-group key="g1">
  18.         <template #title>
  19.           <QqOutlined />
  20.           <span>Item 1</span>
  21.         </template>
  22.         <a-menu-item key="1">Option 1</a-menu-item>
  23.         <a-menu-item key="2">Option 2</a-menu-item>
  24.       </a-menu-item-group>
  25.       <a-menu-item-group key="g2" title="Item 2">
  26.         <a-menu-item key="3">Option 3</a-menu-item>
  27.         <a-menu-item key="4">Option 4</a-menu-item>
  28.       </a-menu-item-group>
  29.     </a-sub-menu>
  30.     <a-sub-menu key="sub2" @titleClick="titleClick">
  31.       <template #title>
  32.         <span>
  33.           <AppstoreOutlined />
  34.           <span>Navigation Two</span>
  35.         </span>
  36.       </template>
  37.       <a-menu-item key="5">Option 5</a-menu-item>
  38.       <a-menu-item key="6">Option 6</a-menu-item>
  39.       <a-sub-menu key="sub3" title="Submenu">
  40.         <a-menu-item key="7">Option 7</a-menu-item>
  41.         <a-menu-item key="8">Option 8</a-menu-item>
  42.       </a-sub-menu>
  43.     </a-sub-menu>
  44.     <a-sub-menu key="sub4">
  45.       <template #title>
  46.         <span>
  47.           <SettingOutlined />
  48.           <span>Navigation Three</span>
  49.         </span>
  50.       </template>
  51.       <a-menu-item key="9">Option 9</a-menu-item>
  52.       <a-menu-item key="10">Option 10</a-menu-item>
  53.       <a-menu-item key="11">Option 11</a-menu-item>
  54.       <a-menu-item key="12">Option 12</a-menu-item>
  55.     </a-sub-menu>
  56.   </a-menu>
  57. </template>
  58. <script lang="ts">
  59. import { defineComponent, ref, watch } from 'vue';
  60. import { MailOutlined, QqOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
  61. export default defineComponent({
  62.   setup() {
  63.     const selectedKeys = ref<string[]>(['1']);
  64.     const openKeys = ref<string[]>(['sub1']);
  65.     const handleClick = (e: Event) => {
  66.       console.log('click', e);
  67.     };
  68.     const titleClick = (e: Event) => {
  69.       console.log('titleClick', e);
  70.     };
  71.     watch(
  72.       () => openKeys,
  73.       val => {
  74.         console.log('openKeys', val);
  75.       },
  76.     );
  77.     return {
  78.       selectedKeys,
  79.       openKeys,
  81.       handleClick,
  82.       titleClick,
  83.     };
  84.   },
  85.   components: {
  86.     MailOutlined,
  87.     QqOutlined,
  88.     AppstoreOutlined,
  89.     SettingOutlined,
  90.   },
  91. });
  92. </script>

Menu导航菜单 - 图9

缩起内嵌菜单

内嵌菜单可以被缩起/展开。

你可以在 Layout 里查看侧边布局结合的完整示例。

  1. <template>
  2.   <div style="width: 256px">
  3.     <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
  4.       <MenuUnfoldOutlined v-if="collapsed" />
  5.       <MenuFoldOutlined v-else />
  6.     </a-button>
  7.     <a-menu
  8.       mode="inline"
  9.       theme="dark"
  10.       :inline-collapsed="collapsed"
  11.       v-model:openKeys="openKeys"
  12.       v-model:selectedKeys="selectedKeys"
  13.     >
  14.       <a-menu-item key="1">
  15.         <PieChartOutlined />
  16.         <span>Option 1</span>
  17.       </a-menu-item>
  18.       <a-menu-item key="2">
  19.         <DesktopOutlined />
  20.         <span>Option 2</span>
  21.       </a-menu-item>
  22.       <a-menu-item key="3">
  23.         <InboxOutlined />
  24.         <span>Option 3</span>
  25.       </a-menu-item>
  26.       <a-sub-menu key="sub1">
  27.         <template #title>
  28.           <span>
  29.             <MailOutlined />
  30.             <span>Navigation One</span>
  31.           </span>
  32.         </template>
  33.         <a-menu-item key="5">Option 5</a-menu-item>
  34.         <a-menu-item key="6">Option 6</a-menu-item>
  35.         <a-menu-item key="7">Option 7</a-menu-item>
  36.         <a-menu-item key="8">Option 8</a-menu-item>
  37.       </a-sub-menu>
  38.       <a-sub-menu key="sub2">
  39.         <template #title>
  40.           <span>
  41.             <AppstoreOutlined />
  42.             <span>Navigation Two</span>
  43.           </span>
  44.         </template>
  45.         <a-menu-item key="9">Option 9</a-menu-item>
  46.         <a-menu-item key="10">Option 10</a-menu-item>
  47.         <a-sub-menu key="sub3" title="Submenu">
  48.           <a-menu-item key="11">Option 11</a-menu-item>
  49.           <a-menu-item key="12">Option 12</a-menu-item>
  50.         </a-sub-menu>
  51.       </a-sub-menu>
  52.     </a-menu>
  53.   </div>
  54. </template>
  55. <script lang="ts">
  56. import { defineComponent, reactive, toRefs, watch } from 'vue';
  57. import {
  58.   MenuFoldOutlined,
  59.   MenuUnfoldOutlined,
  60.   PieChartOutlined,
  61.   MailOutlined,
  62.   DesktopOutlined,
  63.   InboxOutlined,
  64.   AppstoreOutlined,
  65. } from '@ant-design/icons-vue';
  66. export default defineComponent({
  67.   setup() {
  68.     const state = reactive({
  69.       collapsed: false,
  70.       selectedKeys: ['1'],
  71.       openKeys: ['sub1'],
  72.       preOpenKeys: ['sub1'],
  73.     });
  75.     watch(
  76.       () => state.openKeys,
  77.       (val, oldVal) => {
  78.         state.preOpenKeys = oldVal;
  79.       },
  80.     );
  81.     const toggleCollapsed = () => {
  82.       state.collapsed = !state.collapsed;
  83.       state.openKeys = state.collapsed ? [] : state.preOpenKeys;
  84.     };
  86.     return {
  87.       ...toRefs(state),
  88.       toggleCollapsed,
  89.     };
  90.   },
  91.   components: {
  92.     MenuFoldOutlined,
  93.     MenuUnfoldOutlined,
  94.     PieChartOutlined,
  95.     MailOutlined,
  96.     DesktopOutlined,
  97.     InboxOutlined,
  98.     AppstoreOutlined,
  99.   },
  100. });
  101. </script>

Menu导航菜单 - 图10

只展开当前父级菜单

点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

  1. <template>
  2.   <div>
  3.     <a-menu
  4.       style="width: 256px"
  5.       mode="inline"
  6.       :openKeys="openKeys"
  7.       v-model:selectedKeys="selectedKeys"
  8.       @openChange="onOpenChange"
  9.     >
  10.       <a-sub-menu key="sub1">
  11.         <template #title>
  12.           <span>
  13.             <MailOutlined />
  14.             <span>Navigation One</span>
  15.           </span>
  16.         </template>
  17.         <a-menu-item key="1">Option 1</a-menu-item>
  18.         <a-menu-item key="2">Option 2</a-menu-item>
  19.         <a-menu-item key="3">Option 3</a-menu-item>
  20.         <a-menu-item key="4">Option 4</a-menu-item>
  21.       </a-sub-menu>
  22.       <a-sub-menu key="sub2">
  23.         <template #title>
  24.           <span>
  25.             <AppstoreOutlined />
  26.             <span>Navigation Two</span>
  27.           </span>
  28.         </template>
  29.         <a-menu-item key="5">Option 5</a-menu-item>
  30.         <a-menu-item key="6">Option 6</a-menu-item>
  31.         <a-sub-menu key="sub3" title="Submenu">
  32.           <a-menu-item key="7">Option 7</a-menu-item>
  33.           <a-menu-item key="8">Option 8</a-menu-item>
  34.         </a-sub-menu>
  35.       </a-sub-menu>
  36.       <a-sub-menu key="sub4">
  37.         <template #title>
  38.           <span>
  39.             <SettingOutlined />
  40.             <span>Navigation Three</span>
  41.           </span>
  42.         </template>
  43.         <a-menu-item key="9">Option 9</a-menu-item>
  44.         <a-menu-item key="10">Option 10</a-menu-item>
  45.         <a-menu-item key="11">Option 11</a-menu-item>
  46.         <a-menu-item key="12">Option 12</a-menu-item>
  47.       </a-sub-menu>
  48.     </a-menu>
  49.   </div>
  50. </template>
  51. <script lang="ts">
  52. import { defineComponent, reactive, toRefs } from 'vue';
  53. import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
  54. export default defineComponent({
  55.   setup() {
  56.     const state = reactive({
  57.       rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
  58.       openKeys: ['sub1'],
  59.       selectedKeys: [],
  60.     });
  61.     const onOpenChange = (openKeys: string[]) => {
  62.       const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
  63.       if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
  64.         state.openKeys = openKeys;
  65.       } else {
  66.         state.openKeys = latestOpenKey ? [latestOpenKey] : [];
  67.       }
  68.     };
  69.     return {
  70.       ...toRefs(state),
  71.       onOpenChange,
  72.     };
  73.   },
  74.   components: {
  75.     MailOutlined,
  76.     AppstoreOutlined,
  77.     SettingOutlined,
  78.   },
  79. });
  80. </script>

Menu导航菜单 - 图11

切换菜单类型

展示动态切换模式。

  1. <template>
  2.   <div>
  3.     <a-switch @change="changeMode" />
  4.     Change Mode
  5.     <span class="ant-divider" style="margin: 0 1em" />
  6.     <a-switch @change="changeTheme" />
  7.     Change Theme
  8.     <br />
  9.     <br />
  10.     <a-menu
  11.       style="width: 256px"
  12.       v-model:openKeys="openKeys"
  13.       v-model:selectedKeys="selectedKeys"
  14.       :mode="mode"
  15.       :theme="theme"
  16.     >
  17.       <a-menu-item key="1">
  18.         <MailOutlined />
  19.         Navigation One
  20.       </a-menu-item>
  21.       <a-menu-item key="2">
  22.         <CalendarOutlined />
  23.         Navigation Two
  24.       </a-menu-item>
  25.       <a-sub-menu key="sub1">
  26.         <template #title>
  27.           <span>
  28.             <AppstoreOutlined />
  29.             <span>Navigation Three</span>
  30.           </span>
  31.         </template>
  32.         <a-menu-item key="3">Option 3</a-menu-item>
  33.         <a-menu-item key="4">Option 4</a-menu-item>
  34.         <a-sub-menu key="sub1-2" title="Submenu">
  35.           <a-menu-item key="5">Option 5</a-menu-item>
  36.           <a-menu-item key="6">Option 6</a-menu-item>
  37.         </a-sub-menu>
  38.       </a-sub-menu>
  39.       <a-sub-menu key="sub2">
  40.         <template #title>
  41.           <span>
  42.             <SettingOutlined />
  43.             <span>Navigation Four</span>
  44.           </span>
  45.         </template>
  46.         <a-menu-item key="7">Option 7</a-menu-item>
  47.         <a-menu-item key="8">Option 8</a-menu-item>
  48.         <a-menu-item key="9">Option 9</a-menu-item>
  49.         <a-menu-item key="10">Option 10</a-menu-item>
  50.       </a-sub-menu>
  51.     </a-menu>
  52.   </div>
  53. </template>
  54. <script lang="ts">
  55. import { defineComponent, reactive, toRefs } from 'vue';
  56. import {
  57.   MailOutlined,
  58.   CalendarOutlined,
  59.   AppstoreOutlined,
  60.   SettingOutlined,
  61. } from '@ant-design/icons-vue';
  62. export default defineComponent({
  63.   setup() {
  64.     const state = reactive({
  65.       mode: 'inline',
  66.       theme: 'light',
  67.       selectedKeys: ['1'],
  68.       openKeys: ['sub1'],
  69.     });
  70.     const changeMode = (checked: boolean) => {
  71.       state.mode = checked ? 'vertical' : 'inline';
  72.     };
  73.     const changeTheme = (checked: boolean) => {
  74.       state.theme = checked ? 'dark' : 'light';
  75.     };
  76.     return {
  77.       ...toRefs(state),
  78.       changeMode,
  79.       changeTheme,
  80.     };
  81.   },
  82.   components: {
  83.     MailOutlined,
  84.     CalendarOutlined,
  85.     AppstoreOutlined,
  86.     SettingOutlined,
  87.   },
  88. });
  89. </script>

Menu导航菜单 - 图12

主题

内建了两套主题 light 和 dark，默认 light。

  1. <template>
  2.   <div>
  3.     <a-switch
  4.       :checked="theme === 'dark'"
  5.       checked-children="Dark"
  6.       un-checked-children="Light"
  7.       @change="changeTheme"
  8.     />
  9.     <br />
  10.     <br />
  11.     <a-menu
  12.       style="width: 256px"
  13.       v-model:openKeys="openKeys"
  14.       v-model:selectedKeys="selectedKeys"
  15.       mode="inline"
  16.       :theme="theme"
  17.     >
  18.       <a-menu-item key="1">
  19.         <MailOutlined />
  20.         Navigation One
  21.       </a-menu-item>
  22.       <a-menu-item key="2">
  23.         <CalendarOutlined />
  24.         Navigation Two
  25.       </a-menu-item>
  26.       <a-sub-menu key="sub1">
  27.         <template #title>
  28.           <span>
  29.             <AppstoreOutlined />
  30.             <span>Navigation Three</span>
  31.           </span>
  32.         </template>
  33.         <a-menu-item key="3">Option 3</a-menu-item>
  34.         <a-menu-item key="4">Option 4</a-menu-item>
  35.         <a-sub-menu key="sub1-2" title="Submenu">
  36.           <a-menu-item key="5">Option 5</a-menu-item>
  37.           <a-menu-item key="6">Option 6</a-menu-item>
  38.         </a-sub-menu>
  39.       </a-sub-menu>
  40.       <a-sub-menu key="sub2">
  41.         <template #title>
  42.           <span>
  43.             <SettingOutlined />
  44.             <span>Navigation Four</span>
  45.           </span>
  46.         </template>
  47.         <a-menu-item key="7">Option 7</a-menu-item>
  48.         <a-menu-item key="8">Option 8</a-menu-item>
  49.         <a-menu-item key="9">Option 9</a-menu-item>
  50.         <a-menu-item key="10">Option 10</a-menu-item>
  51.       </a-sub-menu>
  52.     </a-menu>
  53.   </div>
  54. </template>
  55. <script lang="ts">
  56. import { defineComponent, reactive, toRefs } from 'vue';
  57. import {
  58.   MailOutlined,
  59.   CalendarOutlined,
  60.   AppstoreOutlined,
  61.   SettingOutlined,
  62. } from '@ant-design/icons-vue';
  63. export default defineComponent({
  64.   setup() {
  65.     const state = reactive({
  66.       theme: 'dark',
  67.       selectedKeys: ['1'],
  68.       openKeys: ['sub1'],
  69.     });
  70.     const changeTheme = (checked: boolean) => {
  71.       state.theme = checked ? 'dark' : 'light';
  72.     };
  74.     return {
  75.       ...toRefs(state),
  76.       changeTheme,
  77.     };
  78.   },
  79.   components: {
  80.     MailOutlined,
  81.     CalendarOutlined,
  82.     AppstoreOutlined,
  83.     SettingOutlined,
  84.   },
  85. });
  86. </script>
  • Menu导航菜单 - 图13 Navigation One
  • Menu导航菜单 - 图14 Navigation Two

  • Menu导航菜单 - 图15Navigation Three

  • Menu导航菜单 - 图16Navigation Four

垂直菜单

子菜单是弹出的形式。

  1. <template>
  2.   <a-menu
  3.     v-model:openKeys="openKeys"
  4.     v-model:selectedKeys="selectedKeys"
  5.     style="width: 256px"
  6.     mode="vertical"
  7.     @click="handleClick"
  8.   >
  9.     <a-menu-item key="1">
  10.       <MailOutlined />
  11.       Navigation One
  12.     </a-menu-item>
  13.     <a-menu-item key="2">
  14.       <CalendarOutlined />
  15.       Navigation Two
  16.     </a-menu-item>
  17.     <a-sub-menu key="sub1">
  18.       <template #title>
  19.         <span>
  20.           <AppstoreOutlined />
  21.           <span>Navigation Three</span>
  22.         </span>
  23.       </template>
  24.       <a-menu-item key="3">Option 3</a-menu-item>
  25.       <a-menu-item key="4">Option 4</a-menu-item>
  26.       <a-sub-menu key="sub1-2" title="Submenu">
  27.         <a-menu-item key="5">Option 5</a-menu-item>
  28.         <a-menu-item key="6">Option 6</a-menu-item>
  29.       </a-sub-menu>
  30.     </a-sub-menu>
  31.     <a-sub-menu key="sub2">
  32.       <template #title>
  33.         <span>
  34.           <SettingOutlined />
  35.           <span>Navigation Four</span>
  36.         </span>
  37.       </template>
  38.       <a-menu-item key="7">Option 7</a-menu-item>
  39.       <a-menu-item key="8">Option 8</a-menu-item>
  40.       <a-menu-item key="9">Option 9</a-menu-item>
  41.       <a-menu-item key="10">Option 10</a-menu-item>
  42.     </a-sub-menu>
  43.   </a-menu>
  44. </template>
  45. <script lang="ts">
  46. import { defineComponent, reactive, toRefs, VNodeChild } from 'vue';
  47. import {
  48.   MailOutlined,
  49.   CalendarOutlined,
  50.   AppstoreOutlined,
  51.   SettingOutlined,
  52. } from '@ant-design/icons-vue';
  54. interface MenuInfo {
  55.   key: string;
  56.   keyPath: string[];
  57.   item: VNodeChild;
  58.   domEvent: MouseEvent;
  59. }
  60. export default defineComponent({
  61.   setup() {
  62.     const state = reactive({
  63.       selectedKeys: [],
  64.       openKeys: [],
  65.     });
  66.     const handleClick = (e: MenuInfo) => {
  67.       console.log('click ', e);
  68.     };
  69.     return {
  70.       ...toRefs(state),
  71.       handleClick,
  72.     };
  73.   },
  74.   components: {
  75.     MailOutlined,
  76.     CalendarOutlined,
  77.     AppstoreOutlined,
  78.     SettingOutlined,
  79.   },
  80. });
  81. </script>

Menu导航菜单 - 图17

单文件递归菜单

使用单文件方式递归生成菜单。

  1. <template>
  2.   <div style="width: 256px">
  3.     <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
  4.       <MenuUnfoldOutlined v-if="collapsed" />
  5.       <MenuFoldOutlined v-else />
  6.     </a-button>
  7.     <a-menu
  8.       :default-selected-keys="['1']"
  9.       :default-open-keys="['2']"
  10.       mode="inline"
  11.       theme="dark"
  12.       :inline-collapsed="collapsed"
  13.     >
  14.       <template v-for="item in list" :key="item.key">
  15.         <template v-if="!item.children">
  16.           <a-menu-item :key="item.key">
  17.             <PieChartOutlined />
  18.             <span>{{ item.title }}</span>
  19.           </a-menu-item>
  20.         </template>
  21.         <template v-else>
  22.           <sub-menu :menu-info="item" :key="item.key" />
  23.         </template>
  24.       </template>
  25.     </a-menu>
  26.   </div>
  27. </template>
  28. <script lang="ts">
  29. import { defineComponent, ref } from 'vue';
  30. import {
  31.   MenuFoldOutlined,
  32.   MenuUnfoldOutlined,
  33.   PieChartOutlined,
  34.   MailOutlined,
  35. } from '@ant-design/icons-vue';
  37. // you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js
  38. const SubMenu = {
  39.   name: 'SubMenu',
  40.   props: {
  41.     menuInfo: {
  42.       type: Object,
  43.       default: () => ({}),
  44.     },
  45.   },
  46.   template: `
  47.     <a-sub-menu :key="menuInfo.key" v-bind="$attrs">
  48.       <template #title>
  49.         <span>
  50.           <MailOutlined /><span>{{ menuInfo.title }}</span>
  51.         </span>
  52.       </template>
  53.       <template v-for="item in menuInfo.children" :key="item.key">
  54.         <template v-if="!item.children">
  55.           <a-menu-item :key="item.key">
  56.             <PieChartOutlined />
  57.             <span>{{ item.title }}</span>
  58.           </a-menu-item>
  59.         </template>
  60.         <template v-else>
  61.           <sub-menu :menu-info="item" :key="item.key" />
  62.         </template>
  63.       </template>
  64.     </a-sub-menu>
  65.   `,
  66.   components: {
  67.     PieChartOutlined,
  68.     MailOutlined,
  69.   },
  70. };
  71. const list = [
  72.   {
  73.     key: '1',
  74.     title: 'Option 1',
  75.   },
  76.   {
  77.     key: '2',
  78.     title: 'Navigation 2',
  79.     children: [
  80.       {
  81.         key: '2.1',
  82.         title: 'Navigation 3',
  83.         children: [{ key: '2.1.1', title: 'Option 2.1.1' }],
  84.       },
  85.     ],
  86.   },
  87. ];
  88. export default defineComponent({
  89.   setup() {
  90.     const collapsed = ref<boolean>(false);
  92.     const toggleCollapsed = () => {
  93.       collapsed.value = !collapsed.value;
  94.     };
  95.     return {
  96.       list,
  97.       collapsed,
  98.       toggleCollapsed,
  99.     };
  100.   },
  101.   components: {
  102.     'sub-menu': SubMenu,
  103.     MenuFoldOutlined,
  104.     MenuUnfoldOutlined,
  105.     PieChartOutlined,
  106.   },
  107. });
  108. </script>

API

  1. <template>
  2.   <a-menu>
  3.     <a-menu-item>菜单项</a-menu-item>
  4.     <a-sub-menu title="子菜单">
  5.       <a-menu-item>子菜单项</a-menu-item>
  6.     </a-sub-menu>
  7.   </a-menu>
  8. </template>

Menu

参数说明类型默认值
forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
inlineCollapsedinline 时菜单是否收起状态boolean-
inlineIndentinline 模式的菜单缩进宽度number24
mode菜单类型，现在支持垂直、水平、和内嵌模式三种string: vertical vertical-right horizontal inlinevertical
multiple是否允许多选booleanfalse
openKeys(v-model)当前展开的 SubMenu 菜单项 key 数组string[]
selectable是否允许选中booleantrue
selectedKeys(v-model)当前选中的菜单项 key 数组string[]
subMenuCloseDelay用户鼠标离开子菜单后关闭延时，单位：秒number0.1
subMenuOpenDelay用户鼠标进入子菜单后开启延时，单位：秒number0
theme主题颜色string: light darklight
overflowedIndicator自定义 Menu 折叠时的图标DOM<span>···</span>

Menu 事件

事件名称说明回调参数
click点击 MenuItem 调用此函数function({ item, key, keyPath })
deselect取消选中时调用，仅在 multiple 生效function({ item, key, selectedKeys })
openChangeSubMenu 展开/关闭的回调function(openKeys: string[])
select被选中时调用function({ item, key, selectedKeys })

Menu.Item

参数说明类型默认值
disabled是否禁用booleanfalse
keyitem 的唯一标志string
title设置收缩时展示的悬浮标题string

Menu.SubMenu

参数说明类型默认值版本
popupClassName子菜单样式string1.5.0
disabled是否禁用booleanfalse
key唯一标志string
title子菜单项值string|slot
expandIcon自定义 Menu 展开收起图标slot箭头图标

Menu.SubMenu 的子元素必须是 MenuItem 或者 SubMenu.

SubMenu 事件

事件名称说明回调参数
titleClick点击子菜单标题({ key, domEvent })

Menu.ItemGroup

参数说明类型默认值
title分组标题string||function|slot

Menu.ItemGroup 的子元素必须是 MenuItem.

Menu.Divider

菜单项分割线，只用在弹出菜单内。