Commit 20d7a25eb898a5c28351ff269b93bf104b8ac10e
1 parent
59d3e8c8
fix: user drop-down event key loss
修复顶部的用户操作下拉菜单点击事件丢失key参数的问题
Showing
2 changed files
with
23 additions
and
24 deletions
src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
1 | 1 | <template> |
2 | - <MenuItem :key="key"> | |
2 | + <MenuItem :key="itemKey"> | |
3 | 3 | <span class="flex items-center"> |
4 | 4 | <Icon :icon="icon" class="mr-1" /> |
5 | 5 | <span>{{ text }}</span> |
... | ... | @@ -9,7 +9,7 @@ |
9 | 9 | <script lang="ts"> |
10 | 10 | import { Menu } from 'ant-design-vue'; |
11 | 11 | |
12 | - import { defineComponent } from 'vue'; | |
12 | + import { computed, defineComponent, getCurrentInstance } from 'vue'; | |
13 | 13 | |
14 | 14 | import Icon from '/@/components/Icon/index'; |
15 | 15 | import { propTypes } from '/@/utils/propTypes'; |
... | ... | @@ -22,5 +22,10 @@ |
22 | 22 | text: propTypes.string, |
23 | 23 | icon: propTypes.string, |
24 | 24 | }, |
25 | + setup(props) { | |
26 | + const instance = getCurrentInstance(); | |
27 | + const itemKey = computed(() => props.key || instance?.vnode?.props?.key); | |
28 | + return { itemKey }; | |
29 | + }, | |
25 | 30 | }); |
26 | 31 | </script> | ... | ... |
src/layouts/default/header/components/user-dropdown/index.vue
... | ... | @@ -10,11 +10,10 @@ |
10 | 10 | </span> |
11 | 11 | |
12 | 12 | <template #overlay> |
13 | - <Menu> | |
13 | + <Menu @click="handleMenuClick"> | |
14 | 14 | <MenuItem |
15 | 15 | key="doc" |
16 | 16 | :text="t('layout.header.dropdownItemDoc')" |
17 | - @click="openDoc" | |
18 | 17 | icon="ion:document-text-outline" |
19 | 18 | v-if="getShowDoc" |
20 | 19 | /> |
... | ... | @@ -22,13 +21,11 @@ |
22 | 21 | <MenuItem |
23 | 22 | v-if="getUseLockPage" |
24 | 23 | key="lock" |
25 | - @click="handleLock" | |
26 | 24 | :text="t('layout.header.tooltipLock')" |
27 | 25 | icon="ion:lock-closed-outline" |
28 | 26 | /> |
29 | 27 | <MenuItem |
30 | 28 | key="logout" |
31 | - @click="handleLoginOut" | |
32 | 29 | :text="t('layout.header.dropdownItemLoginOut')" |
33 | 30 | icon="ion:power-outline" |
34 | 31 | /> |
... | ... | @@ -57,7 +54,7 @@ |
57 | 54 | |
58 | 55 | import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; |
59 | 56 | |
60 | - //type MenuEvent = 'logout' | 'doc' | 'lock'; | |
57 | + type MenuEvent = 'logout' | 'doc' | 'lock'; | |
61 | 58 | |
62 | 59 | export default defineComponent({ |
63 | 60 | name: 'UserDropdown', |
... | ... | @@ -98,31 +95,28 @@ |
98 | 95 | openWindow(DOC_URL); |
99 | 96 | } |
100 | 97 | |
101 | - // function handleMenuClick(e: { key: MenuEvent }) { | |
102 | - // switch (e.key) { | |
103 | - // case 'logout': | |
104 | - // handleLoginOut(); | |
105 | - // break; | |
106 | - // case 'doc': | |
107 | - // openDoc(); | |
108 | - // break; | |
109 | - // case 'lock': | |
110 | - // handleLock(); | |
111 | - // break; | |
112 | - // } | |
113 | - // } | |
98 | + function handleMenuClick(e: { key: MenuEvent }) { | |
99 | + switch (e.key) { | |
100 | + case 'logout': | |
101 | + handleLoginOut(); | |
102 | + break; | |
103 | + case 'doc': | |
104 | + openDoc(); | |
105 | + break; | |
106 | + case 'lock': | |
107 | + handleLock(); | |
108 | + break; | |
109 | + } | |
110 | + } | |
114 | 111 | |
115 | 112 | return { |
116 | 113 | prefixCls, |
117 | 114 | t, |
118 | 115 | getUserInfo, |
119 | - // handleMenuClick, | |
116 | + handleMenuClick, | |
120 | 117 | getShowDoc, |
121 | 118 | register, |
122 | 119 | getUseLockPage, |
123 | - handleLoginOut, | |
124 | - openDoc, | |
125 | - handleLock, | |
126 | 120 | }; |
127 | 121 | }, |
128 | 122 | }); | ... | ... |