fix: automatic hiding and displaying of headers can only be used on content (#4145)
							parent
							
								
									963e79063f
								
							
						
					
					
						commit
						3b0f72330a
					
				| 
						 | 
					@ -16,15 +16,15 @@ outline: deep
 | 
				
			||||||
 | 
					
 | 
				
			||||||
```ts
 | 
					```ts
 | 
				
			||||||
// 有需要可以自行打开注释,并创建文件夹
 | 
					// 有需要可以自行打开注释,并创建文件夹
 | 
				
			||||||
// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code --]
 | 
					// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true }); // [!code --]
 | 
				
			||||||
const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code ++]
 | 
					const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code ++]
 | 
				
			||||||
/** 动态路由 */
 | 
					/** 动态路由 */
 | 
				
			||||||
const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 | 
					const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/** 静态路由列表,访问这些页面可以不需要权限 */
 | 
					/** 外部路由列表,访问这些页面可以不需要Layout,可能用于内嵌在别的系统 */
 | 
				
			||||||
// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code --]
 | 
					// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles) // [!code --]
 | 
				
			||||||
const staticRoutes: RouteRecordRaw[] = []; // [!code --]
 | 
					const externalRoutes: RouteRecordRaw[] = []; // [!code --]
 | 
				
			||||||
const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code ++]
 | 
					const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles); // [!code ++]
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
### 动态路由
 | 
					### 动态路由
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -59,6 +59,11 @@ const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse');
 | 
				
			||||||
const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 | 
					const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 | 
				
			||||||
const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
 | 
					const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// side是否处于hover状态展开菜单中
 | 
				
			||||||
 | 
					const sidebarExpandOnHovering = ref(false);
 | 
				
			||||||
 | 
					const headerIsHidden = ref(false);
 | 
				
			||||||
 | 
					const contentRef = ref();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const {
 | 
					const {
 | 
				
			||||||
  arrivedState,
 | 
					  arrivedState,
 | 
				
			||||||
  directions,
 | 
					  directions,
 | 
				
			||||||
| 
						 | 
					@ -66,11 +71,7 @@ const {
 | 
				
			||||||
  y: scrollY,
 | 
					  y: scrollY,
 | 
				
			||||||
} = useScroll(document);
 | 
					} = useScroll(document);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const { y: mouseY } = useMouse({ type: 'client' });
 | 
					const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
 | 
				
			||||||
 | 
					 | 
				
			||||||
// side是否处于hover状态展开菜单中
 | 
					 | 
				
			||||||
const sidebarExpandOnHovering = ref(false);
 | 
					 | 
				
			||||||
const headerIsHidden = ref(false);
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
const realLayout = computed(() =>
 | 
					const realLayout = computed(() =>
 | 
				
			||||||
  props.isMobile ? 'sidebar-nav' : props.layout,
 | 
					  props.isMobile ? 'sidebar-nav' : props.layout,
 | 
				
			||||||
| 
						 | 
					@ -507,6 +508,7 @@ function handleOpenMenu() {
 | 
				
			||||||
    </LayoutSidebar>
 | 
					    </LayoutSidebar>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div
 | 
					    <div
 | 
				
			||||||
 | 
					      ref="contentRef"
 | 
				
			||||||
      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
 | 
					      class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
 | 
				
			||||||
    >
 | 
					    >
 | 
				
			||||||
      <div
 | 
					      <div
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in New Issue