@anchor-it/antd-modal

anchor components library modal

Install

Use npm:

npm install --save @anchor-it/antd-modal

Use yarn:

yarn add @anchor-it/antd-modal -S

Usage

import React, { Component } from 'react';
import { Button } from 'antd';
import { ModalComponent } from '@anchor-it/antd-modal';

export default class App extends Component {
  handleButtonOnClick = () => {
    this.myModal.openModal();
  };

  handleModalOnClosed = () => {
    console.log('modal closed');
  };

  handleModalOnOk = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ message: '' });
      }, 2000);
    });
  };

  render() {
    return (
      <div style={{ padding: 16 }}>
        <Button type={'primary'} onClick={this.handleButtonOnClick}>
          弹窗
        </Button>

        <ModalComponent
          ref={(node) => (this.myModal = node)}
          title={'弹窗标题'}
          hasMask={true}
          width={'760px'}
          height={'380px'}
          okText={'确定'}
          cancelText={'关闭'}
          onClose={this.handleModalOnClosed}
          onCancel={this.handleModalOnClosed}
          onClosed={this.handleModalOnClosed}
          onOk={this.handleModalOnOk}
        >
          <div>我是弹窗内容</div>
          <div>我是弹窗内容</div>
        </ModalComponent>
      </div>
    );
  }
}

Api

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ----------------------------------------------------------------------- | ----------------- | ---------------- | | title | 弹窗标题 | string | | | width | 弹窗宽度 | string | 400 | | height | 弹窗高度 | string | 320 | | hasMask | 是否显示遮罩层 | boolean | true | | maskClosable | 点击蒙层是否允许关闭 | boolean | false | | okText | 确定按钮显示的文字 | string | 确定 | | cancelText | 取消按钮显示的文字 | string | 取消 | | draggable | 是否允许拖拽 | boolean | true | | footer | 弹窗底部区域,如果不需要显示底部区域,可以将 footer 设为null或者false | any | | | footerActions | 底部需要显示的按钮组 | string[] | [cancel, ok] | | okButtonLoading | 确定按钮的 loading 状态 | boolean | | | onClose | 弹窗关闭事件 | function | | | onClosed | 弹窗关闭后触发的事件 | function | | | onOk | 弹窗按下“确认”按钮后的事件 | function | | | bodyStyle | 弹窗 body 的 style 参数 | object | | | destroyOnClose | 弹窗是否在关闭时移除 | boolean | true |

License

MIT