@beisen/CommonPop

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>
   	)
   }