mirror of
				https://github.com/pure-admin/vue-pure-admin.git
				synced 2025-11-03 13:44:47 +08:00 
			
		
		
		
	perf: 隐藏标签页功能优化
This commit is contained in:
		
							parent
							
								
									822261c922
								
							
						
					
					
						commit
						8d2824fe82
					
				@ -1,6 +1,5 @@
 | 
				
			|||||||
<script setup lang="ts">
 | 
					<script setup lang="ts">
 | 
				
			||||||
import { split } from "lodash-es";
 | 
					import { split } from "lodash-es";
 | 
				
			||||||
import { nextTick } from "vue";
 | 
					 | 
				
			||||||
import panel from "../panel/index.vue";
 | 
					import panel from "../panel/index.vue";
 | 
				
			||||||
import { useRouter } from "vue-router";
 | 
					import { useRouter } from "vue-router";
 | 
				
			||||||
import { emitter } from "/@/utils/mitt";
 | 
					import { emitter } from "/@/utils/mitt";
 | 
				
			||||||
@ -52,11 +51,7 @@ if (settings.tagsVal === null) {
 | 
				
			|||||||
  localOperate("tagsVal", false, "set");
 | 
					  localOperate("tagsVal", false, "set");
 | 
				
			||||||
  settings.tagsVal = false;
 | 
					  settings.tagsVal = false;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
nextTick(() => {
 | 
					window.document.body.setAttribute("data-show-tag", settings.tagsVal);
 | 
				
			||||||
  window.document
 | 
					 | 
				
			||||||
    .querySelector(".app-main")
 | 
					 | 
				
			||||||
    ?.setAttribute("data-show-tag", settings.tagsVal);
 | 
					 | 
				
			||||||
});
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
 | 
					function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
 | 
				
			||||||
  const targetEl = target || document.body;
 | 
					  const targetEl = target || document.body;
 | 
				
			||||||
 | 
				
			|||||||
@ -447,9 +447,7 @@ onBeforeMount(() => {
 | 
				
			|||||||
  emitter.on("tagViewsChange", key => {
 | 
					  emitter.on("tagViewsChange", key => {
 | 
				
			||||||
    if (unref(showTags) === key) return;
 | 
					    if (unref(showTags) === key) return;
 | 
				
			||||||
    showTags.value = key;
 | 
					    showTags.value = key;
 | 
				
			||||||
    window.document
 | 
					    window.document.body.setAttribute("data-show-tag", key);
 | 
				
			||||||
      .querySelector(".app-main")
 | 
					 | 
				
			||||||
      ?.setAttribute("data-show-tag", key);
 | 
					 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  // 改变标签风格
 | 
					  // 改变标签风格
 | 
				
			||||||
 | 
				
			|||||||
@ -533,14 +533,6 @@
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
body[data-layout="vertical"] {
 | 
					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 {
 | 
					  .hideSidebar {
 | 
				
			||||||
    .fixed-header {
 | 
					    .fixed-header {
 | 
				
			||||||
      width: calc(100% - 54px) !important;
 | 
					      width: calc(100% - 54px) !important;
 | 
				
			||||||
@ -596,12 +588,36 @@ body[data-layout="horizontal"] {
 | 
				
			|||||||
    width: 100% !important;
 | 
					    width: 100% !important;
 | 
				
			||||||
    transition: none !important;
 | 
					    transition: none !important;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .fixed-header + .app-main[data-show-tag="false"] {
 | 
					// vertical模式下不隐藏标签页
 | 
				
			||||||
    padding-top: 100px;
 | 
					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;
 | 
					    padding-top: 62px;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user