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	无