npm package: @fekit/react-layer
Description: ``` 适用于react框架的图层管理插件，可用于弹框，Toast等图层功能。 ```
Author: xiaojunbo
Latest version: 1.5.0

# @fekit/react-layer

```
适用于react框架的图层管理插件，可用于弹框，Toast等图层功能。
```

#### 索引

- [演示](#演示)
- [参数](#参数)
- [示例](#示例)
- [动画](#动画)
- [版本](#版本)
- [反馈](#反馈)

#### 演示

- 电脑：[https://fekit.cn/plugins/react-layer/](https://fekit.cn/devices/#page=home&phone=2&browser=0&group=0&guide=0&url=http%3A%2F%2Ffekit.cn%2Fplugins%2Freact-layer%2F)
- 手机：[https://fekit.cn/plugins/react-layer/](https://fekit.cn/plugins/react-layer/)

#### 开始

下载项目:

```npm
npm i @fekit/react-layer
```

#### 参数

```$xslt
  /**
   * key             String            * 弹框维一标识符
   * passCode        String              密码
   * content         React.component   * 内容
   * dark            Number              暗层 0-1
   * pos             String              弹层位置【左上-lt，中上-ct，右上-rt，左中-lm，中中-cm，右中-rm，左下-lb，中下-cb，右下-rb】 默为cm

                                         lt ------ ct ------ rt
                                         |                    |
                                         |                    |
                                         |                    |
                                         lm ------ cm ------ rm
                                         |       默认为cm      |
                                         |                    |
                                         |                    |
                                         lb ------ cb ------ rb

   * autoHide        Boolen              自动隐藏
   * darkClickClose  Boolen              是否点击暗层关闭图层
   * mode            String              模式【覆盖-cover，排队-queue，叠加-stack】
   * cache            String             是否开启缓存
   * animate         String              动画配置，需引入相应的动画主题SCSS
   * on              Object              回调事件集合
   * on.show         Function            显示时执行与cb一样
   * on.hide         Function            隐藏时执行
   * on.empty        Function            图层队列清空时执行
   * cb              Function            显示或隐藏后执行
   */
```

#### 示例

```javascript
// 引入插件
import { LayerById, LayerView } from '@fekit/react-layer';

// 在你的Root组件中或其它页面组件中注册一个或多个图层根容器，每个根容器需要一个维一的ID
<LayerView id="root" />;

// 然后就可以在任何组件中愉快地使用显示隐藏图层了，这是一个最简单的例子
LayerById('root').show({
  key: 'aaa',
  content: <Aaa />,
});

// 这个例子设置了位置“中下”
LayerById('root').show(
  {
    key: 'bbb',
    content: (
      <div class="fekit-touchmove">
        <p>11111111</p>
        <p>11111111</p>
        <p>11111111</p>
        <p>11111111</p>
      </div>
    ),
    pos: 'cb',
    animate: 'ap',
    on: {
      show(a) {
        console.log('显示了');
      },
      hide(a, b) {
        console.log('隐藏了');
      },
    },
  },
  () => {
    console.log('显示了');
  }
);
```

#### 动画

```$xslt

目前可用的动画主题有：
theme/am-view-aa.scss
theme/am-view-ab.scss
theme/am-view-ac.scss
theme/am-view-ad.scss
theme/am-view-ae.scss
theme/am-view-af.scss
theme/am-view-ag.scss
theme/am-view-ah.scss
theme/am-view-ai.scss
theme/am-view-aj.scss
theme/am-view-ak.scss
theme/am-view-al.scss
theme/am-view-am.scss
theme/am-view-an.scss
theme/am-view-ao.scss
theme/am-view-ap.scss
theme/am-view-aq.scss
theme/am-view-ar.scss
theme/am-view-as.scss
theme/am-view-at.scss
```

#### 版本

```$xslt
v1.5.0 [Latest version]
1. 在需要滚动条的div上添加 .fekit-touchmove 可开启滑动
```

```$xslt
v1.4.4
1. 新增一款动画主题 am-view-at
```

```$xslt
v1.4.1
1. 修复一个重要的BUG，在有自动关闭的弹窗关闭时会删除一个队列中的等候弹窗
```

```$xslt
v1.4.0
1. 修复LaylerByKey入参id和key不存在时报错
2. 新增LayerHasKey判断一个图层是否存在
3. 新增on.empty回调，当队列清空时执行
```

```$xslt
v1.3.9
1. 采用TS重构，支持typescript
```

```$xslt
v1.3.5
1. 修复一个回调BUG，当一个弹层正在显示状态时，重新show它时，关闭重开这同一个弹层时的回调报错。
```

```$xslt
v1.3.4 [Latest version]
1. 在Layer插件中导入的content组件内可以写on(){return {show(){},hide(){}}}回调函数
```

```$xslt
v1.3.3
1. 添加 stop="touchmove" 修饰符用于图层内需要touchmove的元素
```

```$xslt
v1.3.2
1. 修复在设置了autoHide时，又手动关闭弹窗后仍然触发autoHide定时器问题
```

```$xslt
v1.3.0
1. 添加LayerByKey获取某个弹窗，以及在任何地方通过LayerByKey('id.key').on.hide.push(()=>{console.log('向这个弹窗添加一个隐藏时的回调事件')})
```

```$xslt
v1.2.4
1. 优化在显示动画和隐藏动画过程中不可点击暗层关闭弹层
```

```$xslt
v1.2.3
1. CSS view=1状态时删除pointer-events: none;样式
```

```$xslt
v1.2.2
1. 源文件打包后再上传NPM
```

```$xslt
v1.1.7
1. 新增两款动画主题
   theme/am-view-aq.scss
   theme/am-view-ar.scss
```

```$xslt
v1.1.6
1. 新增多种模式【覆盖-cover，排队-queue，叠加-stack】
```

...

```$xslt
v1.0.0
1. 核心功能完成。
```

#### 反馈

```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
咚呼: xiaojunbo
EMAIL: xiaojunbo@126.com
```