diff --git a/miniprogram/modular/Mask/Mask.ts b/miniprogram/modular/Mask/Mask.ts index b457453..692cac0 100644 --- a/miniprogram/modular/Mask/Mask.ts +++ b/miniprogram/modular/Mask/Mask.ts @@ -1,6 +1,35 @@ import { Modular, Manager } from "../../core/Module"; -class Mask extends Modular { +/** + * 蒙版事件 + */ +type IMaskEvent = { + + /** + * 蒙版显示事件 + */ + show: void; + + /** + * 蒙版隐藏事件 + */ + hide: void; + + /** + * 蒙版状态改变事件 + */ + change: boolean; + + /** + * 蒙版点击事件 + */ + click: void; +} + +/** + * 蒙版 Modular + */ +class Mask extends Modular { /** * 动画运行时间 @@ -25,22 +54,41 @@ class Mask extends Modular { 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 extends Modular { 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); } } diff --git a/miniprogram/pages/Account/UserCard.ts b/miniprogram/pages/Account/UserCard.ts index 70aa8d1..aa67f22 100644 --- a/miniprogram/pages/Account/UserCard.ts +++ b/miniprogram/pages/Account/UserCard.ts @@ -5,7 +5,15 @@ type IUserCardDependent = { mask: Mask } -class UserCard extends Modular> { +type IUserCardEvent = { + + /** + * 主题更换按钮点击事件 + */ + clickChangeTheme: void; +} + +class UserCard extends Modular, IUserCardEvent> { public override onLoad() { this.setFunc(this.handleChangeTheme, "changeTheme") @@ -15,7 +23,8 @@ class UserCard extends Modular> { * 处理主题更换 */ private handleChangeTheme() { - this.depends?.mask.showMask(); + this.depends?.mask.emit("show", void 0); + this.emit("clickChangeTheme", void 0); } }