Merge pull request '(#35)Add mask modular event.' (#55) from dev-mrkbear into master

Reviewed-on: http://git.mrkbear.com/MrKBear/mini-dlpu-v3/pulls/55

miniprogram/modular/Mask/Mask.ts

@@ -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);
+
+        this.emit("change", false);
 	}
 
-	public override onLoad() {
-		this.setFunc(this.handleClickMask, "handleClickMask");
-        // Do something
-    }
-
+    /**
+     * 处理蒙版点击事件
+     */
 	private handleClickMask() {
-		this.hideMask();
+		if (this.autoCloseOnClick) this.emit("hide", void 0);
+        this.emit("click", void 0);
 	}
 }
 

miniprogram/pages/Account/UserCard.ts

@@ -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);
     }
 }