Commit 20d7a25eb898a5c28351ff269b93bf104b8ac10e

Authored by 无木
1 parent 59d3e8c8

fix: user drop-down event key loss

修复顶部的用户操作下拉菜单点击事件丢失key参数的问题
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 });
... ...