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 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 { ConfigConsumerProps } from '../config-provider';
import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined'; import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
import Breadcrumb from '../breadcrumb'; import Breadcrumb from '../breadcrumb';
import Avatar from '../avatar'; import Avatar from '../avatar';
import TransButton from '../_util/transButton'; import TransButton from '../_util/transButton';
import LocaleReceiver from '../locale-provider/LocaleReceiver'; import LocaleReceiver from '../locale-provider/LocaleReceiver';
import Base from '../base';
export const PageHeaderProps = { export const PageHeaderProps = {
backIcon: PropTypes.any, backIcon: PropTypes.any,
@ -52,17 +52,17 @@ const renderBreadcrumb = (h, breadcrumb) => {
const renderTitle = (h, prefixCls, instance) => { const renderTitle = (h, prefixCls, instance) => {
const { avatar } = instance; const { avatar } = instance;
const title = getComponentFromProp(instance, 'title'); const title = getComponent(instance, 'title');
const subTitle = getComponentFromProp(instance, 'subTitle'); const subTitle = getComponent(instance, 'subTitle');
const tags = getComponentFromProp(instance, 'tags'); const tags = getComponent(instance, 'tags');
const extra = getComponentFromProp(instance, 'extra'); const extra = getComponent(instance, 'extra');
const backIcon = const backIcon =
getComponentFromProp(instance, 'backIcon') !== undefined ? ( getComponent(instance, 'backIcon') !== undefined ? (
getComponentFromProp(instance, 'backIcon') getComponent(instance, 'backIcon')
) : ( ) : (
<ArrowLeftOutlined /> <ArrowLeftOutlined />
); );
const onBack = instance.$listeners.back; const onBack = instance.$attrs.onBack;
const headingPrefixCls = `${prefixCls}-heading`; const headingPrefixCls = `${prefixCls}-heading`;
if (title || subTitle || tags || extra) { if (title || subTitle || tags || extra) {
const backIconDom = renderBack(instance, prefixCls, backIcon, onBack); const backIconDom = renderBack(instance, prefixCls, backIcon, onBack);
@ -94,15 +94,17 @@ const renderChildren = (h, prefixCls, children) => {
const PageHeader = { const PageHeader = {
name: 'APageHeader', name: 'APageHeader',
props: PageHeaderProps, props: PageHeaderProps,
inject: { setup() {
configProvider: { default: () => ConfigConsumerProps }, return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
}, },
render(h) { render(h) {
const { getPrefixCls, pageHeader } = this.configProvider; const { getPrefixCls, pageHeader } = this.configProvider;
const props = getOptionProps(this); const props = getOptionProps(this);
const { prefixCls: customizePrefixCls, breadcrumb } = props; const { prefixCls: customizePrefixCls, breadcrumb } = props;
const footer = getComponentFromProp(this, 'footer'); const footer = getComponent(this, 'footer');
const children = this.$slots.default; const children = this.$slots.default && this.$slots.default();
let ghost = true; let ghost = true;
@ -138,9 +140,8 @@ const PageHeader = {
}; };
/* istanbul ignore next */ /* istanbul ignore next */
PageHeader.install = function(Vue) { PageHeader.install = function(app) {
Vue.use(Base); app.component(PageHeader.name, PageHeader);
Vue.component(PageHeader.name, PageHeader);
}; };
export default 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 ConfigProvider from 'ant-design-vue/config-provider';
import Result from 'ant-design-vue/result'; import Result from 'ant-design-vue/result';
import Spin from 'ant-design-vue/spin'; import Spin from 'ant-design-vue/spin';
import PageHeader from 'ant-design-vue/page-header';
import Skeleton from 'ant-design-vue/skeleton'; import Skeleton from 'ant-design-vue/skeleton';
import Empty from 'ant-design-vue/empty'; import Empty from 'ant-design-vue/empty';
import Timeline from 'ant-design-vue/timeline'; import Timeline from 'ant-design-vue/timeline';
@ -27,6 +28,7 @@ createApp(App)
.use(Alert) .use(Alert)
.use(Divider) .use(Divider)
.use(Result) .use(Result)
.use(PageHeader)
.use(Anchor) .use(Anchor)
.use(Skeleton) .use(Skeleton)
.use(Spin) .use(Spin)