xa-modal v0.0.0

xa-modal

使用

安装

yarn add xa-modal

基础

<Modal
    title="基础"
    visible={this.state.visible}
    onOk={this.handleOk}
    onCancel={this.handleCancel}
>
    <p>balabala</p>
</Modal>

2.异步关闭

<Modal
    title="异步关闭"
    visible={this.state.visible}
    confirmLoading={this.state.confirmLoading}
    onOk={this.handleOk}
    onCancel={this.handleCancel}
>
    <p>balabala</p>
</Modal>

3.自定义按钮

<Modal
    title="自定义按钮"
    visible={this.state.visible}
    footer={[
        <Button key="back" onClick={this.handleCancel}>Return</Button>,
        <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>
            Submit
        </Button>,
    ]}
>
    <p>balabala</p>
</Modal>

4.确认对话框

onCancel,onOK 返回 Promise 可延时关闭

showConfirm = () => {
    Modal.confirm({
      title: 'Do you Want to delete these items?',
      content: 'Some descriptions',
      onOk() {
        return new Promise((resolve, reject) => {
          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
        }).catch(() => console.log('Oops errors!'));
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

5.信息提示

showInfo = () => {
    Modal.info({
      title: 'Do you Want to delete these items?',
      content: 'Some descriptions',
    });
  }
  showSuccess = () => {
    Modal.success({
      title: 'Do you Want to delete these items?',
      content: 'Some descriptions',
      onOk() {},
    });
  }
  showWarning = () => {
    Modal.warning({
      title: 'Do you Want to delete these items?',
      content: 'Some descriptions',
    });
  }
  showError = () => {
    Modal.error({
      title: 'Do you Want to delete these items?',
      content: 'Some descriptions',
    });
  }

API

提示窗/对话框 config: