• Menu 导航菜单
    • 概述
    • 代码示例
    • API
      • Menu props
      • Menu events
      • Menu methods
      • MenuItem props
      • Submenu props
      • Submenu slot
      • MenuGroup props

    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（垂直）Stringvertical
    theme主题，可选值为 light、dark、primary，其中 primary 只适用于 mode="horizontal"Stringlight
    active-name激活菜单的 name 值String | Number-
    open-names展开的 Submenu 的 name 集合Array[]
    accordion是否开启手风琴模式，开启后每次至多展开一个子菜单Booleanfalse
    width导航菜单的宽度，只在 mode="vertical" 时有效，如果使用 Col 等布局，建议设置为 autoString240px

    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 添加新记录Booleanfalse
    target相当于 a 链接的 target 属性String_self
    append 3.4.0同 vue-router appendBooleanfalse

    Submenu props

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

    Submenu slot

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

    MenuGroup props

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