perf: page componet supports custom height offset for flexible content height … (#6081)
* perf: Page supports custom height offset for flexible content height control. 允许通过 height 属性调整页面内容高度计算。修改了 Page 组件以支持自定义高度偏移量,用于更灵活的内容高度控制。 * chore: typo * perf(page): replace height with heightOffset for flexible content sizing The `height` prop was replaced with `heightOffset` to better describe its purpose when used with `autoContentHeight`. The new prop allows custom offset values (in pixels) to adjust content area sizing, with clearer documentation.pull/86/head^2
							parent
							
								
									8aa7dabeff
								
							
						
					
					
						commit
						20c15f352f
					
				|  | @ -12,7 +12,8 @@ defineOptions({ | ||||||
|   name: 'Page', |   name: 'Page', | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
| const { autoContentHeight = false } = defineProps<PageProps>(); | const { autoContentHeight = false, heightOffset = 0 } = | ||||||
|  |   defineProps<PageProps>(); | ||||||
| 
 | 
 | ||||||
| const headerHeight = ref(0); | const headerHeight = ref(0); | ||||||
| const footerHeight = ref(0); | const footerHeight = ref(0); | ||||||
|  | @ -24,7 +25,7 @@ const footerRef = useTemplateRef<HTMLDivElement>('footerRef'); | ||||||
| const contentStyle = computed<StyleValue>(() => { | const contentStyle = computed<StyleValue>(() => { | ||||||
|   if (autoContentHeight) { |   if (autoContentHeight) { | ||||||
|     return { |     return { | ||||||
|       height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px)`, |       height: `calc(var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT}) - ${headerHeight.value}px - ${typeof heightOffset === 'number' ? `${heightOffset}px` : heightOffset})`, | ||||||
|       overflowY: shouldAutoHeight.value ? 'auto' : 'unset', |       overflowY: shouldAutoHeight.value ? 'auto' : 'unset', | ||||||
|     }; |     }; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|  | @ -8,4 +8,10 @@ export interface PageProps { | ||||||
|   autoContentHeight?: boolean; |   autoContentHeight?: boolean; | ||||||
|   headerClass?: string; |   headerClass?: string; | ||||||
|   footerClass?: string; |   footerClass?: string; | ||||||
|  |   /** | ||||||
|  |    * Custom height offset value (in pixels) to adjust content area sizing | ||||||
|  |    * when used with autoContentHeight | ||||||
|  |    * @default 0 | ||||||
|  |    */ | ||||||
|  |   heightOffset?: number; | ||||||
| } | } | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue
	
	 Jin Mao
						Jin Mao