*nix Programming Mammals

    @beisen/pop-layer

    0.1.36 • Public • Published

    PopLayer 使用说明

    项目简介

    本项目包含提示弹层(http://nature.beisen.co/spec/1.5.2/#p=操作提示) 和确认弹层(http://nature.beisen.co/spec/1.5.2/#p=弹层) 两种类型的弹层。对本项目有任何疑问或建议,欢迎联系~(邮箱:wuzhe@beisen.com)
    

    项目运行

    1. cnpm install 或 npm install
    
    2. npm run dev (开发环境打包、项目启动,默认端口 port:8080)
    
    4. npm run build (生产环境打包)
    

    使用参数

      "hidden": false, //是否使用组件
      "popType": "0",
      /**共2种:为"0"时,是提示弹层;为"1"时,是确认弹层**/
      "infoType": "2",
      /**共6种:为"0"时,是“对号”图标;为"1"时,是“叉号”图标;为"2"时,是“感叹号”图标;为"3"时,是“问号”图标;为"4"时,是“提示i”图标;为"5"时,是“灯泡”图标**/
      "manualClose": true, //为true时手动关闭,false自动关闭,默认false自动关闭
      "disappearTime": "10000", //自动消失时间,输入需要的毫秒数,如‘1000’
      "title": "同一年份只能有一个启用的考勤期间",
      "maxHeight": "", //自定义弹层最大高度,默认为300px
      "showMask": false, //渲染一个透明的遮罩在poplayer下,默认为false
      /**提示的内容**/
      "content": [
      "某某某字段不能填写在某某某字段前,序号",
      " 某字段需大于2",
      "提示巴拉巴拉一堆",
      "第3排职位字段输入信息<a href='https://www.baidu.com'>错误</a>,序号1",
      "工作地点字段为必填项,请完善,序号2",
      "提示巴拉巴拉一堆",
      "提示巴<span style='color:red'>拉巴拉一堆</span>",
      "工作地点字段为必填项,请完善",
      "提示巴拉巴拉一堆",
      "提示巴拉巴拉一堆",
      "提示巴拉巴拉一堆",
      "提示巴拉巴拉一堆",
      "工作地点字段为必填项,请完善,序号工作"],
      /**带内容提示弹层的内容。如果是不带内容的,就是一个空数组**/
        "sureButtonContent": "确定",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为确定
        "cancleButtonContent": "取消",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为取消
        "autoDirection": false, //下拉菜单自适应位置,false时"left-down"
        "direction": "right-down",//弹框位置,默认"left-top"
      /**
        MenuList spread direction,one of:
            1."left-top"
            2."right-top"
            3."left-down"
            4."right-down"
      **/
      "target": "",
      //"left": -260, //弹层显示left位置
      //"top": 21 //弹层显示right位置    

    PopLayer调用方法

    1.安装npm组件包

    npm install @beisen/pop-layer --save-dev
    

    2.引用组件

    import PopLayer from "@beisen/pop-layer"
    

    3.传入参数

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

    class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
          "hidden": false, //是否使用组件
          "popType": "0",
          /**共2种:为"0"时,是提示弹层;为"1"时,是确认弹层**/
          "infoType": "2",
          /**共6种:为"0"时,是“对号”图标;为"1"时,是“叉号”图标;为"2"时,是“感叹号”图标;为"3"时,是“问号”图标;为"4"时,是“提示i”图标;为"5"时,是“灯泡”图标**/
          "manualClose": true, //为true时手动关闭,false自动关闭,默认false自动关闭
          "disappearTime": "10000", //自动消失时间,输入需要的毫秒数,如‘1000’
          "title": "同一年份只能有一个启用的考勤期间",
          "maxHeight": "", //自定义弹层最大高度,默认为300px
          "showMask": false, //渲染一个透明的遮罩在poplayer下,默认为false
          /**提示的内容**/
          "content": [
          "某某某字段不能填写在某某某字段前,序号",
          " 某字段需大于2",
          "提示巴拉巴拉一堆",
          "第3排职位字段输入信息<a href='https://www.baidu.com'>错误</a>,序号1",
          "工作地点字段为必填项,请完善,序号2",
          "提示巴拉巴拉一堆",
          "提示巴<span style='color:red'>拉巴拉一堆</span>",
          "工作地点字段为必填项,请完善",
          "提示巴拉巴拉一堆",
          "提示巴拉巴拉一堆",
          "提示巴拉巴拉一堆",
          "提示巴拉巴拉一堆",
          "工作地点字段为必填项,请完善,序号工作"],
          /**带内容提示弹层的内容。如果是不带内容的,就是一个空数组**/
           "sureButtonContent": "确定",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为确定
           "cancleButtonContent": "取消",//当popType属性为1时(确认弹层),确定按钮内容,默认内容为取消
           "autoDirection": false, //下拉菜单自适应位置,false时"left-down"
           "direction": "right-down",//弹框位置,默认"left-top"
          /**
            MenuList spread direction,one of:
                1."left-top"
                2."right-top"
                3."left-down"
                4."right-down"
          **/
          "target": "",
           onSure:() => {},
           onClose:() => {},
          //"left": -260, //弹层显示left位置
          //"top": 21 //弹层显示right位置      
      }
      this._setProps = this._setProps.bind(this);
      this.onSure = this.onSure.bind(this);
      this.onClose = this.onClose.bind(this);
    }
    // 点击确定按钮触发事件
    onSure(obj) {
      console.log(obj)
    }
    //点击取消按钮触发事件
    onClose(obj) {
      console.log(obj)
    }
    //点击按钮控制poplayer显示
    _setProps() {
      this.state.hidden = !this.state.hidden;
      this.setState(this.state);
    }
    render() {
      return (
        <div style={{"position": "absolute","top": "100px","left": "calc(50% - 170px)"}}>
          <PopLayer {...this.state} showHide={this._setProps} onSure={this.onSure}  onClose={this.onClose} />
          <button onClick={this._setProps} >点我</button>
        </div>
      )
    }
    }
    render(<App />, document.getElementById("content"))

    Install

    npm i @beisen/pop-layer

    DownloadsWeekly Downloads

    128

    Version

    0.1.36

    License

    ISC

    Unpacked Size

    3.06 MB

    Total Files

    231

    Last publish

    Collaborators

    • beisencorp