@beisen-cmps/common-pop
Advanced tools
<<<<<<< HEAD
cnpm install 或 npm install cnpm使用教程
npm run dev （开发环境打包 port:8080）
npm run test （测试用例）
npm run build （生产环境打包）
### 修改日志
- 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，与弹层的两侧间距会随弹层宽度增加而增加*/
}
1.安装npm组件包
npm install @beisen/common-pop --save-dev
2.引用组件
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>
)
}
=======
cnpm install 或 npm install cnpm使用教程
npm run dev （开发环境打包 port:8080）
npm run test （测试用例）
npm run build （生产环境打包）
{
/** 头部名称 */
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,
}
1.安装npm组件包
npm install @beisen/common-pop --save-dev
2.引用组件
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 ```
FAQs
平台弹窗组件, 支持传入自定义组件或其他内容
The npm package @beisen-cmps/common-pop receives a total of 1 weekly downloads. As such, @beisen-cmps/common-pop popularity was classified as not popular.
We found that @beisen-cmps/common-pop demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.