115 lines
1.8 KiB
TypeScript
115 lines
1.8 KiB
TypeScript
import { Modular, Manager } from "../../core/Module";
|
|
|
|
/**
|
|
* 蒙版事件
|
|
*/
|
|
type IMaskEvent = {
|
|
|
|
/**
|
|
* 蒙版显示事件
|
|
*/
|
|
show: void;
|
|
|
|
/**
|
|
* 蒙版隐藏事件
|
|
*/
|
|
hide: void;
|
|
|
|
/**
|
|
* 蒙版状态改变事件
|
|
*/
|
|
change: boolean;
|
|
|
|
/**
|
|
* 蒙版点击事件
|
|
*/
|
|
click: void;
|
|
}
|
|
|
|
/**
|
|
* 蒙版 Modular
|
|
*/
|
|
class Mask<M extends Manager> extends Modular<M, {}, IMaskEvent> {
|
|
|
|
/**
|
|
* 动画运行时间
|
|
*/
|
|
public static readonly animateTime: number = 100;
|
|
|
|
public data? = {
|
|
|
|
/**
|
|
* 蒙版的层级
|
|
*/
|
|
zIndex: 1,
|
|
|
|
/**
|
|
* 蒙版是否显示
|
|
*/
|
|
isDisplay: false,
|
|
|
|
/**
|
|
* 蒙版是否显示
|
|
*/
|
|
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);
|
|
}
|
|
|
|
/**
|
|
* 显示蒙版
|
|
*/
|
|
private showMask = () => {
|
|
|
|
this.disappearTimer && clearTimeout(this.disappearTimer);
|
|
|
|
this.setData({
|
|
isShow: true,
|
|
isDisplay: true
|
|
});
|
|
|
|
this.emit("change", true);
|
|
}
|
|
|
|
/**
|
|
* 隐藏蒙版
|
|
*/
|
|
private hideMask = () => {
|
|
this.setData({
|
|
isShow: false
|
|
});
|
|
|
|
this.disappearTimer = setTimeout(() => {
|
|
this.setData({
|
|
isDisplay: false
|
|
});
|
|
}, Mask.animateTime);
|
|
|
|
this.emit("change", false);
|
|
}
|
|
|
|
/**
|
|
* 处理蒙版点击事件
|
|
*/
|
|
private handleClickMask() {
|
|
if (this.autoCloseOnClick) this.emit("hide");
|
|
this.emit("click");
|
|
}
|
|
}
|
|
|
|
export { Mask };
|
|
export default Mask; |