perf: 隐藏标签页功能优化

This commit is contained in:
lrl 2021-10-24 14:19:57 +08:00 committed by 啝裳
parent 822261c922
commit 8d2824fe82
3 changed files with 29 additions and 20 deletions

View File

@ -1,6 +1,5 @@
<script setup lang="ts">
import { split } from "lodash-es";
import { nextTick } from "vue";
import panel from "../panel/index.vue";
import { useRouter } from "vue-router";
import { emitter } from "/@/utils/mitt";
@ -52,11 +51,7 @@ if (settings.tagsVal === null) {
localOperate("tagsVal", false, "set");
settings.tagsVal = false;
}
nextTick(() => {
window.document
.querySelector(".app-main")
?.setAttribute("data-show-tag", settings.tagsVal);
});
window.document.body.setAttribute("data-show-tag", settings.tagsVal);
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
const targetEl = target || document.body;

View File

@ -447,9 +447,7 @@ onBeforeMount(() => {
emitter.on("tagViewsChange", key => {
if (unref(showTags) === key) return;
showTags.value = key;
window.document
.querySelector(".app-main")
?.setAttribute("data-show-tag", key);
window.document.body.setAttribute("data-show-tag", key);
});
//

View File

@ -533,14 +533,6 @@
}
body[data-layout="vertical"] {
.fixed-header + .app-main[data-show-tag="false"] {
padding-top: 85px;
}
.fixed-header + .app-main[data-show-tag="true"] {
padding-top: 48px;
}
.hideSidebar {
.fixed-header {
width: calc(100% - 54px) !important;
@ -596,12 +588,36 @@ body[data-layout="horizontal"] {
width: 100% !important;
transition: none !important;
}
}
.fixed-header + .app-main[data-show-tag="false"] {
padding-top: 100px;
// vertical模式下不隐藏标签页
body[data-layout="vertical"][data-show-tag="false"] {
.fixed-header + .app-main {
padding-top: 85px;
}
}
// vertical模式下隐藏标签页
body[data-layout="vertical"][data-show-tag="true"] {
.fixed-header + .app-main {
padding-top: 48px;
}
}
// horizontal模式下不隐藏标签页
body[data-layout="horizontal"][data-show-tag="false"] {
.fixed-header + .app-main {
padding-top: 98px;
}
}
// horizontal模式下隐藏标签页
body[data-layout="horizontal"][data-show-tag="true"] {
.fixed-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}
.fixed-header + .app-main[data-show-tag="true"] {
.fixed-header + .app-main {
padding-top: 62px;
}
}