@beisen/CommonPop

CommonPop 使用说明

项目运行

• cnpm install 或 npm install cnpm使用教程

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

• npm run test （测试用例）

• 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调用方法

• 引用组件

  import CommonPop from "./src/index"
  

• 传入参数

  该参数为上述参数，传入方式使用: 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>
  	)
  }