模态框 Modal

模态框（Modal）是覆盖在父窗体上的子窗体，位于页面最上层。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互，如查看、创建、编辑、向导等。

何时使用

代替原生 dialog

如何使用

import { Modal } from 'tinper-bee';
or
import Modal from 'bee-modal';
import 'bee-modal/build/Modal.css';

代码演示

API

Modal

Modal.Header

Modal.method()

包括：

• Modal.info
• Modal.success
• Modal.error
• Modal.warning
• Modal.confirm

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

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

const modal = Modal.info();
modal.update({
  title: '修改的标题',
  content: '修改的内容',
});
modal.destroy();

• Modal.destroyAll

使用 Modal.destroyAll() 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）

import { browserHistory } from 'react-router';
// router change
browserHistory.listen(() => {
  Modal.destroyAll();
});

已支持的键盘操作

注意事项

• 使用模态框拖拽功能时，如果 Header 内有绑定事件的元素，需要添加一个 className=”dnd-cancel”，才能正常触发相应事件。
• 具体实现代码如下：

  <Modal.Title>
  <Checkbox 
      className="dnd-cancel"
      checked={this.state.checked}  
      onChange={this.changeCheck}
  >
      可勾选的标题
  </Checkbox>
  </Modal.Title>

更新日志