# MMultiMenu 多下拉菜单

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/multi-menu/freepass)
- 平台：移动端
- 维护者：陈佳敏
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys-2/#s45
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MMultiMenu]

## 代码演示

### 基础用法

```jsx
import React from 'react';
import { MMultiMenu, MButton } from '@weapp/ui';

const data = [
	[
		{ id: 'group1_tab1', content: '标签1(组1)' },
		{ id: 'group1_tab2', content: '标签2(组1)' },
		{ id: 'group1_tab3', content: '标签3(组1)' },
	],
	[
		{ id: 'group2_tab1', content: '标签1(组2)' },
		{
			id: 'group2_tab2',
			content: '标签2带图标(组2)',
			icon: 'Icon-folder',
			children: [
				{ id: 'childTab1', content: '子菜单1', parentId: 'group2_tab2' },
				{ id: 'childTab2', content: '子菜单2', parentId: 'group2_tab2', children: [
					{id: 'secondchildTab1', content: '二级子菜单1', parentId: 'childTab2' },
					{id: 'secondchildTab2', content: '二级子菜单2', parentId: 'childTab2' },
					{id: 'secondchildTab3', content: '二级子菜单2', parentId: 'childTab2' },
				]},
				{ id: 'childTab3', content: '子菜单2', parentId: 'group2_tab2' }
			]
		},
		{ id: '标签3', content: '标签3很长很长很长很长很长(组2)' },
	]
];

export default class Demo extends React.PureComponent<{}> {

  onChange = (value: string[], item: object, groupIndex:number, e: React.MouseEvent) => {
    console.log('onChange', value, item, groupIndex, e);
  }

  onItemClick = (value: string, item: object, e: React.MouseEvent) => {
    console.log('onItemClick', value, item, e);
  }

  onExpandChange = (expandKeys: string[], id?: string) => {
    console.log('onExpandChange', expandKeys, 'id', id);
  }

  render() {
    return(
      <MMultiMenu
        defaultValue={['group1_tab1', 'group2_tab1']}
        data={data}
        extraContent={<MButton>Extra Content</MButton>}
        onChange={this.onChange}
        // onItemClick={this.onItemClick}
        // onExpandChange={this.onExpandChange}
      />
    );
  }
}
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | class 名 | string | 否 | - |
| preficCls | 默认组件 class 名 | string | 否 | - |
| style | 样式 | CSSProperties | 否 | - |
| value | 当前选中值 | string[] | 否 | '' |
| defaultValue | 默认选中值 | string[] | 否 | '' |
| expandKeys | 展开子菜单的 id 组成的数组 | string[] | 否 | '' |
| defaultExpandKeys | 默认展开子菜单的 id 组成的数组 | string[] | 否 | - |
| data | 数据 | Array<MMenuItemData[]> | 是 | [] |
| extraContent | 自定义额外内容 | React.ReactElement | 否 | '' |
| maskVisible | 蒙层显示隐藏受控 | boolean | 否 | - |
| onChange | 选中值改变的回调 | (value: string[], item: MenuItemData, groupIndex: number, e: React.MouseEvent) => void | 否 | - |
| onBeforeChange | 选中值改变前的回调 | (value: string[], item: MenuItemData, groupIndex: number, e: React.MouseEvent) => Promise<boolean \| void> | 否 | - |
| onItemClick | 子菜单的点击回调 | (id: string, item: MMenuItemData, e: React.MouseEvent) => viod | 否 | - |
| onExpandChange | 多级菜单展开收起等的回调 | (newExpandKeys: string[], key?: string) => void | 否 | - |
| onBeforeExpandChange | 多级菜单展开收起前的回调 | (newExpandKeys: string[], key?: string) => Promise<boolean \| void> | 否 | - |
| onMaskVisibleChange | 蒙层显示隐藏的回调 | (visible: boolean) => void | 否 | - |
| customRenderSelectContent | 自定义下拉选中的内容 | (groupIndex: number) => React.reactNode | 否 | - |
| customRenderItemContent | 自定义渲染每一项 item 的文本内容 | (itemData: MenuItemData) => React.ReactNode | 否 |  |
| customRenderItem | 自定义每一项的内容 | (this: any, itemNode: React.ReactNode, itemData: MenuItemData) => ReactElement | 否 |  |
| customRender | 自定义组件渲染 | (props: any, ele: ReactElement) => ReactElement | 否 | - |
#### MMenuItemData 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 |
| --- | --- | --- | --- |
| id | 唯一 | string | 是 |
| parentKey | 对应父级的 id | string | 如果是子菜单则需要,父级菜单不用 |
| content | 显示内容 | string \| React.ReactNode | 否 |
| icon | 左侧图标 | string \| React.ReactNode | 否 |
| closeIcon | 自定义删除图标 | string \| React.ReactNode | 否 |
| closeable | 是否可删除 | boolean | 否 |
| disabled | 是否是禁用项 | boolean | 否 |
| children | 子数据 | MMenuItemData[] | 否 |
| MenuItemData, e: React.MouseEvent) => viod | 否 |  |  |
