• Dropdown下拉菜单
    • 何时使用
    • 代码演示
    • API
      • Dropdown.Button

    Dropdown下拉菜单

    向下弹出的列表。

    何时使用

    当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

    代码演示

    Dropdown 下拉菜单 - 图1

    基本

    最简单的下拉菜单。

    1. import { Menu, Dropdown, Icon } from 'antd';
    3. const menu = (
    4.   <Menu>
    5.     <Menu.Item>
    6.       <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
    7.         1st menu item
    8.       </a>
    9.     </Menu.Item>
    10.     <Menu.Item>
    11.       <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
    12.         2nd menu item
    13.       </a>
    14.     </Menu.Item>
    15.     <Menu.Item>
    16.       <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
    17.         3rd menu item
    18.       </a>
    19.     </Menu.Item>
    20.   </Menu>
    21. );
    23. ReactDOM.render(
    24.   <Dropdown overlay={menu}>
    25.     <a className="ant-dropdown-link" href="#">
    26.       Hover me <Icon type="down" />
    27.     </a>
    28.   </Dropdown>,
    29.   mountNode,
    30. );

    Dropdown 下拉菜单 - 图2

    其他元素

    分割线和不可用菜单项。

    1. import { Menu, Dropdown, Icon } from 'antd';
    3. const menu = (
    4.   <Menu>
    5.     <Menu.Item key="0">
    6.       <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
    7.         1st menu item
    8.       </a>
    9.     </Menu.Item>
    10.     <Menu.Item key="1">
    11.       <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
    12.         2nd menu item
    13.       </a>
    14.     </Menu.Item>
    15.     <Menu.Divider />
    16.     <Menu.Item key="3" disabled>
    17.       3rd menu item（disabled）
    18.     </Menu.Item>
    19.   </Menu>
    20. );
    22. ReactDOM.render(
    23.   <Dropdown overlay={menu}>
    24.     <a className="ant-dropdown-link" href="#">
    25.       Hover me <Icon type="down" />
    26.     </a>
    27.   </Dropdown>,
    28.   mountNode,
    29. );

    Dropdown 下拉菜单 - 图3

    触发事件

    点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

    1. import { Menu, Dropdown, Icon, message } from 'antd';
    3. const onClick = ({ key }) => {
    4.   message.info(`Click on item ${key}`);
    5. };
    7. const menu = (
    8.   <Menu onClick={onClick}>
    9.     <Menu.Item key="1">1st menu item</Menu.Item>
    10.     <Menu.Item key="2">2nd memu item</Menu.Item>
    11.     <Menu.Item key="3">3rd menu item</Menu.Item>
    12.   </Menu>
    13. );
    15. ReactDOM.render(
    16.   <Dropdown overlay={menu}>
    17.     <a className="ant-dropdown-link" href="#">
    18.       Hover me, Click menu item <Icon type="down" />
    19.     </a>
    20.   </Dropdown>,
    21.   mountNode,
    22. );

    Dropdown 下拉菜单 - 图4

    多级菜单

    传入的菜单里有多个层级。

    1. import { Menu, Dropdown, Icon } from 'antd';
    3. const { SubMenu } = Menu;
    5. const menu = (
    6.   <Menu>
    7.     <Menu.Item>1st menu item</Menu.Item>
    8.     <Menu.Item>2nd menu item</Menu.Item>
    9.     <SubMenu title="sub menu">
    10.       <Menu.Item>3rd menu item</Menu.Item>
    11.       <Menu.Item>4th menu item</Menu.Item>
    12.     </SubMenu>
    13.     <SubMenu title="disabled sub menu" disabled>
    14.       <Menu.Item>5d menu item</Menu.Item>
    15.       <Menu.Item>6th menu item</Menu.Item>
    16.     </SubMenu>
    17.   </Menu>
    18. );
    20. ReactDOM.render(
    21.   <Dropdown overlay={menu}>
    22.     <a className="ant-dropdown-link" href="#">
    23.       Cascading menu <Icon type="down" />
    24.     </a>
    25.   </Dropdown>,
    26.   mountNode,
    27. );

    Dropdown 下拉菜单 - 图5

    右键菜单

    默认是移入触发菜单，可以点击鼠标右键触发。

    1. import { Menu, Dropdown } from 'antd';
    3. const menu = (
    4.   <Menu>
    5.     <Menu.Item key="1">1st menu item</Menu.Item>
    6.     <Menu.Item key="2">2nd menu item</Menu.Item>
    7.     <Menu.Item key="3">3rd menu item</Menu.Item>
    8.   </Menu>
    9. );
    11. ReactDOM.render(
    12.   <Dropdown overlay={menu} trigger={['contextMenu']}>
    13.     <span style={{ userSelect: 'none' }}>Right Click on Me</span>
    14.   </Dropdown>,
    15.   mountNode,
    16. );

    Dropdown 下拉菜单 - 图6

    弹出位置

    支持 6 个弹出位置。

    1. import { Menu, Dropdown, Button } from 'antd';
    3. const menu = (
    4.   <Menu>
    5.     <Menu.Item>
    6.       <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
    7.         1st menu item
    8.       </a>
    9.     </Menu.Item>
    10.     <Menu.Item>
    11.       <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
    12.         2nd menu item
    13.       </a>
    14.     </Menu.Item>
    15.     <Menu.Item>
    16.       <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
    17.         3rd menu item
    18.       </a>
    19.     </Menu.Item>
    20.   </Menu>
    21. );
    23. ReactDOM.render(
    24.   <div>
    25.     <Dropdown overlay={menu} placement="bottomLeft">
    26.       <Button>bottomLeft</Button>
    27.     </Dropdown>
    28.     <Dropdown overlay={menu} placement="bottomCenter">
    29.       <Button>bottomCenter</Button>
    30.     </Dropdown>
    31.     <Dropdown overlay={menu} placement="bottomRight">
    32.       <Button>bottomRight</Button>
    33.     </Dropdown>
    34.     <br />
    35.     <Dropdown overlay={menu} placement="topLeft">
    36.       <Button>topLeft</Button>
    37.     </Dropdown>
    38.     <Dropdown overlay={menu} placement="topCenter">
    39.       <Button>topCenter</Button>
    40.     </Dropdown>
    41.     <Dropdown overlay={menu} placement="topRight">
    42.       <Button>topRight</Button>
    43.     </Dropdown>
    44.   </div>,
    45.   mountNode,
    46. );
    1. #components-dropdown-demo-placement .ant-btn {
    2.   margin-right: 8px;
    3.   margin-bottom: 8px;
    4. }

    Dropdown 下拉菜单 - 图7

    触发方式

    默认是移入触发菜单，可以点击触发。

    1. import { Menu, Dropdown, Icon } from 'antd';
    3. const menu = (
    4.   <Menu>
    5.     <Menu.Item key="0">
    6.       <a href="http://www.alipay.com/">1st menu item</a>
    7.     </Menu.Item>
    8.     <Menu.Item key="1">
    9.       <a href="http://www.taobao.com/">2nd menu item</a>
    10.     </Menu.Item>
    11.     <Menu.Divider />
    12.     <Menu.Item key="3">3rd menu item</Menu.Item>
    13.   </Menu>
    14. );
    16. ReactDOM.render(
    17.   <Dropdown overlay={menu} trigger={['click']}>
    18.     <a className="ant-dropdown-link" href="#">
    19.       Click me <Icon type="down" />
    20.     </a>
    21.   </Dropdown>,
    22.   mountNode,
    23. );

    Dropdown 下拉菜单 - 图8

    带下拉框的按钮

    左边是按钮，右边是额外的相关功能菜单。可设置 icon 属性来修改右边的图标。

    1. import { Menu, Dropdown, Button, Icon, message } from 'antd';
    3. function handleButtonClick(e) {
    4.   message.info('Click on left button.');
    5.   console.log('click left button', e);
    6. }
    8. function handleMenuClick(e) {
    9.   message.info('Click on menu item.');
    10.   console.log('click', e);
    11. }
    13. const menu = (
    14.   <Menu onClick={handleMenuClick}>
    15.     <Menu.Item key="1">
    16.       <Icon type="user" />
    17.       1st menu item
    18.     </Menu.Item>
    19.     <Menu.Item key="2">
    20.       <Icon type="user" />
    21.       2nd menu item
    22.     </Menu.Item>
    23.     <Menu.Item key="3">
    24.       <Icon type="user" />
    25.       3rd item
    26.     </Menu.Item>
    27.   </Menu>
    28. );
    30. ReactDOM.render(
    31.   <div id="components-dropdown-demo-dropdown-button">
    32.     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
    33.       Dropdown
    34.     </Dropdown.Button>
    35.     <Dropdown.Button overlay={menu} icon={<Icon type="user" />}>
    36.       Dropdown
    37.     </Dropdown.Button>
    38.     <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
    39.       Dropdown
    40.     </Dropdown.Button>
    41.     <Dropdown overlay={menu}>
    42.       <Button>
    43.         Button <Icon type="down" />
    44.       </Button>
    45.     </Dropdown>
    46.   </div>,
    47.   mountNode,
    48. );
    1. #components-dropdown-demo-dropdown-button .ant-dropdown-button {
    2.   margin: 0 8px 8px 0;
    3. }

    Dropdown 下拉菜单 - 图9

    菜单隐藏方式

    默认是点击关闭菜单，可以关闭此功能。

    1. import { Menu, Dropdown, Icon } from 'antd';
    3. class OverlayVisible extends React.Component {
    4.   state = {
    5.     visible: false,
    6.   };
    8.   handleMenuClick = e => {
    9.     if (e.key === '3') {
    10.       this.setState({ visible: false });
    11.     }
    12.   };
    14.   handleVisibleChange = flag => {
    15.     this.setState({ visible: flag });
    16.   };
    18.   render() {
    19.     const menu = (
    20.       <Menu onClick={this.handleMenuClick}>
    21.         <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
    22.         <Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
    23.         <Menu.Item key="3">Clicking me will close the menu</Menu.Item>
    24.       </Menu>
    25.     );
    26.     return (
    27.       <Dropdown
    28.         overlay={menu}
    29.         onVisibleChange={this.handleVisibleChange}
    30.         visible={this.state.visible}
    31.       >
    32.         <a className="ant-dropdown-link" href="#">
    33.           Hover me <Icon type="down" />
    34.         </a>
    35.       </Dropdown>
    36.     );
    37.   }
    38. }
    40. ReactDOM.render(<OverlayVisible />, mountNode);

    API

    属性如下

    参数说明类型默认值
    disabled菜单是否禁用boolean-
    getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例Function(triggerNode)() => document.body
    overlay菜单Menu | () => Menu-
    overlayClassName下拉根元素的类名称string-
    overlayStyle下拉根元素的样式object-
    placement菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRightStringbottomLeft
    trigger触发下拉的行为, 移动端不支持 hoverArray<click|hover|contextMenu>['hover']
    visible菜单是否显示boolean-
    onVisibleChange菜单显示状态改变时调用，参数为 visibleFunction(visible)-

    overlay 菜单使用 Menu，还包括菜单项 Menu.Item，分割线 Menu.Divider。

    注意： Menu.Item 必须设置唯一的 key 属性。

    Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 <Menu selectable>.

    Dropdown.Button

    参数说明类型默认值版本
    disabled菜单是否禁用boolean-
    icon右侧的 iconReactNode-3.17.0
    overlay菜单Menu-
    placement菜单弹出位置：bottomLeft bottomCenter bottomRight topLeft topCenter topRightStringbottomLeft
    size按钮大小，和 Button 一致string'default'
    trigger触发下拉的行为Array<click|hover|contextMenu>['hover']
    type按钮类型，和 Button 一致string'default'
    visible菜单是否显示boolean-
    onClick点击左侧按钮的回调，和 Button 一致Function-
    onVisibleChange菜单显示状态改变时调用，参数为 visibleFunction-