Skip to content

Commit 6933724

Browse files
sendyasendya
committed
fix: PageContainer fixedHeader no work
1 parent 02af260 commit 6933724

File tree

7 files changed

+77
-113
lines changed

7 files changed

+77
-113
lines changed

‎packages/pro-layout/examples/layouts/BasicLayout.vue‎

Lines changed: 54 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -68,103 +68,70 @@
6868
</pro-layout>
6969
</template>
7070

71-
<script lang="ts">
72-
import { computed, defineComponent, reactive, ref, watchEffect, onMounted } from 'vue';
71+
<script setup lang="ts">
72+
import { computed, reactive, ref, watchEffect, onMounted } from 'vue';
7373
import { useRouter } from 'vue-router';
7474
import { message, Button, Input, Switch, Select, Avatar, Space, Badge, Menu } from 'ant-design-vue';
75-
import { getMenuData, clearMenuItem, WaterMark, FooterToolbar } from '@ant-design-vue/pro-layout';
76-
import type { RouteContextProps } from '@ant-design-vue/pro-layout';
75+
import { getMenuData, clearMenuItem, type RouteContextProps } from '@ant-design-vue/pro-layout';
7776
7877
const i18n = (t: string) => t;
7978
80-
export default defineComponent({
81-
name: 'BasicLayout',
82-
components: {
83-
FooterToolbar,
84-
WaterMark,
79+
const watermarkContent = ref('Pro Layout');
80+
const loading = ref(false);
81+
const router = useRouter();
82+
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
8583
86-
[Button.name]: Button,
87-
[Input.name]: Input,
88-
[Input.Search.name]: Input.Search,
89-
[Switch.name]: Switch,
90-
[Select.name]: Select,
91-
['a-slect-option']: Select.Option,
92-
[Space.name]: Space,
93-
[Badge.name]: Badge,
94-
[Avatar.name]: Avatar,
95-
[Menu.Item.name]: Menu.Item,
96-
},
97-
setup() {
98-
const loading = ref(false);
99-
const watermarkContent = ref('Pro Layout');
100-
const router = useRouter();
101-
const { menuData } = getMenuData(clearMenuItem(router.getRoutes()));
102-
103-
const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
104-
selectedKeys: [],
105-
openKeys: [],
106-
// default
107-
collapsed: false,
108-
});
109-
110-
const state = reactive({
111-
menuData,
112-
splitMenus: false,
113-
// title: 'ProLayout',
114-
// logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
115-
navTheme: 'light',
116-
layout: 'side',
117-
fixSiderbar: false,
118-
fixedHeader: true,
119-
});
120-
const breadcrumb = computed(() =>
121-
router.currentRoute.value.matched.concat().map((item) => {
122-
return {
123-
path: item.path,
124-
breadcrumbName: item.meta.title || '',
125-
};
126-
})
127-
);
84+
const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
85+
selectedKeys: [],
86+
openKeys: [],
87+
// default
88+
collapsed: false,
89+
});
12890
129-
const handleCollapsed = (collapsed?: boolean) => {
130-
console.log('collapsed', collapsed);
131-
baseState.collapsed = collapsed;
91+
const state = reactive({
92+
menuData,
93+
splitMenus: false,
94+
// title: 'ProLayout',
95+
// logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
96+
navTheme: 'light',
97+
layout: 'mix',
98+
fixSiderbar: true,
99+
fixedHeader: true,
100+
});
101+
const breadcrumb = computed(() =>
102+
router.currentRoute.value.matched.concat().map((item) => {
103+
return {
104+
path: item.path,
105+
breadcrumbName: item.meta.title || '',
132106
};
133-
watchEffect(() => {
134-
if (router.currentRoute) {
135-
const matched = router.currentRoute.value.matched.concat();
136-
baseState.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path);
137-
baseState.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map((r) => r.path);
138-
}
139-
});
107+
})
108+
);
140109
141-
function handlePageLoadingClick() {
142-
loading.value = true;
143-
setTimeout(() => {
144-
loading.value = false;
145-
}, 2000);
146-
}
147-
148-
onMounted(() => {
149-
setTimeout(() => {
150-
watermarkContent.value = 'New Mark';
151-
}, 2000);
152-
});
110+
watchEffect(() => {
111+
if (router.currentRoute) {
112+
const matched = router.currentRoute.value.matched.concat();
113+
baseState.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path);
114+
baseState.openKeys = matched.filter((r) => r.path !== router.currentRoute.value.path).map((r) => r.path);
115+
}
116+
});
153117
154-
return {
155-
i18n,
156-
watermarkContent,
157-
baseState,
158-
state,
159-
loading,
160-
breadcrumb,
118+
const handleCollapsed = (collapsed?: boolean) => {
119+
baseState.collapsed = collapsed;
120+
};
121+
const handlePageLoadingClick = () => {
122+
loading.value = true;
123+
setTimeout(() => {
124+
loading.value = false;
125+
}, 2000);
126+
};
161127
162-
handlePageLoadingClick,
163-
handleCollapsed,
164-
handleSearch: () => {
165-
message.info('search..');
166-
},
167-
};
168-
},
128+
onMounted(() => {
129+
setTimeout(() => {
130+
watermarkContent.value = 'New Mark';
131+
}, 2000);
169132
});
133+
134+
const handleSearch = () => {
135+
message.info('search..');
136+
};
170137
</script>

