Menu 导航菜单

导航菜单一般分为顶部导航和侧边导航，是为页面提供导航功能的菜单列表

顶部导航

顶部导航需要设置 mode="horizontal"

Menu导航菜单 - 图1

  1. <at-menu mode="horizontal" active-name="1">
  2.   <at-menu-item name="1"><i class="icon icon-home"></i>导航菜单一</at-menu-item>
  3.   <at-menu-item name="2" disabled><i class="icon icon-layers"></i>导航菜单二</at-menu-item>
  4.   <at-submenu>
  5.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
  6.     <at-menu-item-group title="分组一">
  7.       <at-menu-item name="3-1">子菜单一</at-menu-item>
  8.       <at-menu-item name="3-2" disabled>子菜单二</at-menu-item>
  9.     </at-menu-item-group>
  10.     <at-menu-item-group title="分组二">
  11.       <at-menu-item name="3-3">子菜单三</at-menu-item>
  12.       <at-menu-item name="3-4">子菜单四</at-menu-item>
  13.     </at-menu-item-group>
  14.   </at-submenu>
  15.   <at-menu-item name="4"><i class="icon icon-settings"></i>导航菜单四</at-menu-item>
  16. </at-menu>

顶部导航（多级菜单）

可以在 AtSubmenu 中嵌套 AtSubmenu 组合成多级菜单

Menu导航菜单 - 图2

  1. <at-menu mode="horizontal" active-name="1">
  2.   <at-menu-item name="1"><i class="icon icon-home"></i>导航菜单一</at-menu-item>
  3.   <at-menu-item name="2"><i class="icon icon-layers"></i>导航菜单二</at-menu-item>
  4.   <at-submenu>
  5.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三</template>
  6.     <at-menu-item name="3-1"><i class="icon icon-settings"></i>导航菜单四</at-menu-item>
  7.     <at-menu-item name="3-2"><i class="icon icon-settings"></i>导航菜单五</at-menu-item>
  8.     <at-submenu>
  9.       <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单六</template>
  10.       <at-menu-item name="3-3-1"><i class="icon icon-settings"></i>导航菜单七</at-menu-item>
  11.       <at-menu-item name="3-3-2"><i class="icon icon-settings"></i>导航菜单八</at-menu-item>
  12.     </at-submenu>
  13.   </at-submenu>
  14.   <at-menu-item name="4"><i class="icon icon-settings"></i>导航菜单四</at-menu-item>
  15. </at-menu>

侧边垂直导航

顶部导航需要设置 mode="vertical"

Menu导航菜单 - 图3

  1. <at-menu mode="vertical" active-name="1">
  2.   <at-menu-item name="1"><i class="icon icon-home"></i>导航菜单一</at-menu-item>
  3.   <at-menu-item name="2" disabled><i class="icon icon-layers"></i>导航菜单二</at-menu-item>
  4.   <at-submenu>
  5.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
  6.     <at-menu-item-group title="分组一">
  7.       <at-menu-item name="3-1">子菜单一</at-menu-item>
  8.       <at-menu-item name="3-2" disabled>子菜单二</at-menu-item>
  9.     </at-menu-item-group>
  10.     <at-menu-item-group title="分组二">
  11.       <at-menu-item name="3-3">子菜单三</at-menu-item>
  12.       <at-menu-item name="3-4">子菜单四</at-menu-item>
  13.     </at-menu-item-group>
  14.   </at-submenu>
  15.   <at-menu-item name="4"><i class="icon icon-settings"></i>导航菜单四</at-menu-item>
  16. </at-menu>

侧边垂直导航（多级菜单）

Menu导航菜单 - 图4

  1. <at-menu mode="vertical" active-name="1">
  2.   <at-menu-item name="1"><i class="icon icon-home"></i>导航菜单一</at-menu-item>
  3.   <at-menu-item name="2"><i class="icon icon-layers"></i>导航菜单二</at-menu-item>
  4.   <at-submenu>
  5.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
  6.     <at-menu-item-group title="分组一">
  7.       <at-menu-item name="3-1">子菜单一</at-menu-item>
  8.       <at-menu-item name="3-2">子菜单二</at-menu-item>
  9.     </at-menu-item-group>
  10.     <at-menu-item-group title="分组二">
  11.       <at-menu-item name="3-3">子菜单三</at-menu-item>
  12.       <at-menu-item name="3-4">子菜单四</at-menu-item>
  13.     </at-menu-item-group>
  14.   </at-submenu>
  15.   <at-submenu>
  16.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单四</template>
  17.     <at-menu-item name="4-1"><i class="icon icon-settings"></i>导航菜单五</at-menu-item>
  18.     <at-menu-item name="4-2"><i class="icon icon-settings"></i>导航菜单六</at-menu-item>
  19.     <at-submenu>
  20.       <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单七</template>
  21.       <at-menu-item name="4-3-1"><i class="icon icon-settings"></i>导航菜单八</at-menu-item>
  22.       <at-menu-item name="4-3-2"><i class="icon icon-settings"></i>导航菜单九</at-menu-item>
  23.     </at-submenu>
  24.   </at-submenu>
  25. </at-menu>

