# @beisen-platform/common-pop > 模式弹层在业务中用于搜集业务信息，例如新建、修改某个对象； 还用于影响全局页面的确认提示 Latest version **1.1.17** (published 2019-10-24) · ISC license · 0 weekly downloads ## Install ```sh npm install @beisen-platform/common-pop pnpm add @beisen-platform/common-pop yarn add @beisen-platform/common-pop bun add @beisen-platform/common-pop ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.17 | | Published | 2019-10-24 | | First published | 2018-11-30 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 238.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | beisen | | Maintainers | beisencorp | ## Links - npm: https://www.npmjs.com/package/@beisen-platform/common-pop - Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-common-pop - npm.io page: https://npm.io/package/@beisen-platform/common-pop ## Dependencies (4) - [react-draggable-3d](https://npm.io/package/react-draggable-3d.md) - [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md) - [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md) - [@beisen/es6-promise-debounce](https://npm.io/package/@beisen/es6-promise-debounce.md) ## Recent versions - 1.1.17 (latest) — 2019-10-24 - 1.1.15-rc.5 — 2019-10-23 - 1.1.15-rc.4 — 2019-10-17 - 1.1.15-rc.3 — 2019-10-17 - 1.1.15-rc.2 — 2019-10-12 - 1.1.15-rc.1 — 2019-10-12 - 1.1.15 — 2019-10-10 - 1.1.14 — 2019-09-27 - 1.1.13 — 2019-09-11 - 1.1.12-rc.1 — 2019-08-21 - 1.1.12 — 2019-08-12 - 1.1.11 — 2019-08-12 - 1.1.10 — 2019-08-06 - 1.1.9 — 2019-07-12 - 1.1.8 — 2019-06-14 - … 31 more at https://npm.io/package/@beisen-platform/common-pop/versions ## README # 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:
asdfasdf
//自定义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" ``` 3. 传入参数 ``` 该组件需要通过一个按钮点击弹出，所以此处模拟一个按钮事件 可以向弹窗中传入一个别的组件来以弹窗的形式显示它， //通过import引入其它组件 // import DemoComponent frome "./xxx" //示例demo class DemoComponent extends Component{ render () { return (
) } } 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 = ; //传入一个已渲染的组件 //PopComponent(需要传入的组件) 该参数可以不定义， let commonPop = this.state.popShow?:""; return (
{commonPop}
) } ======= # common-pop 使用说明 ## 项目运行 1. cnpm install 或 npm install cnpm使用教程 2. npm run dev （开发环境打包 port:8080） 3. npm run test （测试用例） 4. 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:
asdfasdf
, /** 设置弹窗内容的样式,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" ``` 3. 传入参数 ``` 该组件需要通过一个按钮点击弹出，所以此处模拟一个按钮事件 可以向弹窗中传入一个别的组件来以弹窗的形式显示它， //通过import引入其它组件 // import DemoComponent frome "./xxx" //示例demo class DemoComponent extends Component{ render () { return (
) } } 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 = ; //传入一个已渲染的组件 //PopComponent(需要传入的组件) 该参数可以不定义， let commonPop = this.state.popShow?:""; return (
{commonPop}
) } >>>>>>> master ``` --- _Source: https://npm.io/package/@beisen-platform/common-pop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._