@beisen/CommonPop

CommonPop

Stats

StarsIssuesVersionUpdatedCreatedSize
@beisen/CommonPop
0.1.715 years ago5 years agoMinified + gzip package size for @beisen/CommonPop in KB

Readme

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>
        )
    }
    

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.