admin-vben5/packages/effects/layouts/src/basic/tabbar/tabbar.vue

60 lines
1.3 KiB
Vue
Raw Normal View History

2024-05-19 21:20:42 +08:00
<script lang="ts" setup>
import { computed } from 'vue';
2024-07-10 00:50:41 +08:00
import { useRoute } from 'vue-router';
import { preferences } from '@vben-core/preferences';
import { useCoreTabbarStore } from '@vben-core/stores';
import { TabsToolMore, TabsToolScreen, TabsView } from '@vben-core/tabs-ui';
2024-05-19 21:20:42 +08:00
import { updateContentScreen, useTabs } from './use-tabs';
2024-05-19 21:20:42 +08:00
defineOptions({
2024-06-09 15:39:11 +08:00
name: 'LayoutTabbar',
2024-05-19 21:20:42 +08:00
});
defineProps<{ showIcon?: boolean }>();
2024-07-10 00:50:41 +08:00
const coreTabbarStore = useCoreTabbarStore();
const route = useRoute();
2024-05-19 21:20:42 +08:00
const {
createContextMenus,
currentActive,
currentTabs,
handleClick,
handleClose,
2024-07-10 00:50:41 +08:00
handleUnpinTab,
2024-05-19 21:20:42 +08:00
} = useTabs();
2024-07-10 00:50:41 +08:00
const menus = computed(() => {
return createContextMenus(route);
});
2024-07-10 00:50:41 +08:00
// 刷新后如果不保持tab状态关闭其他tab
if (!preferences.tabbar.persist) {
coreTabbarStore.closeOtherTabs(route);
}
2024-05-19 21:20:42 +08:00
</script>
<template>
<TabsView
2024-06-09 13:31:43 +08:00
:active="currentActive"
:context-menus="createContextMenus"
2024-05-19 21:20:42 +08:00
:show-icon="showIcon"
:tabs="currentTabs"
@close="handleClose"
@sort-tabs="coreTabbarStore.sortTabs"
@unpin="handleUnpinTab"
2024-06-09 13:31:43 +08:00
@update:active="handleClick"
2024-05-19 21:20:42 +08:00
/>
<div class="flex-center h-full">
<TabsToolMore :menus="menus" />
<TabsToolScreen
:screen="preferences.sidebar.hidden"
@change="updateContentScreen"
@update:screen="updateContentScreen"
/>
</div>
2024-05-19 21:20:42 +08:00
</template>