github_mirrors/vben-admin-thin-next
1
0
Fork 0
mirror of https://github.com/vbenjs/vben-admin-thin-next.git synced 2025-01-24 02:00:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: user drop-down event key loss

Browse Source 
修复顶部的用户操作下拉菜单点击事件丢失key参数的问题
This commit is contained in:
无木 2021-06-27 15:33:30 +08:00
parent 59d3e8c80f
commit 20d7a25eb8
2 changed files with 23 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/layouts/default/header/components/user-dropdown/DropMenuItem.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<MenuItem :key="key"> <MenuItem :key="itemKey">
<span class="flex items-center"> <span class="flex items-center">
<Icon :icon="icon" class="mr-1" /> <Icon :icon="icon" class="mr-1" />
<span>{{ text }}</span> <span>{{ text }}</span>
@ -9,7 +9,7 @@
<script lang="ts"> <script lang="ts">
import { Menu } from 'ant-design-vue'; import { Menu } from 'ant-design-vue';
import { defineComponent } from 'vue'; import { computed, defineComponent, getCurrentInstance } from 'vue';
import Icon from '/@/components/Icon/index'; import Icon from '/@/components/Icon/index';
import { propTypes } from '/@/utils/propTypes'; import { propTypes } from '/@/utils/propTypes';
@ -22,5 +22,10 @@
text: propTypes.string, text: propTypes.string,
icon: propTypes.string, icon: propTypes.string,
}, },
setup(props) {
const instance = getCurrentInstance();
const itemKey = computed(() => props.key || instance?.vnode?.props?.key);
return { itemKey };
},
}); });
</script> </script>

38
src/layouts/default/header/components/user-dropdown/index.vue
View File

@ -10,11 +10,10 @@
</span> </span>
<template #overlay> <template #overlay>
<Menu> <Menu @click="handleMenuClick">
<MenuItem <MenuItem
key="doc" key="doc"
:text="t('layout.header.dropdownItemDoc')" :text="t('layout.header.dropdownItemDoc')"
@click="openDoc"
icon="ion:document-text-outline" icon="ion:document-text-outline"
v-if="getShowDoc" v-if="getShowDoc"
/> />
@ -22,13 +21,11 @@
<MenuItem <MenuItem
v-if="getUseLockPage" v-if="getUseLockPage"
key="lock" key="lock"
@click="handleLock"
:text="t('layout.header.tooltipLock')" :text="t('layout.header.tooltipLock')"
icon="ion:lock-closed-outline" icon="ion:lock-closed-outline"
/> />
<MenuItem <MenuItem
key="logout" key="logout"
@click="handleLoginOut"
:text="t('layout.header.dropdownItemLoginOut')" :text="t('layout.header.dropdownItemLoginOut')"
icon="ion:power-outline" icon="ion:power-outline"
/> />
@ -57,7 +54,7 @@
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
//type MenuEvent = 'logout' | 'doc' | 'lock'; type MenuEvent = 'logout' | 'doc' | 'lock';
export default defineComponent({ export default defineComponent({
name: 'UserDropdown', name: 'UserDropdown',
@ -98,31 +95,28 @@
openWindow(DOC_URL); openWindow(DOC_URL);
} }
// function handleMenuClick(e: { key: MenuEvent }) { function handleMenuClick(e: { key: MenuEvent }) {
// switch (e.key) { switch (e.key) {
// case 'logout': case 'logout':
// handleLoginOut(); handleLoginOut();
// break; break;
// case 'doc': case 'doc':
// openDoc(); openDoc();
// break; break;
// case 'lock': case 'lock':
// handleLock(); handleLock();
// break; break;
// } }
// } }
return { return {
prefixCls, prefixCls,
t, t,
getUserInfo, getUserInfo,
// handleMenuClick, handleMenuClick,
getShowDoc, getShowDoc,
register, register,
getUseLockPage, getUseLockPage,
handleLoginOut,
openDoc,
handleLock,
}; };
}, },
}); });