perf: mode vertical

panyushan-jade · Jun 28, 2022 · a81c0d7 · a81c0d7
1 parent 409d33d
commit a81c0d7
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -14,5 +14,6 @@ module.exports = {
     "scss/no-global-function-names": null,
     "function-no-unknown": null,
     "scss/double-slash-comment-whitespace-inside": null,
+    "no-descending-specificity": null,
   },
 };
diff --git a/src/App.tsx b/src/App.tsx
@@ -22,16 +22,14 @@ function App() {
         </SubMenu>
         <div>222</div>
       </Menu>
-      <Menu style={{ width: 800 }} mode="vertical" defaultSelectedKey="1">
-        <MenuItem disabled>我是MenuItem1</MenuItem>
-        <MenuItem>我是MenuItem2</MenuItem>
-        <MenuItem>我是MenuItem3</MenuItem>
-        <SubMenu title="我是SubMenu">
-          <MenuItem>我是submenu1</MenuItem>
-          <MenuItem>我是submenu2</MenuItem>
-          <div>1111</div>
+      <Menu style={{ width: 250 }} mode="vertical" defaultSelectedKey="1">
+        <MenuItem disabled>我是vertical MenuItem1</MenuItem>
+        <MenuItem>我是vertical MenuItem2</MenuItem>
+        <MenuItem>我是vertical MenuItem3</MenuItem>
+        <SubMenu title="我是vertical">
+          <MenuItem>我是vertical submenu1</MenuItem>
+          <MenuItem>我是vertical submenu2</MenuItem>
         </SubMenu>
-        <div>222</div>
       </Menu>
       <h3>Button</h3>
       <Button type="link">我是link</Button>

diff --git a/src/components/Menu/SubMenu.tsx b/src/components/Menu/SubMenu.tsx
@@ -61,6 +61,7 @@ const SubMenu: React.FC<ISubMenuProps> = (props) => {
         {title}
         <ul className="dui-menu-submenu-item">{renderSubMenuChildren()}</ul>
       </span>
+      <span className="dui-menu-submenu-icon">{">"}</span>
     </li>
   );
 };

diff --git a/src/components/Menu/_style.scss b/src/components/Menu/_style.scss
@@ -125,3 +125,34 @@
 .dui-menu-horizontal {
   display: flex;
 }
+
+.dui-menu-vertical {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #f4f4f4;
+  border-bottom: none;
+
+  .dui-menu-item,
+  .dui-menu-submenu {
+    display: flex;
+
+    .ant-menu-title-content {
+      &::after {
+        content: "";
+        border-bottom: none;
+      }
+    }
+  }
+
+  .dui-menu-item-hover {
+    .ant-menu-title-content {
+      color: $menu-item-active-color;
+      transition: all 0.3s ease-in-out;
+
+      &::after {
+        content: "";
+        border-bottom: none;
+      }
+    }
+  }
+}