侧边内嵌导航

导航菜单默认 mode="inline"

Menu导航菜单 - 图5

  1. <at-menu active-name="1">
  2.   <at-menu-item name="1"><i class="icon icon-home"></i>导航菜单一</at-menu-item>
  3.   <at-menu-item name="2" disabled><i class="icon icon-layers"></i>导航菜单二</at-menu-item>
  4.   <at-submenu>
  5.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
  6.     <at-menu-item-group title="分组一">
  7.       <at-menu-item name="3-1">子菜单一</at-menu-item>
  8.       <at-menu-item name="3-2">子菜单二</at-menu-item>
  9.     </at-menu-item-group>
  10.     <at-menu-item-group title="分组二">
  11.       <at-menu-item name="3-3">子菜单三</at-menu-item>
  12.       <at-menu-item name="3-4" disabled>子菜单四</at-menu-item>
  13.     </at-menu-item-group>
  14.   </at-submenu>
  15.   <at-menu-item name="4"><i class="icon icon-settings"></i>导航菜单四</at-menu-item>
  16.   <at-submenu disabled>
  17.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三 - 子菜单</template>
  18.     <at-menu-item name="5-1">子菜单一</at-menu-item>
  19.     <at-menu-item name="5-2">子菜单二</at-menu-item>
  20.   </at-submenu>
  21. </at-menu>

每次只展开一个子菜单

设置属性 inline-collapsed，可开启 手风琴模式，即每次只能有一个子菜单被打开。同时 AtSubmenu 组件可使用参数 opened 配置子菜单默认展开

Menu导航菜单 - 图6

  1. <at-menu active-name="1-1" inline-collapsed>
  2.   <at-submenu opened>
  3.     <template slot="title"><i class="icon icon-home"></i>导航菜单一</template>
  4.     <at-menu-item-group title="分组一">
  5.       <at-menu-item name="1-1">子菜单一</at-menu-item>
  6.       <at-menu-item name="1-2">子菜单二</at-menu-item>
  7.     </at-menu-item-group>
  8.     <at-menu-item-group title="分组二">
  9.       <at-menu-item name="1-3">子菜单三</at-menu-item>
  10.       <at-menu-item name="1-4">子菜单四</at-menu-item>
  11.     </at-menu-item-group>
  12.   </at-submenu>
  13.   <at-submenu>
  14.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单二</template>
  15.     <at-menu-item name="2-1">子菜单一</at-menu-item>
  16.     <at-menu-item name="2-2">子菜单二</at-menu-item>
  17.     <at-menu-item name="2-3">子菜单三</at-menu-item>
  18.     <at-menu-item name="2-4">子菜单四</at-menu-item>
  19.   </at-submenu>
  20.   <at-submenu>
  21.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三</template>
  22.     <at-menu-item name="3-1">子菜单一</at-menu-item>
  23.     <at-menu-item name="3-2">子菜单二</at-menu-item>
  24.     <at-menu-item name="3-3">子菜单三</at-menu-item>
  25.     <at-menu-item name="3-4">子菜单四</at-menu-item>
  26.   </at-submenu>
  27.   <at-submenu>
  28.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单四</template>
  29.     <at-menu-item name="4-1">子菜单一</at-menu-item>
  30.     <at-menu-item name="4-2">子菜单二</at-menu-item>
  31.   </at-submenu>
  32. </at-menu>

主题

内置两个主题：light 和 dark。默认使用 light 主题

