@beisen/CommonPop

CommonPop 使用说明

项目运行

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

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

3. npm run test （测试用例）

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

安装npm组件包

npm install @beisen/CommonPop --save-dev

参数

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"
   
   //组件中需要定义的回调，当点击确定按钮/关闭按钮，或者非按钮类时
   /*
   	this.props.getAllValue && this.props.getAllValue({
   		value:this.refs.testInput.value  //需要回调的值
   		,status:"submit"			//参数类型 submit 提交按钮 ，close 关闭按钮 ，null 非按钮类
   	});
   */
   
   //示例demo
   class DemoComponent extends Component{
   
   	static contextTypes = {
       commonPopSubmit:PropTypes.func.isRequired  //弹窗的确定动画
       ,commonPopCancel:PropTypes.func.isRequired  //弹窗的取消动画
     }
   
   	inputChange(e){
   		/*如果组件内没有确定或取消按钮时，需要使用CommonPop的自定义按钮
   			当input框内值变化时抛出
   		*/
   		this.props.getAllValue({
   			value:e.target.value  //回调值
   			,status:null
   		})
   	}
   	
   	submit(){
   
   		/*当组件内有确定或取消按钮时的回调参数
   			将所有值处理好后传入
   			value:allValue
   		*/
   		this.context.commonPopSubmit && this.context.commonPopSubmit(); //带有动画效果的关闭弹窗
   		this.props.getAllValue({
   			value:this.refs.testInput.value  //需要回调的值
   			,status:"submit"			//参数类型 submit 提交 ，close 关闭
   		});
   	}
   
     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>
   	)
   }