fix: page-header onBack not work

antdv-demo

@@ -1 +1 @@
-Subproject commit a66b25f72f00c17b976c30b6cb92db4d8c8bf993
+Subproject commit 14ab398a9ab7db3507776aa9905afe5b4811be21

components/_util/transButton.jsx

@@ -54,7 +54,7 @@ const TransButton = {
   },
 
   render() {
-    const { noStyle } = this.$props;
+    const { noStyle, onClick } = this.$props;
 
     return (
       <div
@@ -62,6 +62,7 @@ const TransButton = {
         tabindex={0}
         ref="div"
         {...this.$attrs}
+        onClick={onClick}
         onKeydown={this.onKeyDown}
         onKeyup={this.onKeyUp}
         style={{ ...(!noStyle ? inlineStyle : null) }}

components/page-header/__tests__/__snapshots__/index.test.js.snap

@@ -3,21 +3,34 @@
 exports[`PageHeader pageHeader should not render blank dom 1`] = `
 <div
   class="ant-page-header ant-page-header-ghost"
-/>
+>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+</div>
 `;
 
 exports[`PageHeader pageHeader should support class 1`] = `
 <div
   class="ant-page-header ant-page-header-ghost not-works"
 >
+  <!---->
   <div
     class="ant-page-header-heading"
   >
+    <!---->
+    <!---->
     <span
       class="ant-page-header-heading-title"
     >
       Page Title
     </span>
+    <!---->
+    <!---->
+    <!---->
   </div>
+  <!---->
+  <!---->
 </div>
 `;

components/page-header/__tests__/index.test.js

@@ -1,8 +1,5 @@
-import { createLocalVue, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import PageHeader from '..';
-import ref from 'vue-ref';
-const localVue = createLocalVue();
-localVue.use(ref, { name: 'ant-ref' });
 
 describe('PageHeader', () => {
   it('pageHeader should not contain back it back', () => {
@@ -22,7 +19,7 @@ describe('PageHeader', () => {
     ];
     const wrapper = mount({
       render() {
-        return <PageHeader title="Page Title" breadcrumb={{ props: { routes } }} />;
+        return <PageHeader title="Page Title" breadcrumb={{ routes }} />;
       },
     });
     expect(wrapper.findAll('.ant-page-header-back')).toHaveLength(0);
@@ -37,7 +34,7 @@ describe('PageHeader', () => {
     ];
     const wrapper = mount({
       render() {
-        return <PageHeader title="Page Title" breadcrumb={{ props: { routes } }} />;
+        return <PageHeader title="Page Title" breadcrumb={{ routes }} />;
       },
     });
     expect(wrapper.findAll('.ant-breadcrumb')).toHaveLength(1);
@@ -61,7 +58,7 @@ describe('PageHeader', () => {
           return <PageHeader title="Page Title" onBack={callback} />;
         },
       },
-      { localVue },
+      { sync: false },
     );
     expect(wrapper.findAll('.ant-page-header-back')).toHaveLength(1);
   });
@@ -74,7 +71,7 @@ describe('PageHeader', () => {
           return <PageHeader title="Page Title" onBack={callback} />;
         },
       },
-      { localVue },
+      { sync: false },
     );
     wrapper.find('div.ant-page-header-back-button').trigger('click');
     expect(callback).toHaveBeenCalled();
@@ -115,19 +112,16 @@ describe('PageHeader', () => {
     ];
     const wrapper = mount({
       render() {
-        return <PageHeader title="Title" breadcrumb={{ props: { routes } }} />;
+        return <PageHeader title="Title" breadcrumb={{ routes }} />;
       },
     });
     expect(wrapper.findAll('.ant-breadcrumb')).toHaveLength(1);
 
-    const wrapperBack = mount(
-      {
-        render() {
-          return <PageHeader title="Title" breadcrumb={{ props: { routes } }} onBack={() => {}} />;
-        },
+    const wrapperBack = mount({
+      render() {
+        return <PageHeader title="Title" breadcrumb={{ routes }} onBack={() => {}} />;
       },
-      { localVue },
-    );
+    });
     expect(wrapperBack.findAll('.ant-breadcrumb')).toHaveLength(1);
   });
 });

components/page-header/index.jsx

@@ -1,6 +1,6 @@
 import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getComponent, getOptionProps } from '../_util/props-util';
+import { getComponent, getOptionProps, getSlot } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
 import Breadcrumb from '../breadcrumb';
@@ -19,6 +19,7 @@ export const PageHeaderProps = {
   extra: PropTypes.any,
   avatar: PropTypes.object,
   ghost: PropTypes.bool,
+  onBack: PropTypes.func,
 };
 
 const renderBack = (instance, prefixCls, backIcon, onBack) => {
@@ -61,7 +62,7 @@ const renderTitle = (prefixCls, instance) => {
     ) : (
       <ArrowLeftOutlined />
     );
-  const onBack = instance.$attrs.onBack;
+  const onBack = instance.onBack;
   const headingPrefixCls = `${prefixCls}-heading`;
   if (title || subTitle || tags || extra) {
     const backIconDom = renderBack(instance, prefixCls, backIcon, onBack);
@@ -103,7 +104,7 @@ const PageHeader = {
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, breadcrumb } = props;
     const footer = getComponent(this, 'footer');
-    const children = this.$slots.default && this.$slots.default();
+    const children = getSlot(this);
     let ghost = true;
 
     // Use `ghost` from `props` or from `ConfigProvider` instead.
@@ -113,10 +114,7 @@ const PageHeader = {
       ghost = pageHeader.ghost;
     }
     const prefixCls = getPrefixCls('page-header', customizePrefixCls);
-    const breadcrumbDom =
-      breadcrumb && breadcrumb.props && breadcrumb.props.routes
-        ? renderBreadcrumb(breadcrumb)
-        : null;
+    const breadcrumbDom = breadcrumb && breadcrumb.routes ? renderBreadcrumb(breadcrumb) : null;
     const className = [
       prefixCls,
       {
@@ -130,7 +128,7 @@ const PageHeader = {
       <div class={className}>
         {breadcrumbDom}
         {renderTitle(prefixCls, this)}
-        {children && children.length && renderChildren(prefixCls, children)}
+        {children.length ? renderChildren(prefixCls, children) : null}
         {renderFooter(prefixCls, footer)}
       </div>
     );

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/notification/demo/index';
+import demo from '../antdv-demo/docs/page-header/demo/index';
 
 export default {
   components: {