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

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | wrapClassName | 值为 center 则居中显示对话框 | string | 无 | | visible | 是否显示 | bool| false | | title | 标题 | string | 无 | | onClose | 关闭回调 | function | 无 | | onOk | 确认回调 | function | 无 | | footer | 底部内容 | ReactNode | | | confirmLoading | 确认按钮的加载状态 | false | false | | Modal.info | 信息提示窗 | object | | | Modal.success | 成功提示窗 | object | | | Modal.error | 错误提示窗 | object | | | Modal.warning | 警告提示窗 | object | | | Modal.confirm | 确认对话框 | object | |

提示窗/对话框 config:

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | width | 宽度 | number | 416 | | style | 样式 | ReactStyle| {} | | okText | 确认文本 | string | '确定' | | cancelText | 取消文本 | string| '取消' | | title | 标题 | string| '取消' | | okText | 确认文本 | string | '确定' | | cancelText | 取消文本 | string| '取消' | | content | 内容 | ReactNode | '取消' | | onCancel | 关闭回调 | function | 无 | | onOk | 确认回调 | function | 无 |