‎packages/pro-layout/examples/views/MyPage.vue‎

Lines changed: 11 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
2-
<PageContainer :title="$route.meta.title">
2+
<PageContainer fixed-header :title="(route.meta.title as string)">
33
<template #tags>
4-
<a-tag>tag1</a-tag>
5-
<a-tag color="pink">tag2</a-tag>
4+
<Tag>tag1</Tag>
5+
<Tag color="pink">tag2</Tag>
66
</template>
7-
<a-result
7+
<Result
88
status="404"
99
:style="{
1010
height: '100%',
@@ -14,24 +14,17 @@
1414
sub-title="Sorry, you are not authorized to access this page."
1515
>
1616
<template #extra>
17-
<a-button type="primary">Back Home</a-button>
17+
<Button type="primary">Back Home</Button>
1818
</template>
19-
</a-result>
19+
</Result>
2020
</PageContainer>
2121
</template>
2222

23-
<script lang="ts">
24-
import { defineComponent } from 'vue';
23+
<script setup lang="ts">
2524
import { Button, Tag, Result } from 'ant-design-vue';
25+
import { PageContainer } from '@ant-design-vue/pro-layout';
2626
27-
export default defineComponent({
28-
components: {
29-
[Button.name]: Button,
30-
[Tag.name]: Tag,
31-
[Result.name]: Result,
32-
},
33-
setup() {
34-
return {};
35-
},
36-
});
27+
import { useRoute } from 'vue-router';
28+
29+
const route = useRoute();
3730
</script>

‎packages/pro-layout/examples/views/TestPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<page-container title="Page 1" sub-title="is a sub-title.">
2+
<page-container fixed-header title="Page 1" sub-title="is a sub-title.">
33
<template #content>
44
<div>
55
container.content

‎packages/pro-layout/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ant-design-vue/pro-layout",
3-
"version": "3.2.1",
3+
"version": "3.2.2",
44
"scripts": {
55
"dev": "vite",
66
"build": "vue-tsc --noEmit && vite build",

‎packages/pro-layout/src/BasicLayout.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,7 @@ const ProLayout = defineComponent({
227227
'disableMobile',
228228
'fixSiderbar',
229229
'fixedHeader',
230+
'headerHeight',
230231
// 'hasSideMenu',
231232
// 'hasHeader',
232233
// 'hasFooter',
@@ -238,6 +239,7 @@ const ProLayout = defineComponent({
238239
breadcrumb,
239240
flatMenuData,
240241
hasSide,
242+
hasHeader: true,
241243
flatMenu: hasFlatMenu,
242244
});
243245
provide(routeContextInjectKey, routeContext);
@@ -292,6 +294,8 @@ const ProLayout = defineComponent({
292294
)
293295
);
294296

297+
routeContext.hasHeader = !!headerDom.value;
298+
295299
const contentClassName = computed(() => {
296300
return {
297301
[`${baseClassName.value}-content`]: true,

‎packages/pro-layout/src/components/PageContainer/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,7 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
188188
extraContent,
189189
prefixedClassName,
190190
prefixCls,
191+
fixedHeader: _,
191192
...restProps
192193
} = props;
193194
const value = useRouteContext();
@@ -215,7 +216,7 @@ const ProPageHeader: FunctionalComponent<PageContainerProps & { prefixedClassNam
215216
<div class={`${prefixedClassName}-wrap`}>
216217
<PageHeader
217218
{...restProps}
218-
{...value}
219+
// {...value}
219220
title={pageHeaderTitle}
220221
breadcrumb={breadcrumb}
221222
footer={renderFooter({
@@ -279,7 +280,6 @@ const PageContainer = defineComponent({
279280
return () => {
280281
const { fixedHeader } = props;
281282
const footer = getSlot(slots, props, 'footer');
282-
283283
return (
284284
<div class={classNames.value}>
285285
{fixedHeader && headerDom.value ? (

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)