fix: user drop-down event key loss

修复顶部的用户操作下拉菜单点击事件丢失key参数的问题

fix: user drop-down event key loss
修复顶部的用户操作下拉菜单点击事件丢失key参数的问题
无木
1 parent 59d3e8c8
Showing 2 changed files with 23 additions and 24 deletions
src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
src/layouts/default/header/components/user-dropdown/index.vue
 <template>
-  <MenuItem :key="key">
+  <MenuItem :key="itemKey">
     <span class="flex items-center">
       <Icon :icon="icon" class="mr-1" />
       <span>{{ text }}</span>
@@ -9,7 +9,7 @@
 <script lang="ts">
   import { Menu } from 'ant-design-vue';
-  import { defineComponent } from 'vue';
+  import { computed, defineComponent, getCurrentInstance } from 'vue';
   import Icon from '/@/components/Icon/index';
   import { propTypes } from '/@/utils/propTypes';
@@ -22,5 +22,10 @@
       text: propTypes.string,
       icon: propTypes.string,
     },
+    setup(props) {
+      const instance = getCurrentInstance();
+      const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
+      return { itemKey };
+    },
   });
 </script>
@@ -10,11 +10,10 @@
     </span>
     <template #overlay>
-      <Menu>
+      <Menu @click="handleMenuClick">
         <MenuItem
           key="doc"
           :text="t('layout.header.dropdownItemDoc')"
-          @click="openDoc"
           icon="ion:document-text-outline"
           v-if="getShowDoc"
         />
@@ -22,13 +21,11 @@
         <MenuItem
           v-if="getUseLockPage"
           key="lock"
-          @click="handleLock"
           :text="t('layout.header.tooltipLock')"
           icon="ion:lock-closed-outline"
         />
         <MenuItem
           key="logout"
-          @click="handleLoginOut"
           :text="t('layout.header.dropdownItemLoginOut')"
           icon="ion:power-outline"
         />
@@ -57,7 +54,7 @@
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-  //type MenuEvent = 'logout' | 'doc' | 'lock';
+  type MenuEvent = 'logout' | 'doc' | 'lock';
   export default defineComponent({
     name: 'UserDropdown',
@@ -98,31 +95,28 @@
         openWindow(DOC_URL);
       }
-      // function handleMenuClick(e: { key: MenuEvent }) {
-      //   switch (e.key) {
-      //     case 'logout':
-      //       handleLoginOut();
-      //       break;
-      //     case 'doc':
-      //       openDoc();
-      //       break;
-      //     case 'lock':
-      //       handleLock();
-      //       break;
-      //   }
-      // }
+      function handleMenuClick(e: { key: MenuEvent }) {
+        switch (e.key) {
+          case 'logout':
+            handleLoginOut();
+            break;
+          case 'doc':
+            openDoc();
+            break;
+          case 'lock':
+            handleLock();
+            break;
+        }
+      }
       return {
         prefixCls,
         t,
         getUserInfo,
-        // handleMenuClick,
+        handleMenuClick,
         getShowDoc,
         register,
         getUseLockPage,
-        handleLoginOut,
-        openDoc,
-        handleLock,
       };
     },
   });