style: 优化slider菜单收缩后样式显示

vueComponent · May 25, 2022 · bceff80 · bceff80
1 parent f6a527e
commit bceff80
Showing 1 changed file with 15 additions and 16 deletions.
diff --git a/src/components/RouteMenu/BaseMenu.jsx b/src/components/RouteMenu/BaseMenu.jsx
@@ -24,17 +24,17 @@ export const RouteMenuProps = {
 
 const httpReg = /(http|https|ftp):\/\/([\w.]+\/?)\S*/
 
-const renderMenu = (h, item, i18nRender) => {
+const renderMenu = (h, item, i18nRender, collapsed, collapsedWidth) => {
   if (item && !item.hidden) {
     const bool = item.children && !item.hideChildrenInMenu
-    return bool ? renderSubMenu(h, item, i18nRender) : renderMenuItem(h, item, i18nRender)
+    return bool ? renderSubMenu(h, item, i18nRender, collapsed, collapsedWidth) : renderMenuItem(h, item, i18nRender, collapsed, collapsedWidth)
   }
   return null
 }
 
-const renderSubMenu = (h, item, i18nRender) => {
+const renderSubMenu = (h, item, i18nRender, collapsed, collapsedWidth) => {
   return (
-    <SubMenu key={item.path} title={(
+    <SubMenu key={item.path} style={{marginLeft: calcMarginLeft(collapsed, collapsedWidth)}} title={(
       <span>
         {renderIcon(h, item.meta.icon)}
         <span>{renderTitle(h, item.meta.title, i18nRender)}</span>
@@ -45,7 +45,7 @@ const renderSubMenu = (h, item, i18nRender) => {
   )
 }
 
-const renderMenuItem = (h, item, i18nRender) => {
+const renderMenuItem = (h, item, i18nRender, collapsed, collapsedWidth) => {
   const meta = Object.assign({}, item.meta)
   const target = meta.target || null
   const hasRemoteUrl = httpReg.test(item.path)
@@ -61,7 +61,7 @@ const renderMenuItem = (h, item, i18nRender) => {
     })
   }
   return (
-    <MenuItem key={item.path}>
+    <MenuItem key={item.path} style={{marginLeft: calcMarginLeft(collapsed, collapsedWidth)}}>
       <CustomTag {...{ props, attrs }}>
         {renderIcon(h, meta.icon)}
         {renderTitle(h, meta.title, i18nRender)}
@@ -70,6 +70,13 @@ const renderMenuItem = (h, item, i18nRender) => {
   )
 }
 
+const calcMarginLeft = (collapsed, collapsedWidth) => {
+  if (collapsed) {
+    return `-${collapsedWidth ? Math.abs(32 - (collapsedWidth - 16) / 2) : 0}px`
+  }
+  return 0
+}
+
 const renderIcon = (h, icon) => {
   if (icon === undefined || icon === 'none' || icon === null) {
     return null
@@ -114,13 +121,6 @@ const RouteMenu = {
       return '100%'
     }
 
-    const calcMarginLeft = (collapsed, collapsedWidth) => {
-      if (collapsed) {
-        return `-${collapsedWidth ? Math.abs(32 - (collapsedWidth - 16) / 2) : 0}px`
-      }
-      return 0
-    }
-
     const dynamicProps = {
       props: {
         mode,
@@ -138,16 +138,15 @@ const RouteMenu = {
         openChange: handleOpenChange
       },
       style: {
-        width: calcWidth(collapsed, collapsedWidth),
-        marginLeft: calcMarginLeft(collapsed, collapsedWidth)
+        width: calcWidth(collapsed, collapsedWidth)
       }
     }
 
     const menuItems = menus.map(item => {
       if (item.hidden) {
         return null
       }
-      return renderMenu(h, item, i18nRender)
+      return renderMenu(h, item, i18nRender, collapsed, collapsedWidth)
     })
     return <Menu {...dynamicProps}>{menuItems}</Menu>
   },