Menu 导航菜单

概述

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

注意:非 template/render 模式下,需使用 i-menu

代码示例

Menu 导航菜单 - 图1

顶部导航

水平的顶部导航菜单。

通过设置属性 themelightdarkprimary 可以选择主题。

通过事件 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 可以开启手风琴模式,每次只能展开一个子菜单。

通过设置属性 themelightdark 可以选择主题,侧栏菜单不支持 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 {
  44. }
  45. </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 主题,可选值为 lightdarkprimary,其中 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