mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 11:18:54 +08:00
176 lines
8.5 KiB
Markdown
176 lines
8.5 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Menu 导航菜单
|
||
为页面和功能提供导航的菜单列表。
|
||
|
||
## 概述
|
||
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
|
||
|
||
## 代码示例
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="基础用法" template="ui/templates/menu/1.html">
|
||
<template v-slot:demo>
|
||
<Wb-menu :active-name.sync="activeName" :auto-close="true" :type="type" :width="180" @select="selectMenu">
|
||
<Wb-menu-item :icon="icon" name="1">我的菜单</Wb-menu-item>
|
||
<Wb-menu-item name="2">个人信息</Wb-menu-item>
|
||
<Wb-menu-item name="3">我的管理</Wb-menu-item>
|
||
<Wb-sub-menu title="内容管理">
|
||
<Wb-menu-item name="4-1">新增</Wb-menu-item>
|
||
<Wb-menu-item name="4-2">修改</Wb-menu-item>
|
||
</Wb-sub-menu>
|
||
<Wb-sub-menu title="内容管理">
|
||
<Wb-menu-group title="编辑">
|
||
<Wb-menu-item name="5-1">新增</Wb-menu-item>
|
||
<Wb-menu-item name="5-2">修改</Wb-menu-item>
|
||
</Wb-menu-group>
|
||
<Wb-menu-group title="查询">
|
||
<Wb-menu-item name="5-3">文章</Wb-menu-item>
|
||
<Wb-menu-item name="5-4">作者</Wb-menu-item>
|
||
</Wb-menu-group>
|
||
</Wb-sub-menu>
|
||
</Wb-menu>
|
||
<Wb-menu style="margin-top: 20px;" :active-name.sync="activeName" :auto-close="true" mode="horizontal" :type="type" @select="selectMenu">
|
||
<Wb-menu-item name="1">我的菜单</Wb-menu-item>
|
||
<Wb-menu-item name="2">个人信息</Wb-menu-item>
|
||
<Wb-menu-item name="3">我的管理</Wb-menu-item>
|
||
<Wb-sub-menu title="内容管理">
|
||
<Wb-menu-item name="4-1">新增</Wb-menu-item>
|
||
<Wb-menu-item name="4-2">修改</Wb-menu-item>
|
||
</Wb-sub-menu>
|
||
<Wb-sub-menu title="内容管理">
|
||
<Wb-menu-group title="编辑">
|
||
<Wb-menu-item name="5-1">新增</Wb-menu-item>
|
||
<Wb-menu-item name="5-2">修改</Wb-menu-item>
|
||
</Wb-menu-group>
|
||
<Wb-menu-group title="查询">
|
||
<Wb-menu-item name="5-3">文章</Wb-menu-item>
|
||
<Wb-menu-item name="5-4">作者</Wb-menu-item>
|
||
</Wb-menu-group>
|
||
</Wb-sub-menu>
|
||
</Wb-menu>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>有两种布局类型，可选horizontal（水平）、vertical(垂直)两种，默认为vertical。</p>
|
||
<p>有两种颜色类型，点击下方可切换：</p>
|
||
<Radio-group v-model="type">
|
||
<Radio value="light">
|
||
light
|
||
</Radio>
|
||
<Radio value="dark">
|
||
dark
|
||
</Radio>
|
||
</Radio-group>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="配合vue-router使用" template="ui/templates/menu/2.html">
|
||
<template v-slot:demo>
|
||
<route-menu :menu="menu" :width="180"></route-menu>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>传入MenuList，就可以自动实现点击跳转的逻辑</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</Row>
|
||
</ClientOnly>
|
||
|
||
<script>
|
||
export default {
|
||
data(){
|
||
return {
|
||
activeName: "1",
|
||
type: 'light',
|
||
icon: require('../../images/icon_notice.png'),
|
||
menu: [
|
||
{
|
||
title: '组件',
|
||
icon: require('../../images/icon_notice.png'),
|
||
subMenu: [
|
||
{
|
||
title: 'Layout 栅格',
|
||
path: '/ui/layout'
|
||
},
|
||
{
|
||
title: 'Icon 图标',
|
||
path: '/ui/icon'
|
||
},
|
||
{
|
||
title: 'Menu',
|
||
path: '/ui/menu'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: 'Button',
|
||
path: '/ui/button'
|
||
},
|
||
{
|
||
title: 'Tab',
|
||
path: '/ui/tab'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
mounted(){
|
||
console.log(this)
|
||
},
|
||
methods: {
|
||
selectMenu(name) {
|
||
console.log('activeName:' + this.activeName, 'name:' + name);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
## API
|
||
|
||
### RouteMenu Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| mode | 布局模式，可选有`horizontal`水平, `vertical` 垂直 | String | vertical |
|
||
| type | 颜色类型，可选有`light`白色, `dark`蓝色 | String | light |
|
||
| width | 宽度 | Number/String | |
|
||
| autoClose | 是否自动收起菜单。当垂直模式时，点击菜单列表，是否关闭已经打开的菜单列表 | Boolean | false |
|
||
| menu | 菜单配置项 | Array | 无 |
|
||
| menu.title | 菜单标题 | String | 空 |
|
||
| menu.path | 菜单项点击后，跳转路径 | String | 空 |
|
||
| menu.subMenu | 子菜单，每项也有path和title | Array | 空 |
|
||
| menu.icon | 图标 | String | 空 |
|
||
|
||
### Menu Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| mode | 布局模式，可选有`horizontal`水平, `vertical` 垂直 | String | vertical |
|
||
| type | 颜色类型，可选有`light`白色, `dark`蓝色 | String | light |
|
||
| width | 宽度 | Number/String | undefined |
|
||
| active-name | 激活菜单的 name 值 | Number/String | undefined |
|
||
| autoClose | 是否自动收起菜单。当垂直模式时，点击菜单列表，是否关闭已经打开的菜单列表 | Boolean | false |
|
||
|
||
### Menu Events
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:--------------|:--------------------------|:--------|
|
||
| select | 选择菜单（Menu-item）时触发 | name |
|
||
|
||
### MenuGroup Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| title | 分组标题 | String | 空 |
|
||
|
||
### SubMenu Props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| title | 必填，唯一标识 | Number/String | 空 |
|
||
| icon | 图标，url 或者 base64数据 | String | 空 |
|
||
| expand | 默认是否展开 | Boolean | false |
|
||
|
||
### MenuItem props
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| name | 必填，唯一标识 | Number/String | 空 |
|
||
| icon | 图标，url 或者 base64数据 | String | 空 |
|