From 20d7a25eb898a5c28351ff269b93bf104b8ac10e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Sun, 27 Jun 2021 15:33:30 +0800
Subject: [PATCH] fix: user drop-down event key loss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复顶部的用户操作下拉菜单点击事件丢失key参数的问题
---
 .../components/user-dropdown/DropMenuItem.vue |  9 ++++-
 .../header/components/user-dropdown/index.vue | 38 ++++++++-----------
 2 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
index 3234531c..aa193d5b 100644
--- a/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
+++ b/src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
@@ -1,5 +1,5 @@
 <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>
diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue
index 64b56871..2c3669a4 100644
--- a/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
@@ -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,
       };
     },
   });
-- 
GitLab