Merge pull request #30 from Lohoyo/master

feat: Menu组件新增overflowedIndicator API
ecomfe · Mar 4, 2021 · 2418ed5 · 2418ed5
2 parents 5e8d1f8 + f181ceb
commit 2418ed5
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 8 deletions.
diff --git a/src/menu/README.md b/src/menu/README.md
@@ -13,6 +13,7 @@
 | mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string `vertical` `horizontal` `inline` | `vertical` |
 | multiple | 是否允许多选 | boolean | false |
 | openKeys | 当前展开的 SubMenu 菜单项 key 数组 | [] \| string[] | - |
+| overflowedIndicator | 自定义 Menu 折叠时的图标 | slot | - |
 | selectable | 是否允许选中 | boolean | true |
 | selectedKeys | 当前选中的菜单项 key | string(单选) \| []（多选） | - |
 | style | 根节点样式 | string | - |

diff --git a/src/menu/docs/horizontal.md b/src/menu/docs/horizontal.md
@@ -59,7 +59,7 @@ export default {
 }
 </script>
 <style type="text/css">
-  ul {
+ul {
     list-style: none;
 }
 .markdown ul li {

diff --git a/src/menu/docs/index.js b/src/menu/docs/index.js
@@ -11,6 +11,7 @@ import Horizontal from './horizontal.md';
 import Inline from './inline.md';
 import Current from './current.md';
 import Switch from './switch.md';
+import OverflowedIndicator from './overflowedIndicator.md';
 
 
 export default san.defineComponent({
@@ -23,7 +24,9 @@ export default san.defineComponent({
         inline: Inline,
         head: Head,
         current: Current,
-        switch: Switch
+        switch: Switch,
+        'overflowed-indicator': OverflowedIndicator
+
     },
     template: `
         <div>
@@ -34,6 +37,7 @@ export default san.defineComponent({
             <vertical/>
             <theme/>
             <switch/>
+            <overflowed-indicator/>
             <readme/>
         </div>
     `

diff --git a/src/menu/docs/overflowedIndicator.md b/src/menu/docs/overflowedIndicator.md
@@ -0,0 +1,72 @@
+<text lang="cn">
+#### 折叠图标
+自定义 Menu 折叠时的图标。
+</text>
+
+```html
+<template>
+  <div>
+    <s-menu mode="horizontal" on-click="handleClick" selectedKeys="{{[current]}}">
+        <s-menu-item key="mail">
+            <s-icon type="mail" /> Navigation One
+        </s-menu-item>
+        <s-menu-item key="app" disabled="{{true}}">
+            <s-icon type="appstore" /> Navigation Two
+        </s-menu-item>
+        <s-sub-menu>
+            <span class="submenu-title-wrapper" slot="title">
+                <s-icon type="setting" />Navigation Three - Submenu
+            </span>
+            <s-menu-item-group title="Item 1">
+                <s-menu-item key="setting1">Option 1</s-menu-item>
+                <s-menu-item key="setting2">Option 2</s-menu-item>
+            </s-menu-item-group>
+            <s-menu-item-group title="Item 2">
+                <s-menu-item key="setting3">Option 3</s-menu-item>
+                <s-menu-item key="setting4">Option 4</s-menu-item>
+            </s-menu-item-group>
+        </s-sub-menu>
+        <s-menu-item key="link1">
+            <a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
+        </s-menu-item>
+        <s-menu-item key="link2">
+            <a href="https://github.com/ecomfe/santd" target="_blank" rel="noopener noreferrer">Navigation Five - Link</a>
+        </s-menu-item>
+        <s-icon slot="overflowedIndicator" type="more"></s-icon>
+    </s-menu>
+  </div>
+</template>
+<script>
+import {Menu, Icon, Button} from 'santd';
+
+export default {
+    components: {
+        's-menu': Menu,
+        's-sub-menu': Menu.Sub,
+        's-menu-item': Menu.Item,
+        's-menu-item-group': Menu.MenuItemGroup,
+        's-icon': Icon
+    },
+    initData() {
+        return {
+            current: 'mail'
+        };
+    },
+    handleClick(e) {
+        console.log('click ', e);
+        this.data.set('current', e.key);
+    }
+
+}
+</script>
+<style type="text/css">
+ul {
+    list-style: none;
+}
+.markdown ul li {
+  margin: 0;
+  padding: 0;
+  list-style-type: inherit !important;
+}
+</style>
+```
diff --git a/src/menu/menu.js b/src/menu/menu.js
@@ -13,7 +13,8 @@ import {MENU_FOLDED_ITEM_ID} from '../core/constants';
 import throttle from 'lodash/throttle';
 
 const prefixCls = classCreator('menu')();
-const FOLDED_ITEM_WIDTH = 54;
+const DEFAULT_FOLDED_ITEM_WIDTH = 14;
+const FOLDED_ITEM_PADDING = 40;
 
 export default san.defineComponent({
     dataTypes: {
@@ -86,6 +87,14 @@ 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();
@@ -104,9 +113,10 @@ export default san.defineComponent({
     getItemWidths() {
         this.itemWidths = [];
         this.items.forEach(item => this.itemWidths.push(getOffset(item.el).width));
+        this.foldedItemWidth = DEFAULT_FOLDED_ITEM_WIDTH;
     },
     updateFoldedItems() {
-        let availableMenuWidth = getOffset(this.el).width - FOLDED_ITEM_WIDTH;
+        let availableMenuWidth = getOffset(this.el).width - (this.foldedItemWidth + FOLDED_ITEM_PADDING);
         this.items.forEach((item, index, items) => {
             // 折叠项（最后一项）不参与菜单项是否需要被折叠的计算
             if (index === items.length - 1) {
@@ -200,14 +210,18 @@ export default san.defineComponent({
     },
     template: `
         <ul class="{{classes}}" role="{{role || 'menu'}}">
-            <slot/>
+            <slot></slot>
             <s-sub-menu
                 s-show="hasFoldedItem"
                 id="${MENU_FOLDED_ITEM_ID}"
                 key="${MENU_FOLDED_ITEM_ID}"
                 itemFoldedFlags="{{itemFoldedFlags}}">
-                <s-icon slot="title" type="ellipsis" class="${prefixCls}-fold-icon"></s-icon>
-                <slot/>
+                <div slot="title" s-ref="${prefixCls}-fold-item" class="${prefixCls}-fold-item">
+                    <slot name="overflowedIndicator">
+                        <s-icon type="ellipsis"></s-icon>
+                    </slot>
+                </div>
+                <slot></slot>
             </s-sub-menu>
         </ul>
     `

diff --git a/src/menu/style/index.less b/src/menu/style/index.less
@@ -169,7 +169,9 @@
         transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
       }
     }
-    .@{menu-prefix-cls}-fold-icon {
+  }
+  &-fold-item {
+    .@{iconfont-css-prefix} {
       margin-right: 0;
     }
   }