antd4.x drawer文档 https://ant.design/components/drawer-cn
    image.png

    1. import React from 'react';
    2. import PropTypes from 'prop-types';
    3. import { Drawer, Button } from 'antd';
    6. DrawerEdit.propTypes = {
    7.   onSubmit: PropTypes.func.isRequired,
    8.   onClose: PropTypes.func.isRequired,
    9.   visible: PropTypes.bool,
    10.   title: PropTypes.string,
    11.   width: PropTypes.number,
    12. };
    13. DrawerEdit.defaultProps = {
    14.   visible: false,
    15.   title: '编辑',
    16.   width: 480,
    17. };
    19. function DrawerEdit(props) {
    20.   const { children, visible, title, width, onClose, onSubmit } = props;
    22.   const attr = {
    23.     title,
    24.     visible,
    25.     width,
    26.     // size: 'large', // @4.17
    27.     closable: false,
    28.     // onClose,
    29.     headerStyle: {padding: 16},
    30.     bodyStyle: {padding: 16},
    31.     footerStyle: {display: 'flex'},
    32.     footer: [
    33.       <Button
    34.         key='submit'
    35.         htmlType='submit'
    36.         className="mr16"
    37.         type="primary"
    38.         block
    39.         onClick={onSubmit}
    40.       >
    41.         确定
    42.       </Button>,
    43.       <Button
    44.         key='cancel'
    45.         onClick={() => onClose(false)}
    46.         block
    47.       >
    48.         取消
    49.       </Button>
    50.     ]
    51.   }
    53.   return (
    54.     <Drawer {...attr}>{children}</Drawer>
    55.   )
    56. }
    58. export default DrawerEdit;