iView UI参考手册

组件布局

Menu 导航菜单

概述

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

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

代码示例

<template>
    <Menu mode="horizontal" :theme="theme1" active-name="1">
        <MenuItem name="1">
            <Icon type="ios-paper" />
            内容管理
        </MenuItem>
        <MenuItem name="2">
            <Icon type="ios-people" />
            用户管理
        </MenuItem>
        <Submenu name="3">
            <template slot="title">
                <Icon type="ios-stats" />
                统计分析
            </template>
            <MenuGroup title="使用">
                <MenuItem name="3-1">新增和启动</MenuItem>
                <MenuItem name="3-2">活跃分析</MenuItem>
                <MenuItem name="3-3">时段分析</MenuItem>
            </MenuGroup>
            <MenuGroup title="留存">
                <MenuItem name="3-4">用户留存</MenuItem>
                <MenuItem name="3-5">流失用户</MenuItem>
            </MenuGroup>
        </Submenu>
        <MenuItem name="4">
            <Icon type="ios-construct" />
            综合设置
        </MenuItem>
    </Menu>
    <br>
    <p>Change theme</p>
    <RadioGroup v-model="theme1">
        <Radio label="light"></Radio>
        <Radio label="dark"></Radio>
        <Radio label="primary"></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                theme1: 'light'
            }
        }
    }
</script>

<Row> <Col span="8"> <Menu :theme="theme2"> <Submenu name="1"> <template slot="title"> <Icon type="ios-paper" /> 内容管理 </template> <MenuItem name="1-1">文章管</MenuItem> <MenuItem name="1-2">评论管</MenuItem> <MenuItem name="1-3">举报管</MenuItem> </Submenu> <Submenu name="2"> <template slot="title"> <Icon type="ios-people" /> 用户管理 </template> <MenuItem name="2-1">新增用</MenuItem> <MenuItem name="2-2">活跃用</MenuItem> </Submenu> <Submenu name="3"> <template slot="title"> <Icon type="ios-stats" /> 统计分析 </template> <MenuGroup title="使用"> <MenuItem name="3-1">新增和启动</MenuItem> <MenuItem name="3-2">活跃分析</MenuItem> <MenuItem name="3-3">时段分析</MenuItem> </MenuGroup> <MenuGroup title="留存"> <MenuItem name="3-4">用户留存</MenuItem> <MenuItem name="3-5">流失用户</MenuItem> </MenuGroup> </Submenu> </Menu> </Col> <Col span="8"> <Menu :theme="theme2" active-name="1-2" :open-names="['1']"> <Submenu name="1"> <template slot="title"> <Icon type="ios-paper" /> 内容管理 </template> <MenuItem name="1-1">文章管理</MenuItem> <MenuItem name="1-2">评论管理</MenuItem> <MenuItem name="1-3">举报管理</MenuItem> </Submenu> <Submenu name="2"> <template slot="title"> <Icon type="ios-people" /> 用户管理 </template> <MenuItem name="2-1">新增用户</MenuItem> <MenuItem name="2-2">活跃用户</MenuItem> </Submenu> <Submenu name="3"> <template slot="title"> <Icon type="ios-stats" /> 统计分析 </template> <MenuGroup title="使用"> <MenuItem name="3-1">新增和启动</MenuItem> <MenuItem name="3-2">活跃分析</MenuItem> <MenuItem name="3-3">时段分析</MenuItem> </MenuGroup> <MenuGroup title="留存"> <MenuItem name="3-4">用户留存</MenuItem> <MenuItem name="3-5">流失用户</MenuItem> </MenuGroup> </Submenu> </Menu> </Col> <Col span="8"> <Menu :theme="theme2" :open-names="['1']" accordion> <Submenu name="1"> <template slot="title"> <Icon type="ios-paper" /> 内容管理 </template> <MenuItem name="1-1">文章管理</MenuItem> <MenuItem name="1-2">评论管理</MenuItem> <MenuItem name="1-3">举报管理</MenuItem> </Submenu> <Submenu name="2"> <template slot="title"> <Icon type="ios-people" /> 用户管理 </template> <MenuItem name="2-1">新增用户</MenuItem> <MenuItem name="2-2">活跃用户</MenuItem> </Submenu> <Submenu name="3"> <template slot="title"> <Icon type="ios-stats" /> 统计分析 </template> <MenuGroup title="使用"> <MenuItem name="3-1">新增和启动</MenuItem> <MenuItem name="3-2">活跃分析</MenuItem> <MenuItem name="3-3">时段分析</MenuItem> </MenuGroup> <MenuGroup title="留存"> <MenuItem name="3-4">用户留存</MenuItem> <MenuItem name="3-5">流失用户</MenuItem> </MenuGroup> </Submenu> </Menu> </Col> </Row> <br> <p>Change theme</p> <RadioGroup v-model="theme2"> <Radio label="light"></Radio> <Radio label="dark"></Radio> </RadioGroup> </template> <script> export default { data () { return { theme2: 'light' } } } </script>

<template>
    <Menu active-name="1-2" :open-names="['1']">
        <Submenu name="1">
            <template slot="title">
                <Icon type="ios-analytics" />
                Navigation One
            </template>
            <MenuGroup title="Item 1">
                <MenuItem name="1-1">Option 1</MenuItem>
                <MenuItem name="1-2">Option 2</MenuItem>
            </MenuGroup>
            <MenuGroup title="Item 2">
                <MenuItem name="1-3">Option 3</MenuItem>
                <MenuItem name="1-4">Option 4</MenuItem>
            </MenuGroup>
        </Submenu>
        <Submenu name="2">
            <template slot="title">
                <Icon type="ios-filing" />
                Navigation Two
            </template>
            <MenuItem name="2-1">Option 5</MenuItem>
            <MenuItem name="2-2">Option 6</MenuItem>
            <Submenu name="3">
                <template slot="title">Submenu</template>
                <MenuItem name="3-1">Option 7</MenuItem>
                <MenuItem name="3-2">Option 8</MenuItem>
            </Submenu>
        </Submenu>
        <Submenu name="4">
            <template slot="title">
                <Icon type="ios-cog" />
                Navigation Three
            </template>
            <MenuItem name="4-1">Option 9</MenuItem>
            <MenuItem name="4-2">Option 10</MenuItem>
            <MenuItem name="4-3">Option 11</MenuItem>
            <MenuItem name="4-4">Option 12</MenuItem>
        </Submenu>
    </Menu>
</template>
<script>
    export default {
        
    }
</script>

<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>

Show Code

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

Submenu props

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

Submenu slot

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

MenuGroup props

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

组件布局相关

1.Grid 栅格
2.Card 卡片
3.Collapse 折叠面板
4.Split 面板分割
5.Divider 分割线
6.Cell 单元格
7.Tabs 标签页
8.Dropdown 下拉菜单
9.Page 分页
10.Breadcrumb 面包屑
11.Badge 徽标数
12.Anchor 锚点
13.Steps 步骤条
14.LoadingBar 加载进度条

iView UI

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品

iView UI目录

1.指南
2.组件
3.组件基础
4.组件布局