Menu 导航菜单

概述

为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。

注意：非 template/render 模式下，需使用 i-menu。

代码示例

Menu 导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

通过设置属性 theme 为 light、dark、primary 可以选择主题。

通过事件 on-select 可以得到点击菜单的 name 值，从而控制页面路由或自定义操作。

  1. <template>
  2.     <Menu mode="horizontal" :theme="theme1" active-name="1">
  3.         <MenuItem name="1">
  4.             <Icon type="ios-paper" />
  5.             内容管理
  6.         </MenuItem>
  7.         <MenuItem name="2">
  8.             <Icon type="ios-people" />
  9.             用户管理
  10.         </MenuItem>
  11.         <Submenu name="3">
  12.             <template slot="title">
  13.                 <Icon type="ios-stats" />
  14.                 统计分析
  15.             </template>
  16.             <MenuGroup title="使用">
  17.                 <MenuItem name="3-1">新增和启动</MenuItem>
  18.                 <MenuItem name="3-2">活跃分析</MenuItem>
  19.                 <MenuItem name="3-3">时段分析</MenuItem>
  20.             </MenuGroup>
  21.             <MenuGroup title="留存">
  22.                 <MenuItem name="3-4">用户留存</MenuItem>
  23.                 <MenuItem name="3-5">流失用户</MenuItem>
  24.             </MenuGroup>
  25.         </Submenu>
  26.         <MenuItem name="4">
  27.             <Icon type="ios-construct" />
  28.             综合设置
  29.         </MenuItem>
  30.     </Menu>
  31.     <br>
  32.     <p>Change theme</p>
  33.     <RadioGroup v-model="theme1">
  34.         <Radio label="light"></Radio>
  35.         <Radio label="dark"></Radio>
  36.         <Radio label="primary"></Radio>
  37.     </RadioGroup>
  38. </template>
  39. <script>
  40.     export default {
  41.         data () {
  42.             return {
  43.                 theme1: 'light'
  44.             }
  45.         }
  46.     }
  47. </script>

Menu 导航菜单 - 图2

侧栏导航

垂直导航菜单，可以内嵌子菜单。

设置 active-name 可以选中指定的菜单，设置 open-names 可以展开指定的子菜单。

设置属性 accordion 可以开启手风琴模式，每次只能展开一个子菜单。

