npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fekit/react-layer

v1.5.0

Published

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

Downloads

5

Readme

@fekit/react-layer

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

索引

演示

开始

下载项目:

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]