From f73947395184fd635df3d74c1c4b2701d0c708c1 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 25 六月 2024 14:51:04 +0800
Subject: [PATCH] 动态Import更新
---
src/layouts/default/header/MultipleHeader.vue | 157 +++++++++++++++++++++++++---------------------------
1 files changed, 76 insertions(+), 81 deletions(-)
diff --git a/src/layouts/default/header/MultipleHeader.vue b/src/layouts/default/header/MultipleHeader.vue
index 7244221..feb2052 100644
--- a/src/layouts/default/header/MultipleHeader.vue
+++ b/src/layouts/default/header/MultipleHeader.vue
@@ -1,108 +1,99 @@
<template>
- <div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
+ <div
+ :class="[`${prefixCls}__placeholder`]"
+ :style="getPlaceholderDomStyle"
+ v-if="getIsShowPlaceholderDom"
+ ></div>
<div :style="getWrapStyle" :class="getClass">
<LayoutHeader v-if="getShowInsetHeaderRef" />
- <MultipleTabs v-if="getShowTabs" />
+ <MultipleTabs v-if="getShowTabs" :key="tabStore.getLastDragEndIndex" />
</div>
</template>
-<script lang="ts">
- import { defineComponent, unref, computed, CSSProperties } from 'vue';
+<script lang="ts" setup>
+ import { unref, computed, CSSProperties } from 'vue';
import LayoutHeader from './index.vue';
import MultipleTabs from '../tabs/index.vue';
- import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
- import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
- import { useFullContent } from '/@/hooks/web/useFullContent';
- import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
- import { useAppInject } from '/@/hooks/web/useAppInject';
- import { useDesign } from '/@/hooks/web/useDesign';
+ import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
+ import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+ import { useFullContent } from '@/hooks/web/useFullContent';
+ import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
+ import { useAppInject } from '@/hooks/web/useAppInject';
+ import { useDesign } from '@/hooks/web/useDesign';
import { useLayoutHeight } from '../content/useContentViewHeight';
+ import { useMultipleTabStore } from '@/store/modules/multipleTab';
const HEADER_HEIGHT = 48;
const TABS_HEIGHT = 32;
- export default defineComponent({
- name: 'LayoutMultipleHeader',
- components: { LayoutHeader, MultipleTabs },
- setup() {
- const { setHeaderHeight } = useLayoutHeight();
- const { prefixCls } = useDesign('layout-multiple-header');
- const { getCalcContentWidth, getSplit } = useMenuSetting();
- const { getIsMobile } = useAppInject();
- const {
- getFixed,
- getShowInsetHeaderRef,
- getShowFullHeaderRef,
- getHeaderTheme,
- getShowHeader,
- } = useHeaderSetting();
+ defineOptions({ name: 'LayoutMultipleHeader' });
- const { getFullContent } = useFullContent();
+ const { setHeaderHeight } = useLayoutHeight();
+ const tabStore = useMultipleTabStore();
+ const { prefixCls } = useDesign('layout-multiple-header');
- const { getShowMultipleTab } = useMultipleTabSetting();
+ const { getCalcContentWidth, getSplit, getShowMenu } = useMenuSetting();
+ const { getIsMobile } = useAppInject();
+ const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } =
+ useHeaderSetting();
- const getShowTabs = computed(() => {
- return unref(getShowMultipleTab) && !unref(getFullContent);
- });
+ const { getFullContent } = useFullContent();
- const getIsShowPlaceholderDom = computed(() => {
- return unref(getFixed) || unref(getShowFullHeaderRef);
- });
+ const { getShowMultipleTab, getAutoCollapse } = useMultipleTabSetting();
- const getWrapStyle = computed((): CSSProperties => {
- const style: CSSProperties = {};
- if (unref(getFixed)) {
- style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
- }
- if (unref(getShowFullHeaderRef)) {
- style.top = `${HEADER_HEIGHT}px`;
- }
- return style;
- });
+ const getShowTabs = computed(() => {
+ return unref(getShowMultipleTab) && !unref(getFullContent);
+ });
- const getIsFixed = computed(() => {
- return unref(getFixed) || unref(getShowFullHeaderRef);
- });
+ const getIsShowPlaceholderDom = computed(() => {
+ return unref(getFixed) || unref(getShowFullHeaderRef);
+ });
- const getPlaceholderDomStyle = computed((): CSSProperties => {
- let height = 0;
- if (
- (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
- unref(getShowHeader) &&
- !unref(getFullContent)
- ) {
- height += HEADER_HEIGHT;
- }
- if (unref(getShowMultipleTab) && !unref(getFullContent)) {
- height += TABS_HEIGHT;
- }
- setHeaderHeight(height);
- return {
- height: `${height}px`,
- };
- });
+ const getWrapStyle = computed((): CSSProperties => {
+ const style: CSSProperties = {};
+ if (unref(getFixed)) {
+ style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
+ }
+ if (unref(getShowFullHeaderRef)) {
+ style.top = `${HEADER_HEIGHT}px`;
+ }
+ return style;
+ });
- const getClass = computed(() => {
- return [
- prefixCls,
- `${prefixCls}--${unref(getHeaderTheme)}`,
- { [`${prefixCls}--fixed`]: unref(getIsFixed) },
- ];
- });
+ const getIsFixed = computed(() => {
+ return unref(getFixed) || unref(getShowFullHeaderRef);
+ });
- return {
- getClass,
- prefixCls,
- getPlaceholderDomStyle,
- getIsFixed,
- getWrapStyle,
- getIsShowPlaceholderDom,
- getShowTabs,
- getShowInsetHeaderRef,
- };
- },
+ const getIsUnFold = computed(() => !unref(getShowMenu) && !unref(getShowHeader));
+
+ const getPlaceholderDomStyle = computed((): CSSProperties => {
+ let height = 0;
+ if (!(unref(getAutoCollapse) && unref(getIsUnFold))) {
+ if (
+ (unref(getShowFullHeaderRef) || !unref(getSplit)) &&
+ unref(getShowHeader) &&
+ !unref(getFullContent)
+ ) {
+ height += HEADER_HEIGHT;
+ }
+ if (unref(getShowMultipleTab) && !unref(getFullContent)) {
+ height += TABS_HEIGHT;
+ }
+ setHeaderHeight(height);
+ }
+ return {
+ height: `${height}px`,
+ };
+ });
+
+ const getClass = computed(() => {
+ return [
+ prefixCls,
+ `${prefixCls}--${unref(getHeaderTheme)}`,
+ { [`${prefixCls}--fixed`]: unref(getIsFixed) },
+ ];
});
</script>
<style lang="less" scoped>
@@ -122,5 +113,9 @@
top: 0;
width: 100%;
}
+
+ &__placeholder {
+ transition: height 0.6s ease-in-out;
+ }
}
</style>
--
Gitblit v1.9.3