Test.vue
3.06 KB
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
<template>
<div style="width: 256px">
<a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
<MenuUnfoldOutlined v-if="collapsed"/>
<MenuFoldOutlined v-else/>
</a-button>
<a-menu
mode="inline"
theme="dark"
:inline-collapsed="collapsed"
v-model:selectedKeys="selectedKeys"
>
<a-menu-item key="1">
<template #icon>
<PieChartOutlined/>
</template>
<span>Option 1</span>
</a-menu-item>
<a-menu-item key="2">
<template #icon>
<DesktopOutlined/>
</template>
<span>Option 2</span>
</a-menu-item>
<a-menu-item key="3">
<template #icon>
<InboxOutlined/>
</template>
<span>Option 3</span>
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<MailOutlined/>
</template>
<template #title>Navigation One</template>
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<AppstoreOutlined/>
</template>
<template #title>Navigation Two</template>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
<a-sub-menu key="sub3" title="Submenu">
<a-menu-item key="11">Option 11</a-menu-item>
<a-menu-item key="12">Option 12</a-menu-item>
</a-sub-menu>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
import {defineComponent, reactive, toRefs, watch} from 'vue'
import {
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
MailOutlined,
DesktopOutlined,
InboxOutlined,
AppstoreOutlined,
} from '@ant-design/icons-vue'
export default defineComponent({
setup() {
const state = reactive({
collapsed: false,
selectedKeys: ['1'],
openKeys: ['sub1'],
preOpenKeys: ['sub1'],
})
watch(
() => state.openKeys,
(val, oldVal) => {
state.preOpenKeys = oldVal
},
)
const toggleCollapsed = () => {
state.collapsed = !state.collapsed
state.openKeys = state.collapsed ? [] : state.preOpenKeys
}
return {...toRefs(state), toggleCollapsed}
},
components: {
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
MailOutlined,
DesktopOutlined,
InboxOutlined,
AppstoreOutlined,
},
})
</script>