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 = () => {
-
+
{{ contentLargeTips }}
- 内容区全屏
+ 内容区全屏
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;
+}