# @beisen-platform/pop-layer

Latest version **1.1.20** (published 2019-11-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/pop-layer
pnpm add @beisen-platform/pop-layer
yarn add @beisen-platform/pop-layer
bun add @beisen-platform/pop-layer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.20 |
| Published | 2019-11-14 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 149.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | wuzhe |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/pop-layer
- Repository: git@gitlab.beisen.co:cnpm/PopLayer
- npm.io page: https://npm.io/package/@beisen-platform/pop-layer

## Dependencies (5)

- [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md)
- [@beisen-platform/base-button](https://npm.io/package/@beisen-platform/base-button.md)
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)
- [@beisen-platform/common-mount](https://npm.io/package/@beisen-platform/common-mount.md)

## Recent versions

- 1.1.20 (latest) — 2019-11-14
- 1.1.19 — 2019-11-11
- 1.1.18 — 2019-11-11
- 1.1.17 — 2019-11-11
- 1.1.16 — 2019-11-07
- 1.1.15 — 2019-11-07
- 1.1.14 — 2019-10-29
- 1.1.13 — 2019-10-08
- 1.1.12 — 2019-09-04
- 1.1.11 — 2019-09-04
- 1.1.10 — 2019-07-09
- 1.1.9 — 2019-07-08
- 1.1.8 — 2019-07-03
- 1.1.7 — 2019-06-17
- 1.1.6 — 2019-06-12
- … 15 more at https://npm.io/package/@beisen-platform/pop-layer/versions

## README

# 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 （生产环境打包）
```  
## 使用参数  
```javascript  
  "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.传入参数

  该参数为上述参数，传入方式使用: {...参数}
  ```javascript
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": "",
        //"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"))
  ```

---
_Source: https://npm.io/package/@beisen-platform/pop-layer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._