Skip to content

P
pro-layout
Unverified Commit e868e745 authored by Sendya's avatar Sendya
Browse files
Options

fix(PageHeader): content, extraContent

parent b56fb579
Show whitespace changes
Inline Side-by-side
Showing with 177 additions and 20 deletions
examples/demo/form.tsx
View file @ e868e745
......@@ -7,6 +7,7 @@ export default defineComponent({
const route = useRoute();
return () => (
<PageContainer
title={route.meta.title}
breadcrumb={{
routes: [{ path: '/', breadcrumbName: 'home' }] as Route[],
}}
......
examples/demo/page1.tsx
View file @ e868e745
import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';
import { Button, Dropdown, Menu, Tag, Descriptions } from 'ant-design-vue';
import { PageContainer, Route } from '../../src';
import { EllipsisOutlined } from '@ant-design/icons-vue';
import { i18n } from '../index';
export default defineComponent({
setup() {
const route = useRoute();
return () => (
<div>
<h1>Page: {route.meta.title}</h1>
<PageContainer
title={route.meta.title}
subTitle={'page sub-title'}
breadcrumb={{
routes: route.matched.concat().map(r => {
return {
path: r.path,
breadcrumbName: i18n(r.meta?.title || ''),
} as Route;
}),
}}
tags={[<Tag color={'blue'}>Tag 1</Tag>, <Tag color={'pink'}>Tag 2</Tag>]}
tabList={[
{
tab: '已选择',
key: '1',
},
{
tab: '可点击',
key: '2',
},
{
tab: '禁用',
key: '3',
disabled: true,
},
]}
extra={[
<Button key="1">次要按钮</Button>,
<Button key="2">次要按钮</Button>,
<Button key="3" type="primary">
主要按钮
</Button>,
<Dropdown
key="dropdown"
trigger={['click']}
overlay={
<Menu>
<Menu.Item key="1">下拉菜单</Menu.Item>
<Menu.Item key="2">下拉菜单2</Menu.Item>
<Menu.Item key="3">下拉菜单3</Menu.Item>
</Menu>
}
>
<Button key="4" style={{ padding: '0 8px' }}>
<EllipsisOutlined />
</Button>
</Dropdown>,
]}
content={
<Descriptions column={2} style={{ marginBottom: -16 }}>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="单据备注">浙江省杭州市西湖区工专路</Descriptions.Item>
</Descriptions>
}
extraContent={<span>额外内容区，位于 content 的右侧</span>}
/* v-slots={{
tags: () => {
return <Tag>Tag1Slot</Tag>;
},
}} */
/* v-slots={{
extra: () => {
return [
<Button key="1">次要按钮</Button>,
<Button key="2">次要按钮</Button>,
<Button key="3" type="primary">
主要按钮
</Button>,
<Dropdown
key="dropdown"
trigger={['click']}
overlay={
<Menu>
<Menu.Item key="1">下拉菜单</Menu.Item>
<Menu.Item key="2">下拉菜单2</Menu.Item>
<Menu.Item key="3">下拉菜单3</Menu.Item>
</Menu>
}
>
<Button key="4" style={{ padding: '0 8px' }}>
<EllipsisOutlined />
</Button>
</Dropdown>,
];
},
content: () => {
return (
<Descriptions column={2} style={{ marginBottom: -16 }}>
<Descriptions.Item label="创建人">曲丽丽</Descriptions.Item>
<Descriptions.Item label="关联表单">
<a>421421</a>
</Descriptions.Item>
<Descriptions.Item label="创建时间">2017-01-10</Descriptions.Item>
<Descriptions.Item label="单据备注">浙江省杭州市西湖区工专路</Descriptions.Item>
</Descriptions>
);
},
extraContent: () => {
return <span>额外内容区，位于 content 的右侧</span>;
},
}} */
>
<pre>{JSON.stringify(route.meta, null, 4)}</pre>
</div>
</PageContainer>
);
},
});
examples/index.tsx
View file @ e868e745
......@@ -23,7 +23,7 @@ const locales: Record<string, string> = {
'views.dashboard.title': '页面1',
};
const i18n = (key: string): string => {
export const i18n = (key: string): string => {
return locales[key] || key;
};
......@@ -119,7 +119,7 @@ const BasicLayout = defineComponent({
routes: breadcrumb.value,
}}
>
<WaterMark content="Ant Design Pro of Vue">
<WaterMark content="Pro Layout">
<router-view />
</WaterMark>
<FooterToolbar>
......
src/FooterToolbar/index.less
View file @ e868e745
......@@ -6,7 +6,7 @@
position: fixed;
right: 0;
bottom: 0;
z-index: 99;
z-index: 98;
display: flex;
width: 100%;
align-items: center;
......
src/PageContainer/index.tsx
View file @ e868e745
import { FunctionalComponent, VNodeChild, ref, unref } from 'vue';
import { FunctionalComponent, VNodeChild, computed, unref } from 'vue';
/* replace antd ts define */
import { TabPaneProps } from './interfaces/TabPane';
import { TabBarExtraContent, TabsProps } from './interfaces/Tabs';
......@@ -6,6 +6,7 @@ import { PageHeaderProps } from './interfaces/PageHeader';
import { AffixProps } from './interfaces/Affix';
/* replace antd ts define end */
import { useRouteContext, RouteContextProps } from '../RouteContext';
import { getCustomRender } from '../utils';
import { withInstall } from 'ant-design-vue/es/_util/type';
import 'ant-design-vue/es/affix/style';
import Affix from 'ant-design-vue/es/affix';
......@@ -119,8 +120,16 @@ const renderPageHeader = (
<div class={`${prefixedClassName}-detail`}>
<div class={`${prefixedClassName}-main`}>
<div class={`${prefixedClassName}-row`}>
{content && <div class={`${prefixedClassName}-content`}>{content}</div>}
{extraContent && <div class={`${prefixedClassName}-extraContent`}>{extraContent}</div>}
{content && (
<div class={`${prefixedClassName}-content`}>
{(typeof content === 'function' && content()) || content}
</div>
)}
{extraContent && (
<div class={`${prefixedClassName}-extraContent`}>
{(typeof extraContent === 'function' && extraContent()) || extraContent}
</div>
)}
</div>
</div>
</div>
......@@ -176,12 +185,18 @@ const PageContainer: FunctionalComponent<PageContainerProps> = (props, { slots }
const { getPrefixCls } = value;
const prefixCls = props.prefixCls || getPrefixCls();
const prefixedClassName = `${prefixCls}-page-container`; // computed(() => `${prefixCls}-page-container`);
const classNames = ref({
const classNames = computed(() => {
return {
[prefixedClassName]: true,
[`${prefixCls}-page-container-ghost`]: ghost,
};
});
const tags = getCustomRender(props, slots, 'tags');
const headerContent = getCustomRender(props, slots, 'content');
const extra = getCustomRender(props, slots, 'extra');
const extraContent = getCustomRender(props, slots, 'extraContent');
const content = slots.default ? (
<div>
<div class={`${prefixedClassName}-children-content`}>{slots.default()}</div>
......@@ -198,11 +213,20 @@ const PageContainer: FunctionalComponent<PageContainerProps> = (props, { slots }
const headerDom = (
<div class={`${prefixedClassName}-warp`}>
{defaultPageHeaderRender(props, {
{defaultPageHeaderRender(
{
...props,
tags,
content: headerContent,
extra,
extraContent,
},
{
...value,
prefixCls: undefined,
prefixedClassName,
})}
},
)}
</div>
);
......
src/SiderMenu/BaseMenu.tsx
View file @ e868e745
......@@ -124,7 +124,11 @@ class MenuUtil {
};
getSubMenuOrItem = (item: MenuDataItem, isChildren: boolean) => {
if (Array.isArray(item.children) && item.children.length > 0 && !item?.meta?.hideInMenu) {
if (
Array.isArray(item.children) &&
item.children.length > 0 &&
!item?.meta?.hideChildrenInMenu
) {
const { prefixCls, i18n } = this.props;
const menuTitle = (i18n && i18n(item.meta?.title)) || item.meta?.title;
const defaultTitle = item.meta?.icon ? (
......
src/utils/index.ts
View file @ e868e745
......@@ -24,7 +24,7 @@ export function getCustomRender(
if (propRender) {
return propRender;
}
const slotVNode = slots[name || 'default'];
const slotVNode = slots[name];
return slotVNode || null;
}
......
tests/page-container.test.tsx
View file @ e868e745
......@@ -63,6 +63,25 @@ describe('PageContainer', () => {
expect(wrapper.find('.ant-page-header-heading-sub-title').text()).toBe('SubTitle');
});
it('😄 render content,extraContent', async () => {
const wrapper = mount({
render() {
return (
<PageContainer
content={<div class="my-test-content">MyTestContent</div>}
extraContent={<span>extra right content</span>}
/>
);
},
});
// test render content, extraContent
expect(wrapper.findAll('.ant-pro-page-container-content .my-test-content')).toHaveLength(1);
expect(wrapper.findAll('.ant-pro-page-container-extraContent span')[0].text()).toBe(
'extra right content',
);
});
it('😄 render footer', () => {
const wrapper = mount({
render() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment