diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue index 971cd42d..fc3024f6 100644 --- a/src/components/Page/src/PageWrapper.vue +++ b/src/components/Page/src/PageWrapper.vue @@ -4,6 +4,7 @@ :ghost="ghost" :title="title" v-bind="omit($attrs, 'class')" + :style="getHeaderStyle" ref="headerRef" v-if="getShowHeader" > @@ -52,6 +53,7 @@ import { omit } from 'lodash-es'; import { PageHeader } from 'ant-design-vue'; import { useContentHeight } from '/@/hooks/web/useContentHeight'; + import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight'; import { PageWrapperFixedHeightKey } from '/@/enums/pageEnum'; defineOptions({ @@ -63,6 +65,8 @@ title: propTypes.string, dense: propTypes.bool, ghost: propTypes.bool, + headerSticky: propTypes.bool, + headerStyle: Object as PropType, content: propTypes.string, contentStyle: { type: Object as PropType, @@ -112,6 +116,20 @@ ]; }); + const { headerHeightRef } = useLayoutHeight(); + const getHeaderStyle = computed((): CSSProperties => { + const { headerSticky } = props; + if (!headerSticky) { + return {}; + } + + return { + position: 'sticky', + top: `${unref(headerHeightRef)}px`, + ...props.headerStyle, + }; + }); + const getShowHeader = computed( () => props.content || slots?.headerContent || props.title || getHeaderSlots.value.length, );