@beisen-cmps/common-pop
v0.2.96
Published
平台弹窗组件, 支持传入自定义组件或其他内容
Downloads
35
Readme
<<<<<<< HEAD
common-pop 使用说明
项目运行
cnpm install 或 npm install cnpm使用教程
npm run dev （开发环境打包 port:8080）
npm run test （测试用例）
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-dev2.引用组件
import CommonPop from "@beisen/common-pop"传入参数
该组件需要通过一个按钮点击弹出，所以此处模拟一个按钮事件 可以向弹窗中传入一个别的组件来以弹窗的形式显示它， //通过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 使用说明
项目运行
cnpm install 或 npm install cnpm使用教程
npm run dev （开发环境打包 port:8080）
npm run test （测试用例）
npm run build （生产环境打包）
common-pop参数
{
/** 头部名称 */
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:<div />,
/** 是否用弹窗的动效 */
animation: true,
/** 默认default，仅针对BeisenCloud */
popType:'lookup',
/**
* 对于内部滚动条的监控方法回调
*/
handleWheel:(e)=>{ console.log(e); },
/** 拖拽开始 */
handleDragStart: () => { console.log("handleDragStart")},
/** 拖拽进行中 */
handleDraging: () => {},
/** 拖拽结束 */
handleDragStop: () => { console.log("handleDragStop")},
/** 开启监听弹层内容高度变化 */
contentResizeListener: true,
/** 自定义footer */
footerContent: <div><a href='' style={{'position': 'absolute'}}>asdfasdf</a></div>,
/** 设置弹窗内容的样式,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-dev2.引用组件
import CommonPop from "@beisen/common-pop"传入参数
该组件需要通过一个按钮点击弹出，所以此处模拟一个按钮事件 可以向弹窗中传入一个别的组件来以弹窗的形式显示它， //通过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 ```