github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update pageheader (#2365) 

* feat: update pageheader

* fix: error

* fix: index

Co-authored-by: tangjinzhou <415800467@qq.com>
pull/2389/head
xrkffgg 2020-06-08 22:00:59 +08:00 committed by GitHub
parent f099d5de8e
commit 1ca13ac166
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/page-header/index.jsx
View File

@ -1,12 +1,12 @@
import { inject } from 'vue';
import PropTypes from '../_util/vue-types';
import { getComponentFromProp, getOptionProps } from '../_util/props-util';
import { getComponent, 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,
@ -52,17 +52,17 @@ const renderBreadcrumb = (h, 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 title = getComponent(instance, 'title');
const subTitle = getComponent(instance, 'subTitle');
const tags = getComponent(instance, 'tags');
const extra = getComponent(instance, 'extra');
const backIcon =
getComponentFromProp(instance, 'backIcon') !== undefined ? (
getComponentFromProp(instance, 'backIcon')
getComponent(instance, 'backIcon') !== undefined ? (
getComponent(instance, 'backIcon')
) : (
<ArrowLeftOutlined />
);
const onBack = instance.$listeners.back;
const onBack = instance.$attrs.onBack;
const headingPrefixCls = `${prefixCls}-heading`;
if (title || subTitle || tags || extra) {
const backIconDom = renderBack(instance, prefixCls, backIcon, onBack);
@ -94,15 +94,17 @@ const renderChildren = (h, prefixCls, children) => {
const PageHeader = {
name: 'APageHeader',
props: PageHeaderProps,
inject: {
configProvider: { default: () => ConfigConsumerProps },
setup() {
return {
configProvider: inject('configProvider', 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;
const footer = getComponent(this, 'footer');
const children = this.$slots.default && this.$slots.default();
let ghost = true;
@ -138,9 +140,8 @@ const PageHeader = {
};
/* istanbul ignore next */
PageHeader.install = function(Vue) {
Vue.use(Base);
Vue.component(PageHeader.name, PageHeader);
PageHeader.install = function(app) {
app.component(PageHeader.name, PageHeader);
};
export default PageHeader;

2
examples/index.js
View File

@ -12,6 +12,7 @@ import Anchor from 'ant-design-vue/anchor';
import ConfigProvider from 'ant-design-vue/config-provider';
import Result from 'ant-design-vue/result';
import Spin from 'ant-design-vue/spin';
import PageHeader from 'ant-design-vue/page-header';
import Skeleton from 'ant-design-vue/skeleton';
import Empty from 'ant-design-vue/empty';
import Timeline from 'ant-design-vue/timeline';
@ -27,6 +28,7 @@ createApp(App)
.use(Alert)
.use(Divider)
.use(Result)
.use(PageHeader)
.use(Anchor)
.use(Skeleton)
.use(Spin)