@beisen-platform/common-pop
模式弹层在业务中用于搜集业务信息,例如新建、修改某个对象; 还用于影响全局页面的确认提示
Last updated 10 months ago by beisencorp .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @beisen-platform/common-pop 
SYNC missed versions from official npm registry.

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
		,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使用教程

  2. npm run dev (开发环境打包 port:8080)

  3. npm run test (测试用例)

  4. 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-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

```

Current Tags

  • 1.1.17                                ...           latest (10 months ago)

46 Versions

  • 1.1.17                                ...           10 months ago
  • 1.1.15-rc.5                                ...           10 months ago
  • 1.1.15-rc.4                                ...           10 months ago
  • 1.1.15-rc.3                                ...           10 months ago
  • 1.1.15-rc.2                                ...           10 months ago
  • 1.1.15-rc.1                                ...           10 months ago
  • 1.1.15                                ...           10 months ago
  • 1.1.14                                ...           10 months ago
  • 1.1.13                                ...           a year ago
  • 1.1.12-rc.1                                ...           a year ago
  • 1.1.12                                ...           a year ago
  • 1.1.11                                ...           a year ago
  • 1.1.10                                ...           a year ago
  • 1.1.9                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.1.7                                ...           a year ago
  • 1.1.6                                ...           a year ago
  • 1.1.5                                ...           a year ago
  • 1.1.4-rc.1                                ...           a year ago
  • 1.1.4                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.34                                ...           a year ago
  • 1.0.33                                ...           a year ago
  • 1.0.32                                ...           a year ago
  • 1.0.31                                ...           a year ago
  • 1.0.30                                ...           a year ago
  • 1.0.29                                ...           a year ago
  • 1.0.27                                ...           a year ago
  • 1.0.26                                ...           a year ago
  • 1.0.25                                ...           a year ago
  • 1.0.21                                ...           a year ago
  • 1.0.19                                ...           2 years ago
  • 1.0.18                                ...           2 years ago
  • 1.0.17                                ...           2 years ago
  • 1.0.16                                ...           2 years ago
  • 1.0.14                                ...           2 years ago
  • 1.0.13                                ...           2 years ago
  • 1.0.11                                ...           2 years ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago

Copyright 2014 - 2017 © taobao.org |