YbMainSideMenu 侧栏菜单
对 el-menu (opens new window)的二次封装，将el-submenu和el-menu-item处理成数据结构方式 menuData，去掉了 el-menu 的背景色。yb-main-pro就是依赖yb-main-side-menu和yb-layout-pro。
# 基本用法
默认是开启 router，点击菜单跳转对应的路由 path
- 首页
- 目录菜单1
- 子级菜单
- 目录菜单2
- 子级菜单
<template>
<div style="width:200px">
<yb-main-side-menu :menuData="menuData"> </yb-main-side-menu>
</div>
</template>
<script>
export default {
data() {
return {
menuData: [
{
name: '首页',
icon: '#yibao-xinxieguan',
path: '/home',
},
{
name: '目录菜单1',
path: '/parent1',
icon: '#yibao-huore',
children: [
{
name: '子级菜单',
path: '/mychild1',
},
],
},
{
name: '目录菜单2',
path: '/parent2',
icon: '#yibao-gongneng',
children: [
{
name: '子级菜单',
path: '/mychild2',
},
],
},
],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
显示 复制 复制
# 横向菜单
- 首页
- 目录菜单1
- 子级菜单
- 目录菜单2
- 子级菜单
<template>
<div>
<yb-main-side-menu :menuData="menuData" mode="horizontal">
</yb-main-side-menu>
</div>
</template>
<script>
export default {
data() {
return {
menuData: [
{
name: '首页',
icon: '#yibao-xinxieguan',
path: '/home',
},
{
name: '目录菜单1',
path: '/parent1',
icon: '#yibao-huore',
children: [
{
name: '子级菜单',
path: '/mychild1',
},
],
},
{
name: '目录菜单2',
path: '/parent2',
icon: '#yibao-gongneng',
children: [
{
name: '子级菜单',
path: '/mychild2',
},
],
},
],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
显示 复制 复制
# 简易菜单
将子集菜单全部平铺，有子集的菜单会出现小分类
- 仪表盘
- 使用文档
- 我的订阅1
- 我的订阅2
- 购买订阅
- 个人中心
- 我的工单
订阅
用户
<template>
<div style="width:200px">
<yb-main-side-menu :menuData="menuData" type="simple">
</yb-main-side-menu>
</div>
</template>
<script>
export default {
data() {
return {
menuData: [
{
name: '仪表盘',
icon: 'el-icon-odometer',
path: '/dashboard',
},
{
name: '使用文档',
icon: 'el-icon-notebook-1',
path: '/docs',
},
{
name: '订阅',
children: [
{
name: '我的订阅',
path: '/mySubscription',
icon: 'el-icon-medal-1',
children: [
{
name: '我的订阅1',
path: '/mySubscription1',
icon: 'el-icon-medal-1',
},
{
name: '我的订阅2',
path: '/mySubscription2',
icon: 'el-icon-medal-1',
},
],
},
{
name: '购买订阅',
path: '/buySubscription',
icon: 'el-icon-goods',
},
],
},
{
name: '用户',
children: [
{
name: '个人中心',
path: '/owner',
icon: 'el-icon-user',
},
{
name: '我的工单',
path: '/todo',
icon: 'el-icon-orange',
},
],
},
],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
显示 复制 复制
# props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 菜单类型，默认为 el-menu 样式 | string | 'simple' | - |
| menuData | 菜单数据 | object[] | - | - |
| menuData[].name | 菜单名称 | string | - | - |
| menuData[].path | 菜单路径，路由跳转 | string | - | - |
| menuData[].icon | 小图标，以"#"开头的是多色图标，否则就是 i 标签的 className | string | - | - |
| menuData[].children | 子菜单数据 | object[] | - | - |
| ... | 其他属性同 el-menu (opens new window) | - | - | - |
# Slots
| 名称 | 说明 | 参数 |
|---|---|---|
| menuTitle | 导航名称插槽 | - |
# Events
上次更新: 2024/02/28, 17:31:26