JView UIMenu 组件，适用于平台导航等场景，分为垂直菜单，水平菜单，内嵌菜单等类型。
垂直菜单
在使用菜单导航，最常见的莫过于位于侧边的垂直菜单，其对应的type属性值为"vertical"。
你可以通过items配置按需组合MenuItem, SubMenu, MenuItemGroup等组件，具体效果如下：
- Menu Item 1
- Menu Item 2 我的名字很长 我的名字很长 我的名字很长
- Sub Menu 1
- Item GroupItem 1 in GroupItem 2 in Group
展开查看代码
vue
<template>
<div>
<j-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" :items="items" :theme="theme" style="width: 256px"></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2 我的名字很长 我的名字很长 我的名字很长',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</script><template>
<div>
<j-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" :items="items" :theme="theme" style="width: 256px"></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2 我的名字很长 我的名字很长 我的名字很长',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
内嵌菜单
如果你不希望子菜单是弹出的形式，可以考虑使用内嵌菜单，仅仅需要设置type属性为inline即可。
- Menu Item 1
- Menu Item 2
- Sub Menu 1
- 3-1
- 3-2
- 3-2-1
- 3-2-1-1
- 3-2-1-2
- Group In SubMenu 3-2-13-2-1-3-13-2-1-3-2
- 3-2-2
- Group 1 In SubMenu3-3-13-3-2
- Item GroupItem 1 in GroupItem 2 in Group
展开查看代码
vue
<template>
<div>
<j-menu
type="inline"
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:items="items"
:theme="theme"
style="width: 256px"
></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</script><template>
<div>
<j-menu
type="inline"
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:items="items"
:theme="theme"
style="width: 256px"
></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
可收起的内嵌菜单
使用inlineCollapsed属性可以实现菜单的收起效果。
收起
- Menu Item 1
- Menu Item 2
- Sub Menu 1
- 3-1
- 3-2
- 3-2-1
- 3-2-1-1
- 3-2-1-2
- Group In SubMenu 3-2-13-2-1-3-13-2-1-3-2
- 3-2-2
- Group 1 In SubMenu3-3-13-3-2
- Item GroupItem 1 in GroupItem 2 in Group
展开查看代码
vue
<template>
<div style="width: 256px">
<j-space align="center">
收起
<j-switch v-model:checked="inlineCollapsed" />
</j-space>
<j-menu
type="inline"
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:inlineCollapsed="inlineCollapsed"
:items="items"
:theme="theme"
style="margin-top: 20px"
></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const inlineCollapsed = ref(true)
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</script><template>
<div style="width: 256px">
<j-space align="center">
收起
<j-switch v-model:checked="inlineCollapsed" />
</j-space>
<j-menu
type="inline"
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:inlineCollapsed="inlineCollapsed"
:items="items"
:theme="theme"
style="margin-top: 20px"
></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const inlineCollapsed = ref(true)
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
水平菜单
水平菜单，适用于网站顶部导航，设置type属性为horizontal即可。
- Menu Item 1
- Menu Item 2
- Sub Menu 1
展开查看代码
vue
<template>
<j-menu
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:items="items"
:theme="theme"
type="horizontal"
style="margin: 0 0 40px"
></j-menu>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <CalendarOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group 1 in 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: 'Item 1 in Group 1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: 'Item 2 in Group 1',
icon: <CalendarOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <CalendarOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 3-3',
items: [
{
itemKey: '3-3-1',
title: 'Item 1 in Group 3-3',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: 'Item 2 in Group 3-3',
icon: <CalendarOutlined />,
},
],
},
],
},
])
</script><template>
<j-menu
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:items="items"
:theme="theme"
type="horizontal"
style="margin: 0 0 40px"
></j-menu>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const theme = ref('light')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <CalendarOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group 1 in 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: 'Item 1 in Group 1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: 'Item 2 in Group 1',
icon: <CalendarOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <CalendarOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 3-3',
items: [
{
itemKey: '3-3-1',
title: 'Item 1 in Group 3-3',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: 'Item 2 in Group 3-3',
icon: <CalendarOutlined />,
},
],
},
],
},
])
</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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
切换主题
通过theme属性为切换主题，支持"light"和"dark"两种类型。
收起
主题
- Menu Item 1
- Menu Item 2
- Sub Menu 1
- 3-1
- 3-2
- 3-2-1
- 3-2-1-1
- 3-2-1-2
- Group In SubMenu 3-2-13-2-1-3-13-2-1-3-2
- 3-2-2
- Group 1 In SubMenu3-3-13-3-2
- Item GroupItem 1 in GroupItem 2 in Group
展开查看代码
vue
<template>
<div style="width: 256px">
<j-space align="center">
<j-space align="center">
收起
<j-switch v-model:checked="inlineCollapsed" />
</j-space>
<j-space align="center">
主题
<j-switch
checked-children="D"
unchecked-children="L"
checked-value="dark"
unchecked-value="light"
v-model:checked="theme"
/>
</j-space>
</j-space>
<j-menu
type="inline"
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:inlineCollapsed="inlineCollapsed"
:items="items"
:theme="theme"
style="margin-top: 20px"
></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const inlineCollapsed = ref(true)
const theme = ref('dark')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</script><template>
<div style="width: 256px">
<j-space align="center">
<j-space align="center">
收起
<j-switch v-model:checked="inlineCollapsed" />
</j-space>
<j-space align="center">
主题
<j-switch
checked-children="D"
unchecked-children="L"
checked-value="dark"
unchecked-value="light"
v-model:checked="theme"
/>
</j-space>
</j-space>
<j-menu
type="inline"
v-model:selectedKeys="selectedKeys"
v-model:openKeys="openKeys"
:inlineCollapsed="inlineCollapsed"
:items="items"
:theme="theme"
style="margin-top: 20px"
></j-menu>
</div>
</template>
<script lang="jsx" setup>
import { ref } from 'vue'
import { AccountBookOutlined } from '@jview/icons-antd/es/AccountBookOutlined'
import { CalendarOutlined } from '@jview/icons-antd/es/CalendarOutlined'
import { ApartmentOutlined } from '@jview/icons-antd/es/ApartmentOutlined'
import { AppstoreOutlined } from '@jview/icons-antd/es/AppstoreOutlined'
const inlineCollapsed = ref(true)
const theme = ref('dark')
const openKeys = ref([])
const selectedKeys = ref([])
const items = ref([
{
itemKey: '1',
title: 'Menu Item 1',
icon: <AccountBookOutlined />,
},
{
itemKey: '2',
title: 'Menu Item 2',
icon: <CalendarOutlined />,
},
{
itemKey: '3',
title: 'Sub Menu 1',
icon: <ApartmentOutlined />,
items: [
{
itemKey: '3-1',
title: '3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2',
title: '3-2',
icon: <CalendarOutlined />,
items: [
{
itemKey: '3-2-1',
title: '3-2-1',
icon: <AppstoreOutlined />,
items: [
{
itemKey: '3-2-1-1',
title: '3-2-1-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-2',
title: '3-2-1-2',
icon: <ApartmentOutlined />,
},
{
type: 'group',
itemKey: '3-2-1-3',
title: 'Group In SubMenu 3-2-1',
items: [
{
itemKey: '3-2-1-3-1',
title: '3-2-1-3-1',
icon: <AppstoreOutlined />,
},
{
itemKey: '3-2-1-3-2',
title: '3-2-1-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
itemKey: '3-2-2',
title: '3-2-2',
icon: <ApartmentOutlined />,
},
],
},
{
type: 'group',
itemKey: '3-3',
title: 'Group 1 In SubMenu',
items: [
{
itemKey: '3-3-1',
title: '3-3-1',
icon: <CalendarOutlined />,
},
{
itemKey: '3-3-2',
title: '3-3-2',
icon: <AccountBookOutlined />,
},
],
},
],
},
{
type: 'group',
itemKey: '4',
title: 'Item Group',
items: [
{
itemKey: '4-1',
title: 'Item 1 in Group',
icon: <AppstoreOutlined />,
},
{
itemKey: '4-2',
title: 'Item 2 in Group',
icon: <CalendarOutlined />,
},
],
},
])
</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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
Menu 属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| type | 菜单类型，支持 "vertical", "inline", "horizontal"，默认是 "vertical" | "inline" | "horizontal" | "vertical" | 'vertical' | 否 |
| items | 菜单子项配置 | Array<MenuItem | SubMenuItem | ItemGroup> | 无 | 否 |
| theme | 主题配置，支持 "light" 和 "dark" 两种。 | "light" | "dark" | 'light' | 否 |
| popupSubMenuTrigger | 弹出式子菜单的触发方式，默认 hover，即鼠标悬停时显示弹出的子菜单 | "click" | "hover" | 'hover' | 否 |
| openKeys | 当前展开的菜单 key 组成的数组 | Array<string | number> | 无 | 是 |
| selectedKeys | 当前选中的菜单 keys | Array<string | number> | 无 | 是 |
| inlineIndent | inline 模式下子菜单的缩进值 | number | 24 | 否 |
| inlineCollapsed | inline 模式下菜单是否收起到侧边 | boolean | 无 | 否 |
Menu 事件
| 事件名 | 说明 | 回调类型 |
|---|---|---|
| select | 菜单选中时触发 | (key: string | number, selectedKeys: (string | number)[]) => void |
MenuItem 属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| title | 菜单标题 | string | VNode | 无 | 否 |
| icon | 菜单图标 | VNode | ((item: MenuItem) => VNode) | 无 | 否 |
| itemKey | 唯一标识 | string | number | 无 | 是 |
SubMenu 属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| title | 菜单标题 | string | VNode | 无 | 否 |
| icon | 菜单图标 | VNode | ((item: SubMenuItem) => VNode) | 无 | 否 |
| itemKey | 唯一标识 | string | number | 无 | 是 |
| items | 菜单子项配置 | Array<MenuItem | SubMenuItem | ItemGroup> | 无 | 否 |
| theme | 主题配置，默认继承自 menu。 | "light" | "dark" | 无 | 否 |
MenuItemGroup 属性
| 参数 | 说明 | 类型 | 默认值 | 必填 |
|---|---|---|---|---|
| title | 分组标题 | string | VNode | 无 | 否 |
| itemKey | 唯一标识 | string | number | 无 | 是 |
| items | 菜单组配置 | Array<MenuItem> | 无 | 否 |