fix: menuHeaderRender

README.md

@@ -33,10 +33,12 @@ export default {
 | --- | --- | --- | --- |
 | title | layout in the upper left corner title | VNode \| String | `'Ant Design Pro'` |
 | logo | layout top left logo url | VNode \| render | - |
+| loading`*` | layout loading status | boolean | - |
+| menuHeaderRender | render logo and title | VNode \| (logo,title)=>VNode | - |
 | layout | layout menu mode, sidemenu: right navigation, topmenu: top navigation | 'sidemenu' \| 'topmenu' | `'sidemenu'` |
 | contentWidth | content mode of layout, Fluid: fixed width 1200px, Fixed: adaptive | true \| false | `false` |
 | theme | Navigation menu theme | 'light' \| 'dark' | `'dark'` |
-| menus | vue-router `routes` prop | Object | `[{}]` |
+| menus | Vue-router `routes` prop | Object | `[{}]` |
 | collapsed | control menu's collapse and expansion | boolean | true |
 | handleCollapse | folding collapse event of menu | (collapsed: boolean) => void | - |
 | headerRender | custom header render method | (props: BasicLayoutProps) => VNode | - |

examples/src/layouts/BasicLayout.jsx

@@ -6,7 +6,7 @@ import { i18nRender } from '../locales'
 import ProLayout from '@ant-design-vue/pro-layout'
 import SelectLang from '../components/SelectLang'
 import LogoSvg from '../assets/logo.svg?inline'
-import defaultSettings from '@config/defaultSettings'
+// import defaultSettings from '@config/defaultSettings'
 
 const Account = {
   name: 'Account',
@@ -36,6 +36,16 @@ const Account = {
   }
 }
 
+// render logo and title
+const menuHeaderRender = (h, logo, title) => {
+  return (
+    <div>
+      <LogoSvg />
+      <h1>Ant Design Pro</h1>
+    </div>
+  )
+}
+
 const rightContentRender = (h, props) => {
   const cls = {
     'ant-pro-global-header-index-right': true,
@@ -68,11 +78,11 @@ export default {
       // 媒体查询
       query: {},
       // 布局类型
-      layout: 'topmenu', // 'sidemenu', 'topmenu'
+      layout: 'sidemenu', // 'sidemenu', 'topmenu'
       // 定宽: true / 流式: false
       contentWidth: true,
       // 主题 'dark' | 'light'
-      theme: 'light',
+      theme: 'dark',
       // 是否手机模式
       isMobile: false
     }
@@ -114,11 +124,14 @@ export default {
         contentWidth,
         theme,
         isMobile: this.isMobile,
+        // custom render
         rightContentRender,
         footerRender,
         i18nRender,
-        logo: LogoSvg,
-        title: defaultSettings.title
+        menuHeaderRender
+
+        // logo: LogoSvg,
+        // title: defaultSettings.title
       }
     }
 

src/BasicLayout.jsx

@@ -92,10 +92,12 @@ const BasicLayout = {
     const footerRender = getComponentFormProp(content, 'footerRender')
     const rightContentRender = getComponentFormProp(content, 'rightContentRender')
     const collapsedButtonRender = getComponentFormProp(content, 'collapsedButtonRender')
+    const menuHeaderRender = getComponentFormProp(content, 'menuHeaderRender')
 
     const cdProps = {
       ...props,
       footerRender,
+      menuHeaderRender,
       rightContentRender,
       collapsedButtonRender
     }

src/components/SiderMenu/SiderMenu.jsx

@@ -60,6 +60,10 @@ export const SiderMenuProps = {
   title: {
     type: String,
     default: ''
+  },
+  menuHeaderRender: {
+    type: Function,
+    default: null
   }
 }
 
@@ -73,7 +77,13 @@ export const defaultRenderLogo = (h, logo) => {
   return h(logo)
 }
 
-export const defaultRenderLogoAntTitle = (h, logo, title, menuHeaderRender) => {
+export const defaultRenderLogoAntTitle = (h, props) => {
+  const {
+    logo = 'https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg',
+    title,
+    menuHeaderRender
+  } = props
+
   if (menuHeaderRender === false) {
     return null
   }
@@ -81,7 +91,7 @@ export const defaultRenderLogoAntTitle = (h, logo, title, menuHeaderRender) => {
   const titleDom = <h1>{title}</h1>
 
   if (menuHeaderRender) {
-    return menuHeaderRender(h, logoDom, titleDom)
+    return menuHeaderRender(h, logoDom, props.collapsed ? null : titleDom, props)
   }
   return (
     <span>
@@ -110,7 +120,9 @@ const SiderMenu = {
       logo,
       title,
       handleCollapse,
-      i18nRender
+      onMenuHeaderClick = () => null,
+      i18nRender,
+      menuHeaderRender
     } = this
 
     const siderCls = ['ant-pro-sider-menu-sider']
@@ -121,6 +133,10 @@ const SiderMenu = {
     //   this.$emit('collapse', collapsed)
     // }
 
+    const headerDom = defaultRenderLogoAntTitle(h, {
+      logo, title, menuHeaderRender, collapsed
+    })
+
     return (<Sider
       class={siderCls}
       breakpoint={'lg'}
@@ -131,11 +147,17 @@ const SiderMenu = {
       collapsed={collapsed}
       onCollapse={handleCollapse}
     >
-      <div class='ant-pro-sider-menu-logo' id='logo'>
+      {headerDom && (
+        <div
+          class="ant-pro-sider-menu-logo"
+          onClick={onMenuHeaderClick}
+          id="logo"
+        >
           <router-link to={{ path: '/' }}>
-          {defaultRenderLogoAntTitle(h, logo, title, null)}
+            {headerDom}
           </router-link>
         </div>
+      )}
       <BaseMenu collapsed={collapsed} menus={menus} mode={mode} theme={theme} i18nRender={i18nRender} />
     </Sider>)
   }