Skip to content

Commit 8ab50b1

Browse files
CCherry07tangjinzhou
CCherry07
and
tangjinzhou
authored
feat(menu): icon support function components with items and update demo (#6457)
* fix(menu): icon do not show problem * fix(menu): icon do not show problem * feat(menu): update demo * test(menu): update demo snap * chore(Menu): update docs * test(Menu): update demo * Update MenuItem.tsx * Update SubMenu.tsx --------- Co-authored-by: tangjinzhou <[email protected]>
1 parent b0990b7 commit 8ab50b1

17 files changed

+821
-678
lines changed

‎components/components.ts

+1
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ export type {
116116
MenuItemProps,
117117
MenuMode,
118118
MenuDividerProps,
119+
ItemType,
119120
} from './menu';
120121
export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
121122

‎components/menu/__tests__/__snapshots__/demo.test.js.snap

+101-90
Large diffs are not rendered by default.

‎components/menu/demo/horizontal.vue

+57-46
Original file line numberDiff line numberDiff line change
@@ -17,54 +17,65 @@ Horizontal top navigation menu.
1717
</docs>
1818

1919
<template>
20-
<a-menu v-model:selectedKeys="current" mode="horizontal">
21-
<a-menu-item key="mail">
22-
<template #icon>
23-
<mail-outlined />
24-
</template>
25-
Navigation One
26-
</a-menu-item>
27-
<a-menu-item key="app" disabled>
28-
<template #icon>
29-
<appstore-outlined />
30-
</template>
31-
Navigation Two
32-
</a-menu-item>
33-
<a-sub-menu key="sub1">
34-
<template #icon>
35-
<setting-outlined />
36-
</template>
37-
<template #title>Navigation Three - Submenu</template>
38-
<a-menu-item-group title="Item 1">
39-
<a-menu-item key="setting:1">Option 1</a-menu-item>
40-
<a-menu-item key="setting:2">Option 2</a-menu-item>
41-
</a-menu-item-group>
42-
<a-menu-item-group title="Item 2">
43-
<a-menu-item key="setting:3">Option 3</a-menu-item>
44-
<a-menu-item key="setting:4">Option 4</a-menu-item>
45-
</a-menu-item-group>
46-
</a-sub-menu>
47-
<a-menu-item key="alipay">
48-
<a href="https://antdv.com" target="_blank" rel="noopener noreferrer">
49-
Navigation Four - Link
50-
</a>
51-
</a-menu-item>
52-
</a-menu>
20+
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
5321
</template>
54-
<script lang="ts">
55-
import { defineComponent, ref } from 'vue';
22+
<script lang="ts" setup>
23+
import { h, ref } from 'vue';
5624
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
57-
export default defineComponent({
58-
components: {
59-
MailOutlined,
60-
AppstoreOutlined,
61-
SettingOutlined,
25+
const current = ref<string[]>(['mail']);
26+
const items = ref([
27+
{
28+
key: 'mail',
29+
icon: () => h(MailOutlined),
30+
label: 'Navigation One',
31+
title: 'Navigation One',
6232
},
63-
setup() {
64-
const current = ref<string[]>(['mail']);
65-
return {
66-
current,
67-
};
33+
{
34+
key: 'app',
35+
icon: () => h(AppstoreOutlined),
36+
label: 'Navigation Two',
37+
title: 'Navigation Two',
6838
},
69-
});
39+
{
40+
key: 'sub1',
41+
icon: () => h(SettingOutlined),
42+
label: 'Navigation Three - Submenu',
43+
title: 'Navigation Three - Submenu',
44+
children: [
45+
{
46+
type: 'group',
47+
label: 'Item 1',
48+
children: [
49+
{
50+
label: 'Option 1',
51+
key: 'setting:1',
52+
},
53+
{
54+
label: 'Option 2',
55+
key: 'setting:2',
56+
},
57+
],
58+
},
59+
{
60+
type: 'group',
61+
label: 'Item 2',
62+
children: [
63+
{
64+
label: 'Option 3',
65+
key: 'setting:3',
66+
},
67+
{
68+
label: 'Option 4',
69+
key: 'setting:4',
70+
},
71+
],
72+
},
73+
],
74+
},
75+
{
76+
key: 'alipay',
77+
label: h('a', { href: 'https://antdv.com', target: '_blank' }, 'Navigation Four - Link'),
78+
title: 'Navigation Four - Link',
79+
},
80+
]);
7081
</script>

‎components/menu/demo/index.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<inline />
55
<inline-collapsed />
66
<sider-current />
7-
<switch-mode />
8-
<theme />
97
<vertical />
10-
<TemplateSingleFile />
8+
<theme />
9+
<submenu-theme />
10+
<switch-mode />
1111
</demo-sort>
1212
</template>
1313

@@ -22,7 +22,7 @@ import SiderCurrent from './sider-current.vue';
2222
import SwitchMode from './switch-mode.vue';
2323
import Theme from './theme.vue';
2424
import Vertical from './vertical.vue';
25-
import TemplateSingleFile from './template.vue';
25+
import SubmenuTheme from './submenu-theme.vue';
2626
2727
export default defineComponent({
2828
CN,
@@ -35,7 +35,7 @@ export default defineComponent({
3535
SwitchMode,
3636
Theme,
3737
Vertical,
38-
TemplateSingleFile,
38+
SubmenuTheme,
3939
},
4040
});
4141
</script>

‎components/menu/demo/inline-collapsed.vue

+104-80
Original file line numberDiff line numberDiff line change
@@ -23,62 +23,22 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
2323
<template>
2424
<div style="width: 256px">
2525
<a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
26-
<MenuUnfoldOutlined v-if="collapsed" />
26+
<MenuUnfoldOutlined v-if="state.collapsed" />
2727
<MenuFoldOutlined v-else />
2828
</a-button>
2929
<a-menu
30-
v-model:openKeys="openKeys"
31-
v-model:selectedKeys="selectedKeys"
30+
v-model:openKeys="state.openKeys"
31+
v-model:selectedKeys="state.selectedKeys"
3232
mode="inline"
3333
theme="dark"
34-
:inline-collapsed="collapsed"
35-
>
36-
<a-menu-item key="1">
37-
<template #icon>
38-
<PieChartOutlined />
39-
</template>
40-
<span>Option 1</span>
41-
</a-menu-item>
42-
<a-menu-item key="2">
43-
<template #icon>
44-
<DesktopOutlined />
45-
</template>
46-
<span>Option 2</span>
47-
</a-menu-item>
48-
<a-menu-item key="3">
49-
<template #icon>
50-
<InboxOutlined />
51-
</template>
52-
<span>Option 3</span>
53-
</a-menu-item>
54-
<a-sub-menu key="sub1">
55-
<template #icon>
56-
<MailOutlined />
57-
</template>
58-
<template #title>Navigation One</template>
59-
<a-menu-item key="5">Option 5</a-menu-item>
60-
<a-menu-item key="6">Option 6</a-menu-item>
61-
<a-menu-item key="7">Option 7</a-menu-item>
62-
<a-menu-item key="8">Option 8</a-menu-item>
63-
</a-sub-menu>
64-
<a-sub-menu key="sub2">
65-
<template #icon>
66-
<AppstoreOutlined />
67-
</template>
68-
<template #title>Navigation Two</template>
69-
<a-menu-item key="9">Option 9</a-menu-item>
70-
<a-menu-item key="10">Option 10</a-menu-item>
71-
<a-sub-menu key="sub3" title="Submenu">
72-
<a-menu-item key="11">Option 11</a-menu-item>
73-
<a-menu-item key="12">Option 12</a-menu-item>
74-
</a-sub-menu>
75-
</a-sub-menu>
76-
</a-menu>
34+
:inline-collapsed="state.collapsed"
35+
:items="items"
36+
></a-menu>
7737
</div>
7838
</template>
7939

80-
<script lang="ts">
81-
import { defineComponent, reactive, toRefs, watch } from 'vue';
40+
<script lang="ts" setup>
41+
import { reactive, watch, h } from 'vue';
8242
import {
8343
MenuFoldOutlined,
8444
MenuUnfoldOutlined,
@@ -88,39 +48,103 @@ import {
8848
InboxOutlined,
8949
AppstoreOutlined,
9050
} from '@ant-design/icons-vue';
91-
export default defineComponent({
92-
components: {
93-
MenuFoldOutlined,
94-
MenuUnfoldOutlined,
95-
PieChartOutlined,
96-
MailOutlined,
97-
DesktopOutlined,
98-
InboxOutlined,
99-
AppstoreOutlined,
51+
const state = reactive({
52+
collapsed: false,
53+
selectedKeys: ['1'],
54+
openKeys: ['sub1'],
55+
preOpenKeys: ['sub1'],
56+
});
57+
const items = reactive([
58+
{
59+
key: '1',
60+
icon: () => h(PieChartOutlined),
61+
label: 'Option 1',
62+
title: 'Option 1',
10063
},
101-
setup() {
102-
const state = reactive({
103-
collapsed: false,
104-
selectedKeys: ['1'],
105-
openKeys: ['sub1'],
106-
preOpenKeys: ['sub1'],
107-
});
108-
109-
watch(
110-
() => state.openKeys,
111-
(_val, oldVal) => {
112-
state.preOpenKeys = oldVal;
64+
{
65+
key: '2',
66+
icon: () => h(DesktopOutlined),
67+
label: 'Option 2',
68+
title: 'Option 2',
69+
},
70+
{
71+
key: '3',
72+
icon: () => h(InboxOutlined),
73+
label: 'Option 3',
74+
title: 'Option 3',
75+
},
76+
{
77+
key: 'sub1',
78+
icon: () => h(MailOutlined),
79+
label: 'Navigation One',
80+
title: 'Navigation One',
81+
children: [
82+
{
83+
key: '5',
84+
label: 'Option 5',
85+
title: 'Option 5',
11386
},
114-
);
115-
const toggleCollapsed = () => {
116-
state.collapsed = !state.collapsed;
117-
state.openKeys = state.collapsed ? [] : state.preOpenKeys;
118-
};
119-
120-
return {
121-
...toRefs(state),
122-
toggleCollapsed,
123-
};
87+
{
88+
key: '6',
89+
label: 'Option 6',
90+
title: 'Option 6',
91+
},
92+
{
93+
key: '7',
94+
label: 'Option 7',
95+
title: 'Option 7',
96+
},
97+
{
98+
key: '8',
99+
label: 'Option 8',
100+
title: 'Option 8',
101+
},
102+
],
124103
},
125-
});
104+
{
105+
key: 'sub2',
106+
icon: () => h(AppstoreOutlined),
107+
label: 'Navigation Two',
108+
title: 'Navigation Two',
109+
children: [
110+
{
111+
key: '9',
112+
label: 'Option 9',
113+
title: 'Option 9',
114+
},
115+
{
116+
key: '10',
117+
label: 'Option 10',
118+
title: 'Option 10',
119+
},
120+
{
121+
key: 'sub3',
122+
label: 'Submenu',
123+
title: 'Submenu',
124+
children: [
125+
{
126+
key: '11',
127+
label: 'Option 11',
128+
title: 'Option 11',
129+
},
130+
{
131+
key: '12',
132+
label: 'Option 12',
133+
title: 'Option 12',
134+
},
135+
],
136+
},
137+
],
138+
},
139+
]);
140+
watch(
141+
() => state.openKeys,
142+
(_val, oldVal) => {
143+
state.preOpenKeys = oldVal;
144+
},
145+
);
146+
const toggleCollapsed = () => {
147+
state.collapsed = !state.collapsed;
148+
state.openKeys = state.collapsed ? [] : state.preOpenKeys;
149+
};
126150
</script>

0 commit comments

Comments
 (0)