diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 18eb2955..8fe29912 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -4,7 +4,9 @@
-
+
+
+
@@ -12,7 +14,9 @@
-
+
+
+
@@ -27,7 +31,7 @@
import '@/style/layout.less';
import { storeToRefs } from 'pinia';
-import { computed, onBeforeUnmount, onMounted, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { prefix } from '@/config/global';
@@ -42,6 +46,7 @@ const route = useRoute();
const settingStore = useSettingStore();
const tabsRouterStore = useTabsRouterStore();
const setting = storeToRefs(settingStore);
+const showHeader = ref(true);
const mainLayoutCls = computed(() => [
{
@@ -59,66 +64,55 @@ const appendNewRoute = () => {
tabsRouterStore.appendTabRouterList({ path, query, title: title as string, name, isAlive: true, meta: route.meta });
};
-// 在操作监听过程中,如果已经隐藏了,就不再进行隐藏的dom操作// 如果已经显示了,就不再进行显示的dom操作
-let alreadyHidden = false;
-let alreadyShow = false;
+const toggleHeadVisibleScrollListener = () => {
+ const targetElement = document.querySelector(`.${prefix}-layout`);
+ const headerElement = document.querySelector(`header`);
-const toggleHeadVisible = () => {
- const layoutElement = document.querySelector(`.${prefix}-layout`);
+ const toggleHeadVisible = () => {
+ const layoutElement = document.querySelector(`.${prefix}-layout`);
+ const headerMenuElement = document.querySelector(`.${prefix}-header-menu-fixed`);
- if (layoutElement) {
- const { scrollTop } = layoutElement;
- const headerMenuFixedElement = document.querySelector(`.${prefix}-header-menu-fixed`);
- const headerMenuFixedElementHeight = headerMenuFixedElement.scrollHeight;
+ if (layoutElement) {
+ const { scrollTop } = layoutElement;
- // 当面包屑存在时 fixed在头部
- if (settingStore.showBreadcrumb) {
- document.querySelector(`.t-layout__header`)?.setAttribute('style', `position:relative;`);
- const breadcrumbElement = document.querySelector(`.t-breadcrumb`);
+ // 当面包屑存在时 面包屑存在时fixed在头部
+ if (settingStore.showBreadcrumb) {
+ const headerMenuFixedElementHeight = headerMenuElement?.scrollHeight || 0;
+ document.querySelector(`.t-layout__header`)?.setAttribute('style', `position:relative;`);
+ const breadcrumbElement = document.querySelector(`.t-breadcrumb`);
- if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
- if (!alreadyHidden) {
- headerMenuFixedElement.setAttribute('style', 'display: none;');
+ if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
+ headerMenuElement.setAttribute('style', 'display: none;');
breadcrumbElement.setAttribute('style', 'position:absolute;top:18px;');
- }
- alreadyHidden = true;
- alreadyShow = false;
- } else {
- if (!alreadyShow) {
- headerMenuFixedElement.setAttribute('style', null);
+ } else {
+ headerMenuElement.setAttribute('style', null);
breadcrumbElement.setAttribute('style', null);
}
- alreadyHidden = false;
- alreadyShow = true;
- }
- } else {
- const headerElement = document.querySelector(`.t-layout__header`);
- const sideNavMixFixedElement = document.querySelector(`.${prefix}-side-nav-mix-fixed`);
-
- if (scrollTop > headerMenuFixedElementHeight && settingStore.toggleHeadVisible) {
- if (!alreadyHidden) {
- headerElement.setAttribute('style', 'display: none;');
- // (layoutElement as HTMLElement).style.height = '100vh';
-
- sideNavMixFixedElement?.setAttribute('style', 'top: 0;');
- }
- alreadyHidden = true;
- alreadyShow = false;
} else {
- if (!alreadyShow) {
- headerElement.setAttribute('style', null);
- // (layoutElement as HTMLElement).style.height = 'calc(100vh - var(--td-comp-size-xxxl))';
- sideNavMixFixedElement?.setAttribute('style', null);
+ const sideNavMixFixedElement = document.querySelector(`.${prefix}-side-nav-mix-fixed`);
+
+ if (scrollTop > 50 && settingStore.toggleHeadVisible) {
+ headerElement.style.transform = 'translate3d(0, -100%, 0)';
+ headerElement.style.height = '0px';
+ headerElement.style.overflow = 'hidden';
+
+ (layoutElement as HTMLElement).style.height = '100vh';
+ const htmlElement = document.querySelector('html');
+ htmlElement.style.overflowY = 'hidden';
+
+ if (sideNavMixFixedElement) {
+ (sideNavMixFixedElement as HTMLElement).style.top = '0';
+ }
+ } else {
+ headerElement?.setAttribute('style', null);
+ if (sideNavMixFixedElement) {
+ sideNavMixFixedElement?.setAttribute('style', null);
+ }
}
- alreadyHidden = false;
- alreadyShow = true;
}
}
- }
-};
+ };
-const toggleHeadVisibleScrollListener = () => {
- const targetElement = document.querySelector(`.${prefix}-layout`);
if (targetElement) {
targetElement.addEventListener('scroll', toggleHeadVisible);
}
@@ -148,4 +142,12 @@ watch(
);
-
+