@anchor-it/antd-modal NPM

@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