diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue index 9259a2f..af5147a 100644 --- a/src/components/Screenfull/index.vue +++ b/src/components/Screenfull/index.vue @@ -35,6 +35,8 @@ const handleFullscreenClick = () => { } const handleFullscreenChange = () => { isFullscreen.value = screenfull.isFullscreen + // 退出全屏时清除所有的 class + isFullscreen.value || (document.body.className = "") } watchEffect((onCleanup) => { // 挂载组件时自动执行 @@ -55,8 +57,17 @@ const contentLargeSvgName = computed(() => { return isContentLarge.value ? "fullscreen-exit" : "fullscreen" }) const handleContentLargeClick = () => { - document.body.className = !isContentLarge.value ? "content-large" : "" isContentLarge.value = !isContentLarge.value + // 内容区放大时,将不需要的组件隐藏 + document.body.className = isContentLarge.value ? "content-large" : "" +} +const handleContentFullClick = () => { + // 取消内容区放大 + isContentLarge.value && handleContentLargeClick() + // 内容区全屏时,将不需要的组件隐藏 + document.body.className = "content-full" + // 开启全屏 + handleFullscreenClick() } //#endregion @@ -68,14 +79,14 @@ const handleContentLargeClick = () => { - + diff --git a/src/layouts/components/TagsView/ScrollPane.vue b/src/layouts/components/TagsView/ScrollPane.vue index 71a18dc..e7167f4 100644 --- a/src/layouts/components/TagsView/ScrollPane.vue +++ b/src/layouts/components/TagsView/ScrollPane.vue @@ -114,7 +114,7 @@ listenerRouteChange(() => { - + diff --git a/src/layouts/components/TagsView/index.vue b/src/layouts/components/TagsView/index.vue index a088baf..62a6fe4 100644 --- a/src/layouts/components/TagsView/index.vue +++ b/src/layouts/components/TagsView/index.vue @@ -196,6 +196,7 @@ onMounted(() => { width: 100%; background-color: var(--v3-header-bg-color); box-shadow: 0 0 3px 0 #00000010; + overflow: hidden; .tags-view-wrapper { .tags-view-item { display: inline-block; diff --git a/src/styles/variables.css b/src/styles/variables.css index fae92c1..b769e6d 100644 --- a/src/styles/variables.css +++ b/src/styles/variables.css @@ -42,3 +42,16 @@ body.content-large { --v3-sidebar-width: 0px; --v3-sidebar-hide-width: 0px; } + +/** 内容区全屏时,将不需要的组件隐藏 */ +body.content-full { + /** Header 区域 */ + --v3-header-height: 0px; + /** NavigationBar 组件 */ + --v3-navigationbar-height: 0px; + /** Sidebar 组件 */ + --v3-sidebar-width: 0px; + --v3-sidebar-hide-width: 0px; + /** TagsView 组件 */ + --v3-tagsview-height: 0px; +}