(#35)Add mask modular event.

This commit is contained in:
2022-01-21 10:38:37 +08:00
parent 96b3414d22
commit 58d8d74158
2 changed files with 70 additions and 12 deletions
+59 -10
View File
@@ -1,6 +1,35 @@
import { Modular, Manager } from "../../core/Module";
class Mask<M extends Manager> extends Modular<M> {
/**
* 蒙版事件
*/
type IMaskEvent = {
/**
* 蒙版显示事件
*/
show: void;
/**
* 蒙版隐藏事件
*/
hide: void;
/**
* 蒙版状态改变事件
*/
change: boolean;
/**
* 蒙版点击事件
*/
click: void;
}
/**
* 蒙版 Modular
*/
class Mask<M extends Manager> extends Modular<M, {}, IMaskEvent> {
/**
* 动画运行时间
@@ -25,22 +54,41 @@ class Mask<M extends Manager> extends Modular<M> {
isShow: false
};
/**
* 当点击时是否自动关闭蒙版
*/
public autoCloseOnClick: boolean = true;
/**
* 消失动画计时器
*/
private disappearTimer?: number;
public override onLoad() {
this.setFunc(this.handleClickMask, "handleClickMask");
this.on("show", this.showMask);
this.on("hide", this.hideMask);
}
/**
* 显示蒙版
*/
public showMask() {
private showMask = () => {
this.disappearTimer && clearTimeout(this.disappearTimer);
this.setData({
isShow: true,
isDisplay: true
});
this.emit("change", true);
}
/**
* 隐藏蒙版
*/
public hideMask() {
private hideMask = () => {
this.setData({
isShow: false
});
@@ -50,15 +98,16 @@ class Mask<M extends Manager> extends Modular<M> {
isDisplay: false
});
}, Mask.animateTime);
}
public override onLoad() {
this.setFunc(this.handleClickMask, "handleClickMask");
// Do something
}
this.emit("change", false);
}
/**
* 处理蒙版点击事件
*/
private handleClickMask() {
this.hideMask();
if (this.autoCloseOnClick) this.emit("hide", void 0);
this.emit("click", void 0);
}
}
+11 -2
View File
@@ -5,7 +5,15 @@ type IUserCardDependent<M extends Manager> = {
mask: Mask<M>
}
class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>> {
type IUserCardEvent = {
/**
* 主题更换按钮点击事件
*/
clickChangeTheme: void;
}
class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>, IUserCardEvent> {
public override onLoad() {
this.setFunc(this.handleChangeTheme, "changeTheme")
@@ -15,7 +23,8 @@ class UserCard<M extends Manager> extends Modular<M, IUserCardDependent<M>> {
* 处理主题更换
*/
private handleChangeTheme() {
this.depends?.mask.showMask();
this.depends?.mask.emit("show", void 0);
this.emit("clickChangeTheme", void 0);
}
}