通过设置属性 theme 为 light、dark 可以选择主题，侧栏菜单不支持 primary 主题。

  1. <template>
  2.     <Row>
  3.         <Col span="8">
  4.             <Menu :theme="theme2">
  5.                 <Submenu name="1">
  6.                     <template slot="title">
  7.                         <Icon type="ios-paper" />
  8.                         内容管理
  9.                     </template>
  10.                     <MenuItem name="1-1">文章管理</MenuItem>
  11.                     <MenuItem name="1-2">评论管理</MenuItem>
  12.                     <MenuItem name="1-3">举报管理</MenuItem>
  13.                 </Submenu>
  14.                 <Submenu name="2">
  15.                     <template slot="title">
  16.                         <Icon type="ios-people" />
  17.                         用户管理
  18.                     </template>
  19.                     <MenuItem name="2-1">新增用户</MenuItem>
  20.                     <MenuItem name="2-2">活跃用户</MenuItem>
  21.                 </Submenu>
  22.                 <Submenu name="3">
  23.                     <template slot="title">
  24.                         <Icon type="ios-stats" />
  25.                         统计分析
  26.                     </template>
  27.                     <MenuGroup title="使用">
  28.                         <MenuItem name="3-1">新增和启动</MenuItem>
  29.                         <MenuItem name="3-2">活跃分析</MenuItem>
  30.                         <MenuItem name="3-3">时段分析</MenuItem>
  31.                     </MenuGroup>
  32.                     <MenuGroup title="留存">
  33.                         <MenuItem name="3-4">用户留存</MenuItem>
  34.                         <MenuItem name="3-5">流失用户</MenuItem>
  35.                     </MenuGroup>
  36.                 </Submenu>
  37.             </Menu>
  38.         </Col>
  39.         <Col span="8">
  40.             <Menu :theme="theme2" active-name="1-2" :open-names="['1']">
  41.                 <Submenu name="1">
  42.                     <template slot="title">
  43.                         <Icon type="ios-paper" />
  44.                         内容管理
  45.                     </template>
  46.                     <MenuItem name="1-1">文章管理</MenuItem>
  47.                     <MenuItem name="1-2">评论管理</MenuItem>
  48.                     <MenuItem name="1-3">举报管理</MenuItem>
  49.                 </Submenu>
  50.                 <Submenu name="2">
  51.                     <template slot="title">
  52.                         <Icon type="ios-people" />
  53.                         用户管理
  54.                     </template>
  55.                     <MenuItem name="2-1">新增用户</MenuItem>
  56.                     <MenuItem name="2-2">活跃用户</MenuItem>
  57.                 </Submenu>
  58.                 <Submenu name="3">
  59.                     <template slot="title">
  60.                         <Icon type="ios-stats" />
  61.                         统计分析
  62.                     </template>
  63.                     <MenuGroup title="使用">
  64.                         <MenuItem name="3-1">新增和启动</MenuItem>
  65.                         <MenuItem name="3-2">活跃分析</MenuItem>
  66.                         <MenuItem name="3-3">时段分析</MenuItem>
  67.                     </MenuGroup>
  68.                     <MenuGroup title="留存">
  69.                         <MenuItem name="3-4">用户留存</MenuItem>
  70.                         <MenuItem name="3-5">流失用户</MenuItem>
  71.                     </MenuGroup>
  72.                 </Submenu>
  73.             </Menu>
  74.         </Col>
  75.         <Col span="8">
  76.             <Menu :theme="theme2" :open-names="['1']" accordion>
  77.                 <Submenu name="1">
  78.                     <template slot="title">
  79.                         <Icon type="ios-paper" />
  80.                         内容管理
  81.                     </template>
  82.                     <MenuItem name="1-1">文章管理</MenuItem>
  83.                     <MenuItem name="1-2">评论管理</MenuItem>
  84.                     <MenuItem name="1-3">举报管理</MenuItem>
  85.                 </Submenu>
  86.                 <Submenu name="2">
  87.                     <template slot="title">
  88.                         <Icon type="ios-people" />
  89.                         用户管理
  90.                     </template>
  91.                     <MenuItem name="2-1">新增用户</MenuItem>
  92.                     <MenuItem name="2-2">活跃用户</MenuItem>
  93.                 </Submenu>
  94.                 <Submenu name="3">
  95.                     <template slot="title">
  96.                         <Icon type="ios-stats" />
  97.                         统计分析
  98.                     </template>
  99.                     <MenuGroup title="使用">
  100.                         <MenuItem name="3-1">新增和启动</MenuItem>
  101.                         <MenuItem name="3-2">活跃分析</MenuItem>
  102.                         <MenuItem name="3-3">时段分析</MenuItem>
  103.                     </MenuGroup>
  104.                     <MenuGroup title="留存">
  105.                         <MenuItem name="3-4">用户留存</MenuItem>
  106.                         <MenuItem name="3-5">流失用户</MenuItem>
  107.                     </MenuGroup>
  108.                 </Submenu>
  109.             </Menu>
  110.         </Col>
  111.     </Row>
  112.     <br>
  113.     <p>Change theme</p>
  114.     <RadioGroup v-model="theme2">
  115.         <Radio label="light"></Radio>
  116.         <Radio label="dark"></Radio>
  117.     </RadioGroup>
  118. </template>
  119. <script>
  120.     export default {
  121.         data () {
  122.             return {
  123.                 theme2: 'light'
  124.             }
  125.         }
  126.     }
  127. </script>

Menu 导航菜单 - 图3

