@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]