# CommonPop 使用说明

## 项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

## CommonPop参数

```

const PopData = {
	'title':"弹窗"		//头部名称
	,"hasHeader":true	//是否显示头部
	,"hasFooter":true //是否显示底部，含有确定取消按钮
	,"dataType":"component"  //string 字符串 component 组件
	,"data":"确定要删除吗？"		//需要传入引入组件的数据
	,"hidden":false  	//隐藏弹窗
	,"hasRender":true  //传入的组件是否已渲染，只有当dateType为component时有效
	,"animation":false //是否使用弹窗自带的动画特效 默认为true ，无该参数或值为true则使用弹窗特效
	,"ClosePop":true   //当点击非弹窗地方时是否关闭弹窗
	,"style":{   //设置弹窗内容的样式
		"maxWidth":"100px"
		,"maxHeight":"100px"
	}
}

```

## CommonPop调用方法

1. 引用组件

	```
	import CommonPop from "./src/index"
	```
2. 传入参数

	该参数为上述参数，传入方式使用: data={参数}
	```
	该组件需要通过一个按钮点击弹出，所以此处模拟一个按钮事件

	可以向弹窗中传入一个别的组件来以弹窗的形式显示它，

	//通过import引入其它组件
	// import DemoComponent frome "./xxx"

	//示例demo
	class DemoComponent extends Component{

	  render () {
	    return (
	      <div style={{"width":"1000px","height":"200px"}}>
	      	<input ref='testInput' onChange={::this.inputChange}/>
	      	<button onClick={::this.submit} />
	      </div>
	    )
	  }
	}

	state= {
	    "popShow":false

	}

	handelClick(){
		this.setState({popShow:true})
	}

	//closebtn 回调
	closePop(e){
		console.log(e);
		this.setState({popShow:false});
	}

	//确定按钮回调
	submitPop(e){
		console.log(e);
		this.setState({popShow:false});
	}

	render () {
		let testComponent =  <DemoComponent />; //传入一个已渲染的组件

		//PopComponent(需要传入的组件) 该参数可以不定义，
		let commonPop = this.state.popShow?<CommonPop {...PopData} PopComponent={component} submitPop={::this.submitPop} closePop={::this.closePop}/>:"";
		return (
			<div>
				<button onClick={::this.handelClick}></button>
				{commonPop}
			</div>
		)
	}
	```