内嵌菜单

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

  1. <template>
  2.     <Menu active-name="1-2" :open-names="['1']">
  3.         <Submenu name="1">
  4.             <template slot="title">
  5.                 <Icon type="ios-analytics" />
  6.                 Navigation One
  7.             </template>
  8.             <MenuGroup title="Item 1">
  9.                 <MenuItem name="1-1">Option 1</MenuItem>
  10.                 <MenuItem name="1-2">Option 2</MenuItem>
  11.             </MenuGroup>
  12.             <MenuGroup title="Item 2">
  13.                 <MenuItem name="1-3">Option 3</MenuItem>
  14.                 <MenuItem name="1-4">Option 4</MenuItem>
  15.             </MenuGroup>
  16.         </Submenu>
  17.         <Submenu name="2">
  18.             <template slot="title">
  19.                 <Icon type="ios-filing" />
  20.                 Navigation Two
  21.             </template>
  22.             <MenuItem name="2-1">Option 5</MenuItem>
  23.             <MenuItem name="2-2">Option 6</MenuItem>
  24.             <Submenu name="3">
  25.                 <template slot="title">Submenu</template>
  26.                 <MenuItem name="3-1">Option 7</MenuItem>
  27.                 <MenuItem name="3-2">Option 8</MenuItem>
  28.             </Submenu>
  29.         </Submenu>
  30.         <Submenu name="4">
  31.             <template slot="title">
  32.                 <Icon type="ios-cog" />
  33.                 Navigation Three
  34.             </template>
  35.             <MenuItem name="4-1">Option 9</MenuItem>
  36.             <MenuItem name="4-2">Option 10</MenuItem>
  37.             <MenuItem name="4-3">Option 11</MenuItem>
  38.             <MenuItem name="4-4">Option 12</MenuItem>
  39.         </Submenu>
  40.     </Menu>
  41. </template>
  42. <script>
  43.     export default {
  45.     }
  46. </script>

Menu 导航菜单 - 图4

分组

使用 MenuGroup 组件进行分组。

<template>
    <Menu :theme="theme3" active-name="1">
        <MenuGroup title="内容管理">
            <MenuItem name="1">
                <Icon type="md-document" />
                文章管理
            </MenuItem>
            <MenuItem name="2">
                <Icon type="md-chatbubbles" />
                评论管理
            </MenuItem>
        </MenuGroup>
        <MenuGroup title="统计分析">
            <MenuItem name="3">
                <Icon type="md-heart" />
                用户留存
            </MenuItem>
            <MenuItem name="4">
                <Icon type="md-leaf" />
                流失用户
            </MenuItem>
        </MenuGroup>
    </Menu>
    <br>
    <p>Change theme</p>
    <RadioGroup v-model="theme3">
        <Radio label="light"></Radio>
        <Radio label="dark"></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                theme3: 'light'
            }
        }
    }
</script>

API

Menu props

属性 说明 类型 默认值
mode 菜单类型，可选值为 horizontal（水平） 和 vertical（垂直） String vertical
theme 主题，可选值为 light、dark、primary，其中 primary 只适用于 mode="horizontal" String light
active-name 激活菜单的 name 值 String | Number -
open-names 展开的 Submenu 的 name 集合 Array []
accordion 是否开启手风琴模式，开启后每次至多展开一个子菜单 Boolean false
width 导航菜单的宽度，只在 mode="vertical" 时有效，如果使用 Col 等布局，建议设置为 auto String 240px

Menu events

事件名 说明 返回值
on-select 选择菜单（MenuItem）时触发 name
on-open-change 当 展开/收起 子菜单时触发 当前展开的 Submenu 的 name 值数组

Menu methods

方法名 说明 参数
updateOpened 手动更新展开的子目录，注意要在 $nextTick 里调用 无
updateActiveName 手动更新当前选择项，注意要在 $nextTick 里调用 无

MenuItem props

属性 说明 类型 默认值
name 菜单项的唯一标识，必填 String | Number -
to 跳转的链接，支持 vue-router 对象 String | Object -
replace 路由跳转时，开启 replace 将不会向 history 添加新记录 Boolean false
target 相当于 a 链接的 target 属性 String _self
append 3.4.0 同 vue-router append Boolean false

Submenu props

属性 说明 类型 默认值
name 子菜单的唯一标识，必填 String | Number -

Submenu slot

名称 说明
无 菜单项
title 子菜单标题

MenuGroup props

属性 说明 类型 默认值
title 分组标题 String 空