fix: page-container slots not reacitve

xi-qi · Aug 13, 2021 · cde3eb5 · cde3eb5
1 parent cb390cf
commit cde3eb5
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 76 deletions.
diff --git a/examples/main.ts b/examples/main.ts
@@ -6,7 +6,7 @@ import router from './router';
 import icons from './icons';
 import App from './App.vue';
 
-import '../dist/style.less';
+// import '../dist/style.less';
 import ProLayout, { PageContainer } from '../src'; // '../dist/pro-layout.es';
 
 const app = createApp(App);

diff --git a/examples/views/page1.vue b/examples/views/page1.vue
@@ -1,25 +1,35 @@
 <template>
-  <PageContainer title="Page 1" sub-title="is a sub-title.">
+  <page-container title="Page 1" sub-title="is a sub-title.">
+    <template #content>
+      <div>
+        container.content
+        <h1>{{ text }}</h1>
+      </div>
+    </template>
     <span>page-content</span>
     <a-button @click="handleClick">Button</a-button>
-  </PageContainer>
+  </page-container>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { Button, message } from 'ant-design-vue';
 
 export default defineComponent({
-  components:{
+  components: {
     [Button.name]: Button,
   },
   setup() {
-    const handleClick= () => {
-      message.info('clicked')
-    }
+    const text = ref<string>('1');
+    const handleClick = () => {
+      message.info('clicked');
+      text.value = `${Math.random()}`;
+    };
     return {
       handleClick,
-    }
+
+      text,
+    };
   },
-})
+});
 </script>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.1.0-alpha.6",
