0.0.7 • Published 8 years ago
vj-modal v0.0.7
vj-modal
简单的模态框
安装
$ npm i vj-modal -SAPI
Modal props
| name | description | type | default | since |
|---|---|---|---|---|
| className | vj-modal的class | String | - | 0.0.5 |
| style | vj-modal的style | Object | {} | 0.0.5 |
| visible | 控制模态框显示还是隐藏的参数 | bool | false | 0.0.5 |
| width | 模态框的宽 | Number/String(String的支持从0.0.6开始) | 600 | 0.0.5 |
| closeBtnClass | 关闭按钮的class | String | - | 0.0.6 |
| showCloseBtn | 是否显示模态框右上角的关闭按钮 | bool | false | 0.0.5 |
| mark | 是否显示遮罩层 | bool | true | 0.0.5 |
| title | 模态框的标题 | String/React Node | - | 0.0.5 |
| btnSize | 模态框底部的按钮大小 | String('small'/'default') | 'default' | 0.0.5 |
| btnText | 模态框底部的按钮文字(根据数组的长度，显示个数(1-2) | String[] | '确认', '取消' | 0.0.5 |
| btnClass | 模态框底部第一个按钮的class | String | - | 0.0.5 |
| btnStyle | 模态框底部第一个按钮的style | Object | {} | 0.0.5 |
| onOk | 点击确认按钮后的回调(当该属性出现在props中时，底部按钮会自动出现) | func | - | 0.0.5 |
| onClose | 关闭模态框的方法 | func | - | 0.0.5 |
| callback | 关闭模态框后的回调 | func | - | 0.0.5 |
模态框的高是自适应的,居中显示，超出滚动！
示例
一个简单的弹框示例
import React, { Component } from 'react';
import Modal from 'vj-modal'; // 引入
class Example extends Component {
constructor(props) {
super(props);
this.state = {
visible: false
};
};
handleClose = () => {
this.setState({
visible: false
});
};
render() {
const { visible } = this.state;
return (
<div>
<button onClick={() => this.setState({visible:true})}>点我显示弹框</button>
<Modal
visible={visible}
onClose={this.handleClose}
>
我是弹框
</Modal>
</div>
);
};
};
export default Example;