Menu导航菜单 - 图7

  1. <div class="row" style="margin-bottom: 24px;">
  2.   <at-switch :value="true" @change="changeTheme">
  3.     <span slot="checkedText">Dark</span>
  4.     <span slot="unCheckedText">Light</span>
  5.   </at-switch>
  6.   <at-radio-group v-model="mode" style="margin-left: 40px;">
  7.     <at-radio label="inline">Inline</at-radio>
  8.     <at-radio label="horizontal">Horizontal</at-radio>
  9.     <at-radio label="vertical">Vertical</at-radio>
  10.   </at-radio-group>
  11. </div>
  12. <at-menu :theme="theme" :mode="mode" active-name="0" >
  13.   <at-menu-item name="0" disabled><i class="icon icon-box"></i>子菜单</at-menu-item>
  14.   <at-submenu>
  15.     <template slot="title"><i class="icon icon-home"></i>导航菜单一</template>
  16.     <at-menu-item-group title="分组一">
  17.       <at-menu-item name="1-1">子菜单一</at-menu-item>
  18.       <at-menu-item name="1-2">子菜单二</at-menu-item>
  19.     </at-menu-item-group>
  20.     <at-menu-item-group title="分组二">
  21.       <at-menu-item name="1-3">子菜单三</at-menu-item>
  22.       <at-menu-item name="1-4">子菜单四</at-menu-item>
  23.     </at-menu-item-group>
  24.   </at-submenu>
  25.   <at-submenu>
  26.     <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单二</template>
  27.     <at-menu-item name="2-1">子菜单一</at-menu-item>
  28.     <at-menu-item name="2-2">子菜单二</at-menu-item>
  29.     <at-menu-item name="2-3" disabled>子菜单三</at-menu-item>
  30.     <at-menu-item name="2-4">子菜单四</at-menu-item>
  31.   </at-submenu>
  32.   <at-submenu>
  33.     <template slot="title"><i class="icon icon-command"></i>导航菜单三</template>
  34.     <at-menu-item name="3-1">子菜单一</at-menu-item>
  35.     <at-menu-item name="3-2">子菜单二</at-menu-item>
  36.     <at-menu-item name="3-3">子菜单三</at-menu-item>
  37.     <at-menu-item name="3-4">子菜单四</at-menu-item>
  38.   </at-submenu>
  39.   <at-submenu disabled>
  40.     <template slot="title"><i class="icon icon-inbox"></i>导航菜单四</template>
  41.     <at-menu-item name="4-1">子菜单一</at-menu-item>
  42.     <at-menu-item name="4-2">子菜单二</at-menu-item>
  43.   </at-submenu>
  44. </at-menu>

每次只展开一个子菜单

设置属性 inline-collapsed，可开启 手风琴模式，即每次只能有一个子菜单被打开。同时 AtSubmenu 组件可使用参数 opened 配置子菜单默认展开

Menu导航菜单 - 图8

<at-menu active-name="1-1" inline-collapsed>
  <at-submenu opened>
    <template slot="title"><i class="icon icon-home"></i>导航菜单一</template>
    <at-menu-item-group title="分组一">
      <at-menu-item name="1-1">子菜单一</at-menu-item>
      <at-menu-item name="1-2">子菜单二</at-menu-item>
    </at-menu-item-group>
    <at-menu-item-group title="分组二">
      <at-menu-item name="1-3">子菜单三</at-menu-item>
      <at-menu-item name="1-4">子菜单四</at-menu-item>
    </at-menu-item-group>
  </at-submenu>
  <at-submenu>
    <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单二</template>
    <at-menu-item name="2-1">子菜单一</at-menu-item>
    <at-menu-item name="2-2">子菜单二</at-menu-item>
    <at-menu-item name="2-3">子菜单三</at-menu-item>
    <at-menu-item name="2-4">子菜单四</at-menu-item>
  </at-submenu>
  <at-submenu>
    <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单三</template>
    <at-menu-item name="3-1">子菜单一</at-menu-item>
    <at-menu-item name="3-2">子菜单二</at-menu-item>
    <at-menu-item name="3-3">子菜单三</at-menu-item>
    <at-menu-item name="3-4">子菜单四</at-menu-item>
  </at-submenu>
  <at-submenu>
    <template slot="title"><i class="icon icon-life-buoy"></i>导航菜单四</template>
    <at-menu-item name="4-1">子菜单一</at-menu-item>
    <at-menu-item name="4-2">子菜单二</at-menu-item>
  </at-submenu>
</at-menu>

添加路由链接

除了可以使用 name 配置菜单值，也可以通过 route 属性配置 vue-router 的路由，添加 replace 属性可设置不给 history 添加新记录

Menu导航菜单 - 图9

<at-menu router>
  <at-menu-item :to="{ name: 'Breadcrumb-zh' }">Breadcrumb</at-menu-item>
  <at-menu-item :to="{ name: 'Dropdown-zh' }">Dropdown</at-menu-item>
  <at-menu-item :to="{ name: 'Menu-zh' }">Menu</at-menu-item>
  <at-menu-item :to="{ name: 'Pagination-zh' }">Pagination</at-menu-item>
</at-menu>

Menu 参数

参数说明类型可选值默认值
mode导航菜单的模式Stringinline, horizontal, verticalinline
theme导航菜单的主题Stringlight, darklight
activeName选中的菜单项名称String, Number--
router是否使用 vue-routerBoolean-false
inlineCollapsed是否允许每次只展开一个菜单Boolean-false
width导航菜单的宽度，仅在 vertical 和 inline 模式下有效String-240px

Menu 事件

事件名称说明返回参数
on-select切换菜单时触发选中的菜单的值

MenuGroup 参数

参数说明类型可选值默认值
title分组菜单的组名String--

Submenu 参数

参数说明类型可选值默认值
disabled是否可用Boolean-false
opened是否展开菜单项Boolean-false

MenuItem 参数

参数说明类型可选值默认值
name菜单项的名称String / Number--
to路由跳转对象，同 vue-router 中的 toString / Object--
replace在使用 to 时，是否不需要向 history 添加新记录Boolean-false
disabled是否可用Boolean-false