PopLayer 使用说明

项目简介

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

项目运行

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