bee-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.info
• Modal.success
• Modal.error
• Modal.warning
• Modal.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 |关闭模态框|

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-modal
$ cd bee-modal
$ npm install
$ npm run dev