mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-16 01:41:15 +08:00
518cc852af
# Conflicts: # antdv-demo # components/alert/__tests__/__snapshots__/demo.test.js.snap # components/auto-complete/__tests__/__snapshots__/demo.test.js.snap # components/avatar/__tests__/__snapshots__/demo.test.js.snap # components/badge/__tests__/__snapshots__/demo.test.js.snap # components/calendar/__tests__/__snapshots__/demo.test.js.snap # components/calendar/__tests__/__snapshots__/index.test.js.snap # components/card/__tests__/__snapshots__/demo.test.js.snap # components/cascader/__tests__/__snapshots__/demo.test.js.snap # components/cascader/__tests__/__snapshots__/index.test.js.snap # components/collapse/__tests__/__snapshots__/demo.test.js.snap # components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap # components/date-picker/__tests__/__snapshots__/demo.test.js.snap # components/date-picker/__tests__/__snapshots__/other.test.js.snap # components/dropdown/__tests__/__snapshots__/demo.test.js.snap # components/empty/__tests__/__snapshots__/demo.test.js.snap # components/form-model/__tests__/__snapshots__/demo.test.js.snap # components/form/__tests__/__snapshots__/demo.test.js.snap # components/icon/__tests__/__snapshots__/index.test.js.snap # components/icon/index.js # components/input-number/__tests__/__snapshots__/demo.test.js.snap # components/input/__tests__/__snapshots__/demo.test.js.snap # components/input/__tests__/__snapshots__/index.test.js.snap # components/locale-provider/__tests__/__snapshots__/demo.test.js.snap # components/locale-provider/__tests__/__snapshots__/index.test.js.snap # components/modal/__tests__/__snapshots__/Modal.test.js.snap # components/page-header/__tests__/__snapshots__/demo.test.js.snap # components/page-header/index.jsx # components/pagination/__tests__/__snapshots__/demo.test.js.snap # components/rate/__tests__/__snapshots__/demo.test.js.snap # components/select/__tests__/__snapshots__/demo.test.js.snap # components/select/__tests__/__snapshots__/index.test.js.snap # components/slider/__tests__/__snapshots__/demo.test.js.snap # components/spin/__tests__/__snapshots__/demo.test.js.snap # components/steps/__tests__/__snapshots__/demo.test.js.snap # components/switch/__tests__/__snapshots__/demo.test.js.snap # components/table/__tests__/__snapshots__/Table.filter.test.js.snap # components/table/__tests__/__snapshots__/Table.sorter.test.js.snap # components/table/__tests__/__snapshots__/demo.test.js.snap # components/tabs/__tests__/__snapshots__/demo.test.js.snap # components/tabs/__tests__/__snapshots__/index.test.js.snap # components/time-picker/__tests__/__snapshots__/demo.test.js.snap # components/time-picker/__tests__/__snapshots__/index.test.js.snap # components/timeline/__tests__/__snapshots__/demo.test.js.snap # components/tree-select/__tests__/__snapshots__/demo.test.js.snap # components/tree/__tests__/__snapshots__/demo.test.js.snap # components/upload/__tests__/__snapshots__/demo.test.js.snap # components/upload/__tests__/__snapshots__/uploadlist.test.js.snap # types/message.d.ts
147 lines
4.3 KiB
Vue
147 lines
4.3 KiB
Vue
import PropTypes from '../_util/vue-types';
|
|
import { getComponentFromProp, getOptionProps } from '../_util/props-util';
|
|
import { ConfigConsumerProps } from '../config-provider';
|
|
import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
|
|
import Breadcrumb from '../breadcrumb';
|
|
import Avatar from '../avatar';
|
|
import TransButton from '../_util/transButton';
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
|
import Base from '../base';
|
|
|
|
export const PageHeaderProps = {
|
|
backIcon: PropTypes.any,
|
|
prefixCls: PropTypes.string,
|
|
title: PropTypes.any,
|
|
subTitle: PropTypes.any,
|
|
breadcrumb: PropTypes.object,
|
|
tags: PropTypes.any,
|
|
footer: PropTypes.any,
|
|
extra: PropTypes.any,
|
|
avatar: PropTypes.object,
|
|
ghost: PropTypes.bool,
|
|
};
|
|
|
|
const renderBack = (instance, prefixCls, backIcon, onBack) => {
|
|
// eslint-disable-next-line no-unused-vars
|
|
const h = instance.$createElement;
|
|
if (!backIcon || !onBack) {
|
|
return null;
|
|
}
|
|
return (
|
|
<LocaleReceiver componentName="PageHeader">
|
|
{({ back }) => (
|
|
<div class={`${prefixCls}-back`}>
|
|
<TransButton
|
|
onClick={e => {
|
|
instance.$emit('back', e);
|
|
}}
|
|
class={`${prefixCls}-back-button`}
|
|
aria-label={back}
|
|
>
|
|
{backIcon}
|
|
</TransButton>
|
|
</div>
|
|
)}
|
|
</LocaleReceiver>
|
|
);
|
|
};
|
|
|
|
const renderBreadcrumb = (h, breadcrumb) => {
|
|
return <Breadcrumb {...breadcrumb} />;
|
|
};
|
|
|
|
const renderTitle = (h, prefixCls, instance) => {
|
|
const { avatar } = instance;
|
|
const title = getComponentFromProp(instance, 'title');
|
|
const subTitle = getComponentFromProp(instance, 'subTitle');
|
|
const tags = getComponentFromProp(instance, 'tags');
|
|
const extra = getComponentFromProp(instance, 'extra');
|
|
const backIcon =
|
|
getComponentFromProp(instance, 'backIcon') !== undefined ? (
|
|
getComponentFromProp(instance, 'backIcon')
|
|
) : (
|
|
<ArrowLeftOutlined />
|
|
);
|
|
const onBack = instance.$listeners.back;
|
|
const headingPrefixCls = `${prefixCls}-heading`;
|
|
if (title || subTitle || tags || extra) {
|
|
const backIconDom = renderBack(instance, prefixCls, backIcon, onBack);
|
|
return (
|
|
<div class={headingPrefixCls}>
|
|
{backIconDom}
|
|
{avatar && <Avatar {...avatar} />}
|
|
{title && <span class={`${headingPrefixCls}-title`}>{title}</span>}
|
|
{subTitle && <span class={`${headingPrefixCls}-sub-title`}>{subTitle}</span>}
|
|
{tags && <span class={`${headingPrefixCls}-tags`}>{tags}</span>}
|
|
{extra && <span class={`${headingPrefixCls}-extra`}>{extra}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const renderFooter = (h, prefixCls, footer) => {
|
|
if (footer) {
|
|
return <div class={`${prefixCls}-footer`}>{footer}</div>;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const renderChildren = (h, prefixCls, children) => {
|
|
return <div class={`${prefixCls}-content`}>{children}</div>;
|
|
};
|
|
|
|
const PageHeader = {
|
|
name: 'APageHeader',
|
|
props: PageHeaderProps,
|
|
inject: {
|
|
configProvider: { default: () => ConfigConsumerProps },
|
|
},
|
|
render(h) {
|
|
const { getPrefixCls, pageHeader } = this.configProvider;
|
|
const props = getOptionProps(this);
|
|
const { prefixCls: customizePrefixCls, breadcrumb } = props;
|
|
const footer = getComponentFromProp(this, 'footer');
|
|
const children = this.$slots.default;
|
|
|
|
let ghost = true;
|
|
|
|
// Use `ghost` from `props` or from `ConfigProvider` instead.
|
|
if ('ghost' in props) {
|
|
ghost = props.ghost;
|
|
} else if (pageHeader && 'ghost' in pageHeader) {
|
|
ghost = pageHeader.ghost;
|
|
}
|
|
const prefixCls = getPrefixCls('page-header', customizePrefixCls);
|
|
const breadcrumbDom =
|
|
breadcrumb && breadcrumb.props && breadcrumb.props.routes
|
|
? renderBreadcrumb(h, breadcrumb)
|
|
: null;
|
|
const className = [
|
|
prefixCls,
|
|
{
|
|
'has-breadcrumb': breadcrumbDom,
|
|
'has-footer': footer,
|
|
[`${prefixCls}-ghost`]: ghost,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div class={className}>
|
|
{breadcrumbDom}
|
|
{renderTitle(h, prefixCls, this)}
|
|
{children && renderChildren(h, prefixCls, children)}
|
|
{renderFooter(h, prefixCls, footer)}
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
/* istanbul ignore next */
|
|
PageHeader.install = function(Vue) {
|
|
Vue.use(Base);
|
|
Vue.component(PageHeader.name, PageHeader);
|
|
};
|
|
|
|
export default PageHeader;
|