Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use antd Custom Confirm Modal #15

Open
zhulinpinyu opened this issue Sep 4, 2019 · 0 comments
Open

use antd Custom Confirm Modal #15

zhulinpinyu opened this issue Sep 4, 2019 · 0 comments

Comments

@zhulinpinyu
Copy link
Owner

zhulinpinyu commented Sep 4, 2019

.confirm-modal-footer{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  button {
    font-weight: bolder;
    font-size: 23px;
  }
}
import React from 'react'
import { Modal, Button} from 'antd'

export default class ConfirmModal extends React.PureComponent {

  render() {
    const {visible, title, content, onCancel, onOk} = this.props
    return (
      <Modal
        visible={visible}
        title={title}
        mask={false}
        closable={false}
        centered
        maskClosable
        destroyOnClose={true}
        footer={<div className="confirm-modal-footer">
          <Button key="back" size="large" type="danger" onClick={onCancel}>
            没有
          </Button>
          <Button key="submit" size="large" type="primary" onClick={onOk}></Button>
        </div>}
      >
        {content}
      </Modal>
    )
  }
}

使用:

<ConfirmModal
            visible={currentItem.category === "Handbag"}
            title={null}
            content=""
            onOk={() => {}}
            onCancel={() => {}}
          />

效果:

Screen Shot 2019-09-04 at 15 03 17

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant