@beisen/common-pop

common-pop 使用说明

项目运行

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

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

3. npm run test （测试用例）

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

common-pop参数

### 修改日志

  - 2017年2月24日增加 对于内部滚动条的监控方法回调
  ,handleWheel:function(e){
    console.log(e);
  }


const PopData = {
    title: "弹窗" //头部名称
    ,hasHeader: true //是否显示头部
    ,hasFooter: true //是否显示底部，含有确定取消按钮
    ,dataType: "component" //string 字符串 component 组件
    ,data: "确定要删除吗？" //需要传入引入组件的数据
    ,dragDisabled:false //是否可以拖拽弹窗，默认true为禁止拖拽，false为未禁用拖拽
    ,grid:[5,5]  //每次拖拽移动的最小距离，默认 [1, 1]
    ,hidden: false //隐藏弹窗
    ,hasRender: false // 传入的组件是否已渲染，只有当dateType为component时有效
    ,animation: true //是否用弹窗的动效
    //,popType:'lookup' //默认default，仅针对BeisenCloud
    ,handleWheel:function(e){  //弹窗内滚动条滚动事件
      // console.log(e);
    }
		,handleDragStart: () => { console.log("handleDragStart")}  //拖拽开始
    ,handleDraging: () => {}   //拖拽进行中
    ,handleDragStop: () => { console.log("handleDragStop")}  //拖拽结束
    ,contentResizeListener: true //开启监听弹层内容高度变化
    ,footerContent: <div><a href='' style={{'position': 'absolute'}}>asdfasdf</a></div> //自定义footer
    ,customStyle: {'zIndex': '100000'} //设置弹窗内容的样式,modal-pop最外层节点的style
    ,bodyMask:true  //遮罩插入的位置，为true时遮罩将插在body上
    ,subBtnShow: true //默认为true
    ,subBtnText: "" //默认为确定
    ,subBtnDisabled: false  //确定按钮禁用
    ,cloBtnShow: true //默认为true
    ,cloBtnText: "取消取消" //默认为取消
    ,cloBtnDisabled: false  //取消按钮禁用
    ,showMask: true //是否显示遮罩,默认为true
		,simpleEdition: false //是否使用简版弹窗
    ,showHeaderClose: true  //是否渲染头部关闭按钮
		,closePop: () => {} //点击关闭按钮回调
		,submitPop: () => {} //点击确定按钮回调
		,preSubmit: () => { return false } // 点击确定按钮前会调用的方法，非必须
    ,preCancel: () => { return false } //点击取消按钮前调用的方法，非必须
    //,isLRAlign:true  //仅针对BeisenCloud /*是否是左右对齐方式   1、左／右对齐表单项：与弹层的左右间距为20px，中间内容在弹层内自适应
              //        2、顶对齐表单项：内容宽度固定为520px，与弹层的两侧间距会随弹层宽度增加而增加*/
  } 

CommonPop调用方法

1.安装npm组件包

npm install @beisen/common-pop --save-dev

2.引用组件

import CommonPop from "@beisen/common-pop"

1. 传入参数

   该组件需要通过一个按钮点击弹出，所以此处模拟一个按钮事件
   
   可以向弹窗中传入一个别的组件来以弹窗的形式显示它，
   
   //通过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={testComponent} submitPop={::this.submitPop} closePop={::this.closePop}/>:"";
   	return (
   		<div>
   			<button onClick={::this.handelClick}></button>
   			{commonPop}
   		</div>
   	)
   }