tinper-beebee-modal
Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 9+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
react bee-modal component for tinper-bee
模态框组件
使用方法
import Modal from 'bee-modal';
class ModalDemo extends Component {
constructor(props) {
super(props);
this.state = {
showModal: false
};
this.close = this.close.bind(this);
this.open = this.open.bind(this);
}
close() {
this.setState({ showModal: false });
}
open() {
this.setState({ showModal: true });
}
render () {
return (
<div>
<Button color="primary" size="large" onClick={this.open}>
点击打开模态框
</Button>
<Modal show = {
this.state.showModal
}
onHide = {
this.close
}>
<Modal.Header>
<Modal.Title>标题</Modal.Title>
</Modal.Header>
<Modal.Body>
正文描述。。。
</Modal.Body>
<Modal.Footer>
<Button>关闭</Button>
<Button color="primary">确认</Button>
</Modal.Footer>
</Modal>
</div>
)
}
}
);
ReactDOM.render(
<ModalDemo />
, document.getElementById('target'));样式引入
- 可以使用link引入build目录下Modal.css
<link rel="stylesheet" href="./node_modules/bee-modal/build/Modal.css"> - 可以在js中import样式
import "./node_modules/bee-modal/src/Modal.scss" //或是 import "./node_modules/bee-modal/build/Modal.css"
API
Modal
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| backdrop | 是否弹出遮罩层 | boolean | true |
| backdropClosable | 遮罩层点击是否触发关闭 | boolean | true |
| keyboard | esc触发关闭 | boolean | - |
| animation | 显隐时是否使用动画 | boolean | true |
| dialogComponentClass | 传递给模态框使用的元素 | string/element | - |
| dialogClassName | 传递给模态框的样式 | class | - |
| autoFocus | 自动设置焦点 | boolean | true |
| enforceFocus | 防止打开时焦点离开模态框 | boolean | true |
| show | 是否打开模态框 | boolean | - |
| width | 模态框宽度，如只传数字则会拼接默认单位 px。例如 100px/100/100%/100rem/100em |
string/number | - |
| onHide | 关闭时的钩子函数 | function | - |
| size | 模态框尺寸 | sm/lg/xlg | - |
| width | 自定义模态框尺寸 | string/number | - |
| onEnter | 开始显示时的钩子函数 | function | - |
| onEntering | 显示时的钩子函数 | function | - |
| onEntered | 显示完成后的钩子函数 | function | - |
| onExit | 隐藏开始时的钩子函数 | function | - |
| onExiting | 隐藏进行时的钩子函数 | function | - |
| onExited | 隐藏结束时的钩子函数 | function | - |
| container | 容器 | DOM元素\React组件\或者返回React组件的函数 | - |
| onShow | 当模态框显示时的钩子函数 | function | - |
| renderBackdrop | 返回背景元素的函数 | function | - |
| onEscapeKeyUp | 响应ESC键时的钩子函数 | function | - |
| onBackdropClick | 点击背景元素的函数 | function | - |
| backdropStyle | 添加到背景元素的style | object | - |
| backdropClassName | 添加到背景元素的class | string | - |
| transition | 动画组件 | function | - |
| dialogTransitionTimeout | 设置动画超时时间 | function | - |
| backdropTransitionTimeout | 设置背景动画超时时间 | function | - |
| manager | 管理模态框状态的组件 | required | - |
| draggable | 设置模态框是否可拖拽 | bool | false |
| resizable | 设置模态框是否可resize | bool | false |
| resizeClassName | 设置拖拽dom的class名称 | string | - |
| onResizeStart | resize开始时的回调 | function | - |
| onResize | resize时的回调 | function | - |
| onResizeStop | resize结束时的回调 | function | - |
| minWidth | resize时模态框的最小宽度 | number/string | 200 |
| minHeight | resize时模态框的最小高度 | number/string | 150 |
| maxWidth | resize时模态框的最大宽度 | number/string | - |
| maxHeight | resize时模态框的最大高度 | number/string | - |
Modal.Header
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| closeButton | 是否显示关闭按钮 | boolean | false |
Modal.method()
包括：
Modal.infoModal.successModal.errorModal.warningModal.confirm
以上均为一个函数，参数为 object，具体属性如下：
|参数|说明|类型|默认值|
|:---|:-----|:----|:------|
|cancelText|取消按钮文字|string|取消|
|okText|确认按钮文字|string|确定|
|okType|确认按钮类型，取值范围(primary/secondary/success/info/warning/danger/dark/light)|string|primary|
|title|标题|string/ReactNode|-|
|content|内容|string/ReactNode|-|
|className|容器类名|string|-|
|icon|自定义图标|ReactNode|<Icon type="uf-qm-c"/>|
|backdrop|是否弹出遮罩层/点击遮罩层是否触发关闭|boolean/"static"|true|
|width|宽度|string/number|400|
|onCancel|取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭|function|-|
|onOk|点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭|function|-|
以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。
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(); });
## 已支持的键盘操作
|按键|功能|
|:---|:----|
|esc |关闭模态框|
#### 开发调试
```sh
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-modal
$ cd bee-modal
$ npm install
$ npm run dev