@beisen/CommonPop

    0.1.71 • Public • Published

    CommonPop 使用说明

    项目运行

    1. cnpm install 或 npm install cnpm使用教程

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

    3. npm run test (测试用例)

    4. npm run build (生产环境打包)

    CommonPop参数

    
    const PopData = {
        'title':"弹窗"		//头部名称
        ,"hasHeader":true	//是否显示头部
        ,"hasFooter":true //是否显示底部,含有确定取消按钮
        ,"dataType":"component"  //string 字符串 component 组件
        ,"data":"确定要删除吗?"		//需要传入引入组件的数据
        ,"hidden":false  	//隐藏弹窗
        ,"hasRender":true  //传入的组件是否已渲染,只有当dateType为component时有效
        ,"animation":false //是否使用弹窗自带的动画特效 默认为true ,无该参数或值为true则使用弹窗特效
        ,"ClosePop":true   //当点击非弹窗地方时是否关闭弹窗
        ,"style":{   //设置弹窗内容的样式
            "maxWidth":"100px"
            ,"maxHeight":"100px"
        }
    }
    
    

    CommonPop调用方法

    1. 引用组件

      import CommonPop from "./src/index"
      
    2. 传入参数

      该参数为上述参数,传入方式使用: data={参数}

      该组件需要通过一个按钮点击弹出,所以此处模拟一个按钮事件
      
      可以向弹窗中传入一个别的组件来以弹窗的形式显示它,
      
      //通过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={component} submitPop={::this.submitPop} closePop={::this.closePop}/>:"";
          return (
              <div>
                  <button onClick={::this.handelClick}></button>
                  {commonPop}
              </div>
          )
      }
      

    Install

    npm i @beisen/CommonPop

    DownloadsWeekly Downloads

    13

    Version

    0.1.71

    License

    ISC

    Last publish

    Collaborators

    • beisencorp