@beisen-platform/common-pop

模式弹层在业务中用于搜集业务信息,例如新建、修改某个对象; 还用于影响全局页面的确认提示

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@beisen-platform/common-pop
1.1.174 years ago5 years agoMinified + gzip package size for @beisen-platform/common-pop in KB

Readme

common-pop 使用说明

项目运行

  1. cnpm install 或 npm install cnpm使用教程
  1. npm run dev (开发环境打包 port:8080)
  1. npm run test (测试用例)
  1. 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
,closePop: () => {} //点击关闭按钮回调
,submitPop: () => {} //点击确定按钮回调
//,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>
)
}
=======
common-pop 使用说明

项目运行

  1. cnpm install 或 npm install cnpm使用教程
  1. npm run dev (开发环境打包 port:8080)
  1. npm run test (测试用例)
  1. npm run build (生产环境打包)

common-pop参数

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

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