fix(PageWrapper): 修复headerSticky样式 (#3569)

This commit is contained in:
苗大 2024-01-24 09:03:15 +08:00 committed by GitHub
parent a1e862bde7
commit 778ebe1f44
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 12 deletions

View File

@ -34,25 +34,24 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { PageWrapperFixedHeightKey } from '@/enums/pageEnum';
import { useContentHeight } from '@/hooks/web/useContentHeight';
import { useDesign } from '@/hooks/web/useDesign';
import { propTypes } from '@/utils/propTypes';
import { PageHeader } from 'ant-design-vue';
import { omit } from 'lodash-es';
import { import {
CSSProperties, CSSProperties,
PropType, PropType,
provide,
computed, computed,
watch, provide,
ref, ref,
unref, unref,
useAttrs, useAttrs,
useSlots, useSlots,
watch,
} from 'vue'; } from 'vue';
import PageFooter from './PageFooter.vue'; import PageFooter from './PageFooter.vue';
import { useDesign } from '@/hooks/web/useDesign';
import { propTypes } from '@/utils/propTypes';
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({ defineOptions({
name: 'PageWrapper', name: 'PageWrapper',
@ -114,7 +113,6 @@
]; ];
}); });
const { headerHeightRef } = useLayoutHeight();
const getHeaderStyle = computed((): CSSProperties => { const getHeaderStyle = computed((): CSSProperties => {
const { headerSticky } = props; const { headerSticky } = props;
if (!headerSticky) { if (!headerSticky) {
@ -123,7 +121,8 @@
return { return {
position: 'sticky', position: 'sticky',
top: `${unref(headerHeightRef)}px`, top: 0,
zIndex: 99,
...props.headerStyle, ...props.headerStyle,
}; };
}); });

View File

@ -1,5 +1,5 @@
<template> <template>
<PageWrapper title="单号234231029431" contentBackground> <PageWrapper title="单号234231029431" contentBackground headerSticky>
<template #extra> <template #extra>
<a-button> 操作一 </a-button> <a-button> 操作一 </a-button>
<a-button> 操作二 </a-button> <a-button> 操作二 </a-button>