fix(head-menu): 菜单折叠 (#2029)

* fix(head-menu): 菜单折叠 * feat: update snap Co-authored-by: pengYYY <pengyue970715@gmail.com>
Tencent · Nov 19, 2022 · fd340ed · fd340ed
1 parent 0bbc388
commit fd340ed
Show file tree

Hide file tree

Showing 5 changed files with 1,502 additions and 1,442 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/menu/__tests__/__snapshots__/head-menu.test.jsx.snap b/src/menu/__tests__/__snapshots__/head-menu.test.jsx.snap
@@ -8,13 +8,16 @@ exports[`HeadMenu > props > :active 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <ul
-      class="t-menu"
-      style="flex: 1;"
+    <div
+      class="t-menu__container"
     >
-      
-      
-    </ul>
+      <ul
+        class="t-menu"
+      >
+        
+        
+      </ul>
+    </div>
     <!---->
   </div>
   <!---->
@@ -30,13 +33,16 @@ exports[`HeadMenu > props > :height 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <ul
-      class="t-menu"
-      style="flex: 1;"
+    <div
+      class="t-menu__container"
     >
-      
-      
-    </ul>
+      <ul
+        class="t-menu"
+      >
+        
+        
+      </ul>
+    </div>
     <!---->
   </div>
   <!---->
@@ -51,13 +57,16 @@ exports[`HeadMenu > props > :theme 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <ul
-      class="t-menu"
-      style="flex: 1;"
+    <div
+      class="t-menu__container"
     >
-      
-      
-    </ul>
+      <ul
+        class="t-menu"
+      >
+        
+        
+      </ul>
+    </div>
     <!---->
   </div>
   <!---->
@@ -72,14 +81,17 @@ exports[`HeadMenu > slot > <default> 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <ul
-      class="t-menu"
-      style="flex: 1;"
+    <div
+      class="t-menu__container"
     >
-      
-      <div />
-      
-    </ul>
+      <ul
+        class="t-menu"
+      >
+        
+        <div />
+        
+      </ul>
+    </div>
     <!---->
   </div>
   <!---->
@@ -100,13 +112,16 @@ exports[`HeadMenu > slot > <logo> 1`] = `
       <div />
       
     </div>
-    <ul
-      class="t-menu"
-      style="flex: 1;"
+    <div
+      class="t-menu__container"
     >
-      
-      
-    </ul>
+      <ul
+        class="t-menu"
+      >
+        
+        
+      </ul>
+    </div>
     <!---->
   </div>
   <!---->
@@ -121,13 +136,16 @@ exports[`HeadMenu > slot > <operations> 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <ul
-      class="t-menu"
-      style="flex: 1;"
+    <div
+      class="t-menu__container"
     >
-      
-      
-    </ul>
+      <ul
+        class="t-menu"
+      >
+        
+        
+      </ul>
+    </div>
     <div
       class="t-menu__operations"
     >

diff --git a/src/menu/head-menu.tsx b/src/menu/head-menu.tsx
@@ -120,6 +120,7 @@ export default defineComponent({
       );
     };
 
+    const menuContainerRef = ref<HTMLDivElement>();
     const menuRef = ref<HTMLUListElement>();
     const innerRef = ref<HTMLDivElement>();
     const logoRef = ref<HTMLDivElement>();
@@ -132,8 +133,8 @@ export default defineComponent({
       Number.parseInt(String(getComputedCss(el, cssProperty)), 10);
 
     const calcMenuWidth = () => {
-      const menuPaddingLeft = getComputedCssValue(menuRef.value, 'paddingLeft');
-      const menuPaddingRight = getComputedCssValue(menuRef.value, 'paddingRight');
+      const menuPaddingLeft = getComputedCssValue(menuContainerRef.value, 'paddingLeft');
+      const menuPaddingRight = getComputedCssValue(menuContainerRef.value, 'paddingRight');
       let totalWidth = innerRef.value.clientWidth;
       if (logoRef.value) {
         const logoMarginLeft = getComputedCssValue(logoRef.value, 'marginLeft');
@@ -200,9 +201,11 @@ export default defineComponent({
                 {logo}
               </div>
             )}
-            <ul class={`${classPrefix.value}-menu`} style={{ flex: 1 }} ref={menuRef}>
-              {content}
-            </ul>
+            <div class={`${classPrefix.value}-menu__container`} ref={menuContainerRef}>
+              <ul class={`${classPrefix.value}-menu`} ref={menuRef}>
+                {content}
+              </ul>
+            </div>
             {operations && (
               <div class={`${classPrefix.value}-menu__operations`} ref={operationRef}>
                 {operations}