vj-modal

简单的模态框

安装

$ npm i vj-modal -S

API

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;