fix: layout topmenu menuRender invalid

vueComponent · Jan 20, 2021 · 0e635b3 · 0e635b3
1 parent ab48da1
commit 0e635b3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/examples/src/layouts/BasicLayout.vue b/examples/src/layouts/BasicLayout.vue
@@ -10,15 +10,17 @@
     :siderWidth="208"
     v-bind="settings"
   >
-    <!--    <template v-slot:menuRender>
-      <div v-for="(menu, key) in menus" :key="key">
-        {{  menu }}
-      </div>
-    </template>-->
+    <template v-slot:menuRender>
+      <ul style="color: white;">
+        <li v-for="(menu, key) in menus" :key="key">
+          {{ menu.meta.title }}
+        </li>
+      </ul>
+    </template>
     <template v-slot:menuHeaderRender>
       <div>
         <img src="../assets/logo.svg" />
-        <h1>Pro Layout</h1>
+        <h1>Pro 1</h1>
       </div>
     </template>
     <template v-slot:headerContentRender>

diff --git a/src/Header.jsx b/src/Header.jsx
@@ -32,7 +32,7 @@ const renderContent = (h, props) => {
   const maxWidth = 1200 - 280 - 120
   const contentWidth = props.contentWidth === 'Fixed'
   const baseCls = 'ant-pro-top-nav-header'
-  const { logo, title, theme, isMobile, headerRender, rightContentRender, menuHeaderRender } = props
+  const { logo, title, theme, isMobile, headerRender, rightContentRender, menuRender, menuHeaderRender } = props
   const rightContentProps = { theme, isTop, isMobile }
   let defaultDom = <GlobalHeader {...{ props: props }} />
   if (isTop && !isMobile) {
@@ -47,7 +47,7 @@ const renderContent = (h, props) => {
             </div>
           )}
           <div class={`${baseCls}-menu`} style={{ maxWidth: `${maxWidth}px`, flex: 1 }}>
-            <BaseMenu {...{ props: props }} />
+            {menuRender && (isFun(menuRender) && menuRender(h, props) || menuRender) || (<BaseMenu {...{ props: props }} />) }
           </div>
           {isFun(rightContentRender) && rightContentRender(h, rightContentProps) || rightContentRender}
         </div>