Просмотр исходного кода

bugfix:fix #3878, In the top mode. Menu will follow the slide (#3928)

* bugfix:fix #3878, In the top mode. Menu will follow the slide

* typo: repalce warp to wrap
陈帅 6 лет назад
Родитель
Сommit
9b13ab687e
1 измененных файлов с 29 добавлено и 12 удалено
  1. 29 12
      src/components/SiderMenu/BaseMenu.js

+ 29 - 12
src/components/SiderMenu/BaseMenu.js

@@ -123,6 +123,17 @@ export default class BaseMenu extends PureComponent {
     return `/${path || ''}`.replace(/\/+/g, '/');
   };
 
+  getPopupContainer = (fixedHeader, layout) => {
+    if (fixedHeader && layout === 'topmenu') {
+      return this.wrap;
+    }
+    return document.body;
+  };
+
+  getRef = ref => {
+    this.wrap = ref;
+  };
+
   render() {
     const {
       openKeys,
@@ -131,6 +142,8 @@ export default class BaseMenu extends PureComponent {
       location: { pathname },
       className,
       collapsed,
+      fixedHeader,
+      layout,
     } = this.props;
     // if pathname can't match, use the nearest parent's key
     let selectedKeys = this.getSelectedMenuKeys(pathname);
@@ -149,18 +162,22 @@ export default class BaseMenu extends PureComponent {
     });
 
     return (
-      <Menu
-        key="Menu"
-        mode={mode}
-        theme={theme}
-        onOpenChange={handleOpenChange}
-        selectedKeys={selectedKeys}
-        style={style}
-        className={cls}
-        {...props}
-      >
-        {this.getNavMenuItems(menuData)}
-      </Menu>
+      <>
+        <Menu
+          key="Menu"
+          mode={mode}
+          theme={theme}
+          onOpenChange={handleOpenChange}
+          selectedKeys={selectedKeys}
+          style={style}
+          className={cls}
+          {...props}
+          getPopupContainer={() => this.getPopupContainer(fixedHeader, layout)}
+        >
+          {this.getNavMenuItems(menuData)}
+        </Menu>
+        <div ref={this.getRef} />
+      </>
     );
   }
 }