fix(pro-layout): footerRender属性插槽补充动态宽度属性

vueComponent · Oct 21, 2023 · 33c3d9a · 33c3d9a
1 parent f3bfede
commit 33c3d9a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 13 deletions.
diff --git a/packages/pro-layout/README.md b/packages/pro-layout/README.md
@@ -120,7 +120,7 @@ const layoutConf = reactive({
 | headerRender            | custom header render method                                           | `slot` \| (props: BasicLayoutProps) => VNode                           | -                  |
 | headerContentRender     | header content render method only layout side                         | `slot` \| (props: BasicLayoutProps) => VNode                           | -                  |
 | rightContentRender      | header right content render method                                    | `slot` \| (props: BasicLayoutProps) => VNode                           | -                  |
-| footerRender            | custom footer render method                                           | `slot` \| (props: BasicLayoutProps) => VNode                           | `false`            |
+| footerRender            | custom footer render method                                           | `slot` \| ({ width, ...BasicLayoutProps }) => VNode                           | `false`            |
 | tabRender               | custom tab render method                                              | `slot` \| ({ width, ...BasicLayoutProps }) => VNode                    | `false`            |
 | breadcrumbRender        | custom breadcrumb render method                                       | `slot` \| ({ route, params, routes, paths, h }) => VNode[]             | -                  |
 | locale                  | i18n                                                                  | Function (key: string) => string \| `false`                            | `false`            |
@@ -270,17 +270,29 @@ const layoutConf = reactive({
 #### Custom footer with slot
 
 ```vue
-<GlobalFooter>
-  <template #links>
-    <a>链接1</a>
-    <a>链接2</a>
-    <a>链接3</a>
-    <a>链接4</a>
-  </template>
-  <template #copyright>
-    <span>Pro Layout &copy; 2021 Sendya.</span>
-  </template>
-</GlobalFooter>
+<template #footerRender="{ width, headerTheme }">
+  <div>
+    <footer class="ant-layout-footer" style="height: 36px; line-height: 36px; background: transparent"></footer>
+    <div
+      :style="{
+        margin: '0',
+        height: '36px',
+        lineHeight: '36px',
+        right: '0px',
+        bottom: '0px',
+        position: headerTheme == 'dark' ? 'fixed' : 'unset',
+        zIndex: 14,
+        padding: '4px 16px',
+        width: width,
+        background: '#fff',
+        boxShadow: '0 1px 4px #0015291f',
+        transition: 'background 0.3s, width 0.2s'
+      }"
+    >
+      footerRender headerTheme：{{ headerTheme }} width：{{ width }}
+    </div>
+  </div>
+</template>
 ```
 
 #### Custom footer with props

diff --git a/packages/pro-layout/src/BasicLayout.tsx b/packages/pro-layout/src/BasicLayout.tsx
@@ -313,6 +313,21 @@ const ProLayout = defineComponent({
         }
         return tabRender({ width, ...props });
       });
+
+      const footerDom = computed(() => {
+        if (props.footerRender === false || !footerRender) {
+          return null;
+        }
+        let layout = props.layout;
+        // 计算侧边栏的宽度，不然导致左边的样式会出问题
+        let width = '100%';
+        if (layout === 'mix' && hasSplitMenu.value && flatMenuData.value.length === 0) {
+          width = '100%';
+        } else if(!isTop.value && !isMobile.value){
+          width = `calc(100% - ${siderWidth.value}px)`;
+        }
+        return footerRender({ width, ...props });
+      });
 
       routeContext.hasHeader = !!headerDom.value;
 
@@ -363,7 +378,7 @@ const ProLayout = defineComponent({
                   >
                     {props.loading ? <PageLoading /> : slots.default?.()}
                   </WrapContent>
-                  {footerRender && footerRender(props)}
+                  {footerDom.value}
                 </div>
               </Layout>
             </div>