fix: menuItemRender

README.md

@@ -174,6 +174,77 @@ export default defineComponent({
 | locale | i18n | Function (key: string) => string \| `false` | `false` |
 
 
+
+### Custom Render
+
+#### Custom rightContentRender
+```vue
+<template #rightContentRender>
+  <div style="margin-right: 12px">
+    <a-avatar shape="square" size="small">
+      <template #icon>
+        <UserOutlined />
+      </template>
+    </a-avatar>
+  </div>
+</template>
+```
+
+#### Custom menu.item
+```vue
+<template #menuItemRender="{ item, icon }">
+  <a-menu-item
+    :key="item.path"
+    :disabled="item.meta?.disabled"
+    :danger="item.meta?.danger"
+    :icon="icon"
+  >
+    <router-link :to="{ path: item.path }">
+      <span class="ant-pro-menu-item">
+        <a-badge count="5" dot>
+          <span class="ant-pro-menu-item-title">{{ item.meta.title }}</span>
+        </a-badge>
+      </span>
+    </router-link>
+  </a-menu-item>
+</template>
+```
+
+#### Custom menuExtraRender
+```vue
+<template #menuExtraRender="{ collapsed }">
+  <a-input-search v-if="!collapsed" />
+</template>
+```
+
+#### Custom menuFooterRender
+```vue
+<template #menuFooterRender>
+  <div>menu footer</div>
+</template>
+```
+
+#### Custom breadcrumbRender
+```vue
+<template #breadcrumbRender="{ route, params, routes }">
+  <span v-if="routes.indexOf(route) === routes.length - 1">
+    {{ route.breadcrumbName }}
+  </span>
+  <router-link v-else :to="{ path: route.path, params }">
+    {{ route.breadcrumbName }}
+  </router-link>
+</template>
+```
+
+#### Custom collapsedButtonRender
+```vue
+<template #collapsedButtonRender="collapsed">
+  <HeartOutlined v-if="collapsed" />
+  <SmileOutlined v-else />
+</template>
+```
+
+
 ### PageContainer
 
 | Property | Description | Type | Default Value |

examples/layouts/BasicLayout.vue

@@ -66,6 +66,24 @@
       </a>
     </template>
 
+    <!-- custom menu-item -->
+    <template #menuItemRender="{ item, icon }">
+      <a-menu-item
+        :key="item.path"
+        :disabled="item.meta?.disabled"
+        :danger="item.meta?.danger"
+        :icon="icon"
+      >
+        <router-link :to="{ path: item.path }">
+          <span class="ant-pro-menu-item">
+            <a-badge count="5" dot>
+              <span class="ant-pro-menu-item-title">{{ item.meta.title }}</span>
+            </a-badge>
+          </span>
+        </router-link>
+      </a-menu-item>
+    </template>
+
     <!-- content begin -->
     <router-view />
     <!-- content end -->
@@ -98,7 +116,7 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
 import { useRouter } from 'vue-router';
-import { Button, Input, Switch, Select, Avatar, Space, Badge } from 'ant-design-vue';
+import { Button, Input, Switch, Select, Avatar, Space, Badge, Menu } from 'ant-design-vue';
 import { getMenuData, clearMenuItem, FooterToolbar } from '@ant-design-vue/pro-layout';
 import type { RouteContextProps } from '@ant-design-vue/pro-layout';
 
@@ -118,6 +136,7 @@ export default defineComponent({
 
     [Badge.name]: Badge,
     [Avatar.name]: Avatar,
+    [Menu.Item.name]: Menu.Item,
   },
   setup() {
     const loading = ref(false);

src/GlobalHeader/headerProps.ts

 import type { PropType } from 'vue';
 import type { CustomRender, Theme, MenuDataItem, WithFalse } from '../typings';
 import { defaultSettingProps } from '../defaultSettings';
-import { PropTypes } from '../utils'
+import { PropTypes } from '../utils';
 import { siderMenuProps } from '../SiderMenu/SiderMenu';
 
 export default {
@@ -27,6 +27,8 @@ export default {
     default: () => undefined,
   },
   menuHeaderRender: siderMenuProps.menuHeaderRender,
+  menuItemRender: siderMenuProps.menuItemRender,
+  subMenuItemRender: siderMenuProps.subMenuItemRender,
   rightContentRender: {
     type: [Object, Function] as PropType<WithFalse<(props: any) => CustomRender>>,
     default: () => undefined,

src/SiderMenu/BaseMenu.tsx

@@ -85,11 +85,11 @@ export const baseMenuProps = {
   },
   menuItemRender: {
     type: [Function, Boolean] as PropType<CustomMenuRender['menuItemRender']>,
-    default: () => false,
+    default: () => undefined,
   },
   subMenuItemRender: {
     type: [Function, Boolean] as PropType<CustomMenuRender['subMenuItemRender']>,
-    default: () => false,
+    default: () => undefined,
   },
 
   onClick: [Function, Object] as PropType<(...args: any) => void>,
@@ -177,6 +177,7 @@ class MenuUtil {
         <MenuComponent
           title={defaultTitle}
           key={item.path}
+          popupClassName={hasGroup ? null : `${prefixCls}-menu-popup`}
           icon={hasGroup ? null : <LazyIcon icon={item.meta?.icon} />}
         >
           {this.getNavMenuItems(item.children)}

src/SiderMenu/index.less

@@ -109,6 +109,11 @@
     min-height: 100%;
     box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
     
+    .@{ant-prefix}-pro-menu-item {
+      > .@{ant-prefix}-badge {
+        color: unset;
+      }
+    }
     span.@{ant-prefix}-pro-menu-item-title {
       transition: none;
     }

src/TopNavHeader/index.less

@@ -71,7 +71,18 @@
 
       .@{ant-prefix}-menu-item {
         height: 100%;
+        
+        .@{ant-prefix}-badge {
+          color: unset;
+        }
+      }
     }
   }
+}
+
+// replace sub.item
+.@{ant-prefix}-pro-menu-popup {
+  .@{ant-prefix}-badge {
+    color: unset;
   }
 }
\ No newline at end of file

src/TopNavHeader/index.tsx

@@ -93,6 +93,8 @@ export const TopNavHeader: FunctionalComponent<TopNavHeaderProps> = props => {
             mode={props.mode}
             collapsed={props.collapsed}
             menuData={menuData}
+            menuItemRender={props.menuItemRender}
+            subMenuItemRender={props.subMenuItemRender}
             openKeys={context.openKeys}
             selectedKeys={context.selectedKeys}
             class={{ 'top-nav-menu': props.mode === 'horizontal' }}