@fekit/react-layer

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

索引

• 演示
• 参数
• 示例
• 动画
• 版本
• 反馈

演示

• 电脑：https://fekit.cn/plugins/react-layer/
• 手机：https://fekit.cn/plugins/react-layer/

开始

下载项目:

npm i @fekit/react-layer

参数

  /**
   * 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            显示或隐藏后执行
   */

示例

// 引入插件
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('显示了');
  }
);

动画

目前可用的动画主题有：
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

版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

v1.0.0
1. 核心功能完成。

反馈

如果您在使用中遇到问题，请通过以下方式联系我。
咚呼: xiaojunbo
EMAIL: [email protected]