eui-dialog

eui dialog component 弹窗组件

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'eui-dialog';

ReactDOM.render(
    <Dialog
        title="这是对话框的标题"
        visible={this.state.visible}
        onOk={() => this.handleOk()}
        onCancel={() =>this.handleCancel()}
    >
        <p>这是对话框的内容</p>
    </Dialog>,
    document.getElementById('app')
);

API

参数 | 类型 | 默认值 | 说明 --- | ---- | ---- | ---- title | String | ReactElement | 无 | 标题 className | String | 无 | 容器类名 prefixCls | String | "eui-dialog" | 自定义类名前缀 visible | Boolean | false | 对话框是否可见 width | String | Number | "580px" | 宽度 locale | String | zh-cn | 国际化(zh-cn, en-us) maskClosable | Boolean | true | 点击蒙层是否允许关闭 onOk | Function | () => {} | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 onCancel | Function | () => {} | 点击取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭

剩余API可以参照 rc-dialog api

Dialog.method()

包含：

• Dialog.confirm
• Dialog.success
• Dialog.warning
• Dialog.error
• Dialog.info

// usage example

Dialog.confirm({
  title: '这是一个confirm的title',
  content: '这是一个confirm的content',
})

以上均为一个函数，参数为 object，具体属性如下：

参数 | 类型 | 默认值 | 说明 --- | ---- | ---- | ---- title | String | ReactElement | 无 | 标题 content | String | ReactElement | 无 | 内容 className | String | 无 | 容器类名 width | String | Number | "390px" | 宽度 locale | String | zh-cn | 国际化(zh-cn, en-us) okText | String | 确定 | 确认按钮文字 cancelText | String | 取消 | 取消按钮文字 maskClosable | Boolean | false | 点击蒙层是否允许关闭 onOk | Function | () => {} | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 onCancel | Function | () => {} | 点击取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭

以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

const ref = Dialog.info();
ref.close();

开发规约

• fork项目到自己仓库
• npm i
• 编辑器开启eslint
• 提交代码信息使用git-cz