fix: 菜单 collapsed 时，icon 与 title 的间距

ycl053382 · Apr 19, 2022 · 4df39f9 · 4df39f9
1 parent acf3880
commit 4df39f9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/packages/pro-layout/examples/App.vue b/packages/pro-layout/examples/App.vue
@@ -6,6 +6,9 @@ const getPopupContainer = (triggerNode?: HTMLElement): HTMLElement => {
   // if (dialogContext) {
   //   return dialogContext.getDialogWrap()
   // }
+  if (triggerNode) {
+    return (triggerNode?.parentNode as HTMLElement) || document.body;
+  }
   return document.body;
 };
 </script>

diff --git a/packages/pro-layout/examples/layouts/BasicLayout.vue b/packages/pro-layout/examples/layouts/BasicLayout.vue
@@ -113,7 +113,7 @@ export default defineComponent({
       // title: 'ProLayout',
       // logo: 'https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg',
       navTheme: 'light',
-      layout: 'top',
+      layout: 'side',
       fixSiderbar: false,
       fixedHeader: true,
     });
@@ -126,8 +126,9 @@ export default defineComponent({
       })
     );
 
-    const handleCollapsed = () => {
-      baseState.collapsed = !baseState.collapsed;
+    const handleCollapsed = (collapsed?: boolean) => {
+      console.log('collapsed', collapsed);
+      baseState.collapsed = collapsed;
     };
     watchEffect(() => {
       if (router.currentRoute) {

diff --git a/packages/pro-layout/package.json b/packages/pro-layout/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ant-design-vue/pro-layout",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.1.0",
-    "ant-design-vue": "^3.1.1",
+    "ant-design-vue": "^3.2.0",
     "omit.js": "^2.0.2",
     "vue": "^3.2.33",
     "vue-router": "^4.0.14"

diff --git a/packages/pro-layout/src/components/SiderMenu/index.less b/packages/pro-layout/src/components/SiderMenu/index.less
@@ -26,6 +26,8 @@
     }
   }
 
+
+
   &-logo {
     position: relative;
     display: flex;
@@ -188,6 +190,13 @@
   }
 }
 
+// 修正菜单 collapsed 时，icon 与 title 的间距
+.@{ant-prefix}-pro-menu-item {
+  .anticon + .@{ant-prefix}-pro-menu-item-title {
+    margin-left: 10px;
+  }
+}
+
 @keyframes pro-layout-title-hide {
   0% {
     display: none;