+  "version": "3.1.0-alpha.7",
   "license": "MIT",
   "files": [
     "dist",

diff --git a/src/BasicLayout.tsx b/src/BasicLayout.tsx
@@ -80,8 +80,8 @@ export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>
 
 const ProLayout = defineComponent({
   name: 'ProLayout',
+  inheritAttrs: false,
   props: basicLayoutProps,
-  // inheritAttrs: false,
   emits: [
     'update:collapsed',
     'update:open-keys',

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -40,8 +40,8 @@ export const headerViewProps = {
 export type HeaderViewProps = Partial<ExtractPropTypes<typeof headerViewProps> & GlobalHeaderProps>;
 
 export const HeaderView = defineComponent({
-  inheritAttrs: false,
   name: 'HeaderView',
+  inheritAttrs: false,
   props: headerViewProps,
   setup(props) {
     const {

diff --git a/src/PageContainer/index.tsx b/src/PageContainer/index.tsx
@@ -9,26 +9,26 @@ import {
   ExtractPropTypes,
 } from 'vue';
 /* replace antd ts define */
+import { withInstall } from 'ant-design-vue/es/_util/type';
+import PageHeader, { pageHeaderProps } from 'ant-design-vue/es/page-header';
+import Tabs from 'ant-design-vue/es/tabs';
+import Affix from 'ant-design-vue/es/affix';
+import Spin from 'ant-design-vue/es/spin';
+import omit from 'omit.js';
 import { TabPaneProps } from './interfaces/TabPane';
 import { TabBarExtraContent, TabsProps } from './interfaces/Tabs';
 import { AffixProps } from './interfaces/Affix';
 /* replace antd ts define end */
 import { RouteContextProps, useRouteContext } from '../RouteContext';
-import { getPropsSlot } from '../utils';
-import { withInstall } from 'ant-design-vue/es/_util/type';
+import { getPropsSlot, PropTypes } from '../utils';
 import 'ant-design-vue/es/affix/style';
-import Affix from 'ant-design-vue/es/affix';
 import 'ant-design-vue/es/page-header/style';
-import PageHeader, { pageHeaderProps } from 'ant-design-vue/es/page-header';
 import 'ant-design-vue/es/tabs/style';
-import Tabs from 'ant-design-vue/es/tabs';
 import 'ant-design-vue/es/spin/style';
-import Spin from 'ant-design-vue/es/spin';
 import GridContent from '../GridContent';
 import FooterToolbar from '../FooterToolbar';
-import { PropTypes } from '../utils';
+
 import { CustomRender, WithFalse } from '../typings';
-import omit from 'omit.js';
 import './index.less';
 
 export interface Tab {
@@ -135,8 +135,14 @@ const renderFooter = (
     'title'
   >,
 ): VNodeChild | JSX.Element => {
-  const { tabList, tabActiveKey, onTabChange, tabBarExtraContent, tabProps, prefixedClassName } =
-    props;
+  const {
+    tabList,
+    tabActiveKey,
+    onTabChange,
+    tabBarExtraContent,
+    tabProps,
+    prefixedClassName,
+  } = props;
   if (tabList && tabList.length) {
     return (
       <Tabs
@@ -233,6 +239,7 @@ const defaultPageHeaderRender = (
 
 const PageContainer = defineComponent({
   name: 'PageContainer',
+  inheritAttrs: false,
   props: pageContainerProps,
   setup(props, { slots }) {
     const { loading, affixProps, ghost } = toRefs(props);
@@ -247,60 +254,65 @@ const PageContainer = defineComponent({
       };
     });
 
-    const tags = getPropsSlot(slots, props, 'tags');
-    const headerContent = getPropsSlot(slots, props, 'content');
-    const extra = getPropsSlot(slots, props, 'extra');
-    const extraContent = getPropsSlot(slots, props, 'extraContent');
-    const footer = getPropsSlot(slots, props, 'footer');
+    const headerDom = computed(() => {
+      const tags = getPropsSlot(slots, props, 'tags');
+      const headerContent = getPropsSlot(slots, props, 'content');
+      const extra = getPropsSlot(slots, props, 'extra');
+      const extraContent = getPropsSlot(slots, props, 'extraContent');
 
-    const headerDom = computed(() => (
-      <div class={`${prefixedClassName.value}-warp`}>
-        {defaultPageHeaderRender(
-          {
-            ...props,
-            tags,
-            content: headerContent,
-            extra,
-            extraContent,
-          },
-          {
-            ...value,
-            prefixCls: undefined,
-            prefixedClassName: prefixedClassName.value,
-          },
-        )}
-      </div>
-    ));
+      return (
+        <div class={`${prefixedClassName.value}-warp`}>
+          {defaultPageHeaderRender(
+            {
+              ...props,
+              tags,
+              content: headerContent,
+              extra,
+              extraContent,
+            },
+            {
+              ...value,
+              prefixCls: undefined,
+              prefixedClassName: prefixedClassName.value,
+            },
+          )}
+        </div>
+      );
+    });
 
-    return () => (
-      <div class={classNames.value}>
-        {value.fixedHeader ? (
-          <Affix offsetTop={value.fixedHeader ? value.headerHeight : 0} {...affixProps.value}>
-            {headerDom.value}
-          </Affix>
-        ) : (
-          headerDom.value
-        )}
-        <GridContent>
-          {loading.value ? (
-            <Spin />
-          ) : slots.default ? (
-            <div>
-              <div class={`${prefixedClassName.value}-children-content`}>{slots.default()}</div>
-              {value.hasFooterToolbar && (
-                <div
-                  style={{
-                    height: 48,
-                    marginTop: 24,
-                  }}
-                />
-              )}
-            </div>
-          ) : null}
-        </GridContent>
-        {value.hasFooterToolbar && <FooterToolbar>{footer}</FooterToolbar>}
-      </div>
-    );
+    return () => {
+      const footer = getPropsSlot(slots, props, 'footer');
+
+      return (
+        <div class={classNames.value}>
+          {value.fixedHeader ? (
+            <Affix offsetTop={value.fixedHeader ? value.headerHeight : 0} {...affixProps.value}>
+              {headerDom.value}
+            </Affix>
+          ) : (
+            headerDom.value
+          )}
+          <GridContent>
+            {loading.value ? (
+              <Spin />
+            ) : slots.default ? (
+              <div>
+                <div class={`${prefixedClassName.value}-children-content`}>{slots.default()}</div>
+                {value.hasFooterToolbar && (
+                  <div
+                    style={{
+                      height: 48,
+                      marginTop: 24,
+                    }}
+                  />
+                )}
+              </div>
+            ) : null}
+          </GridContent>
+          {value.hasFooterToolbar && <FooterToolbar>{footer}</FooterToolbar>}
+        </div>
+      );
+    };
   },
 });
 // <WaterMark content="Pro Layout"></WaterMark>

diff --git a/src/WrapContent.tsx b/src/WrapContent.tsx
@@ -8,7 +8,7 @@ const { Content } = Layout;
 
 export interface WrapContentProps {
   style?: CSSProperties;
-  class?: string | string[] | object;
+  class?: string | string[] | any;
   isChildrenLayout?: boolean;
   location?: string | string[] | any;
   contentHeight?: number;