Merge pull request #47 from Lohoyo/master

修复 Menu 组件的 4 个 bug 和官网的 1 个 bug
ecomfe · Mar 23, 2021 · be7543e · be7543e
2 parents b621082 + 3131eab
commit be7543e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 11 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -12,6 +12,11 @@
 
 ## 1.0.1
 `2020-3-23`
+- Menu
+    - 🐞 修复 MenuItem 溢出折叠时的可用空间的计算逻辑 [#47](https://github.com/ecomfe/santd/pull/47)
+    - 🐞 修复 MenuItem 的 padding 没有正常生效的问题 [#47](https://github.com/ecomfe/santd/pull/47)
+    - 🐞 修复 MenuItem 之间有间隙导致溢出折叠的计算不精确的问题 [#47](https://github.com/ecomfe/santd/pull/47)
+    - 🐞 修复折叠图标的空间的计算逻辑 [#47](https://github.com/ecomfe/santd/pull/47)
 - Table
     - 🐞 修复当存在子表格时展开子表格的按钮默认隐藏的问题，改为了默认显示 [#45](https://github.com/ecomfe/santd/pull/45)
 - 其它

diff --git a/site/theme/static/header.less b/site/theme/static/header.less
@@ -105,6 +105,7 @@
     float: right;
     font-size: 14px;
     font-family: Lato, @font-family;
+    margin-right: 40px;
     &.santd-menu-horizontal {
         border-bottom: none;
         & > .santd-menu-item,

diff --git a/src/menu/Menu.js b/src/menu/Menu.js
@@ -87,14 +87,6 @@ export default san.defineComponent({
         // resize事件的触发频率较高，因此延迟66ms（意味着updateFoldedItems函数的执行频率变为15fps）
         this.updateFoldedItemsBind = throttle(this.updateFoldedItems, 66).bind(this);
         on(window, 'resize', this.updateFoldedItemsBind);
-        this.nextTick(() => {
-            const foldedItemWidth = getOffset(this.ref(`${prefixCls}-fold-item`)).width;
-            // 用户是否传入了和默认折叠图标的宽度不一样的折叠图标
-            if (foldedItemWidth !== DEFAULT_FOLDED_ITEM_WIDTH) {
-                this.foldedItemWidth = foldedItemWidth;
-                this.updateFoldedItems();
-            }
-        });
     },
     updated() {
         this.updateItems();
@@ -116,7 +108,16 @@ export default san.defineComponent({
         this.foldedItemWidth = DEFAULT_FOLDED_ITEM_WIDTH;
     },
     updateFoldedItems() {
-        let availableMenuWidth = getOffset(this.el).width - (this.foldedItemWidth + FOLDED_ITEM_PADDING);
+        let availableMenuWidth = getOffset(this.el).width;
+        const itemFoldedFlags = this.data.get('itemFoldedFlags');
+        // 是否是可用空间正在变大且目前只有一项折叠项
+        const isSpecialCase = this.lastAvailableMenuWidth
+            && (availableMenuWidth - this.lastAvailableMenuWidth) > 0
+            && itemFoldedFlags[itemFoldedFlags.length - 1] && !itemFoldedFlags[itemFoldedFlags.length - 2];
+        if (this.data.get('hasFoldedItem') && !isSpecialCase) {
+            availableMenuWidth -= this.foldedItemWidth + FOLDED_ITEM_PADDING;
+        }
+        this.lastAvailableMenuWidth = availableMenuWidth;
         this.items.forEach((item, index, items) => {
             // 折叠项（最后一项）不参与菜单项是否需要被折叠的计算
             if (index === items.length - 1) {
@@ -128,7 +129,20 @@ export default san.defineComponent({
             item.data.set('isFolded', isFolded);
             this.data.set(`itemFoldedFlags[${index}]`, isFolded);
         });
-        this.data.set('hasFoldedItem', availableMenuWidth < 0);
+        const hasFoldedItem = availableMenuWidth < 0;
+        this.data.set('hasFoldedItem', hasFoldedItem);
+        // 用户是否自定义了折叠图标
+        if (this.sourceSlots.named.overflowedIndicator
+                && this.foldedItemWidth === DEFAULT_FOLDED_ITEM_WIDTH
+                && hasFoldedItem) {
+            this.nextTick(() => {
+                const foldedItemWidth = getOffset(this.ref(`${prefixCls}-fold-item`)).width;
+                if (foldedItemWidth !== DEFAULT_FOLDED_ITEM_WIDTH) {
+                    this.foldedItemWidth = foldedItemWidth;
+                    this.updateFoldedItems();
+                }
+            });
+        }
     },
     getSelectedKeys(defaultSelectedKeys) {
         let selectedKeys =  this.data.get('selectedKeys') || defaultSelectedKeys || [];

diff --git a/src/menu/style/index.less b/src/menu/style/index.less
@@ -154,7 +154,7 @@
     position: relative;
     display: block;
     margin: 0;
-    padding: 0 20px;
+    padding: 0 20px !important;
     white-space: nowrap;
     cursor: pointer;
     transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
@@ -291,6 +291,7 @@
   }
 
   &-horizontal {
+    display: flex;
     line-height: 46px;
     white-space: nowrap;
     border: 0;