miniprogram/modular/PopupLayer.ts

@@ -2,56 +2,11 @@ import { IAnyData } from "core/Api";
 import { Emitter } from "core/Emitter";
 import { Modular, Manager } from "../core/Module";
 
-/**
- * 动画类型
- */
-enum AnimateType {
-    fade = 1,
-    scale = 2,
-    none = 3,
-}
-
 /**
  * 显示层
  */
 class DisplayLayer {
 
-    /**
-     * 类名
-     */
-    public get className(): string {
-        let res = this.isDisplay ? "block" : "none";
-
-        switch (this.animateType) {
-            case AnimateType.fade:
-                res += " mask";
-                break;
-
-            case AnimateType.scale:
-                res += " layer";
-                break;
-
-            case AnimateType.none:
-                res += " occlude";
-                break;
-        }
-
-        switch (this.animateType) {
-            case AnimateType.fade:
-                res += this.isShow ? " show-fade" : " hide-fade";
-                break;
-
-            case AnimateType.scale:
-                res += this.isShow ? " show-scale" : " hide-scale";
-                break;
-
-            case AnimateType.none:
-                break;
-        }
-
-        return res;
-    }
-
 	/**
 	 * Layer 使用的 key
 	 */
@@ -60,21 +15,7 @@ class DisplayLayer {
 	/**
 	 * 使用的动画类型
 	 */
-	public animateType: AnimateType = AnimateType.scale;
+	public animateTime: number = 300;
-
-    /**
-     * 动画时间
-     */
-    public get animateTime(): number {
-        switch (this.animateType) {
-            case AnimateType.fade:
-                return 100;
-            case AnimateType.scale:
-                return 300;
-            case AnimateType.none:
-                return -1;
-        }
-    };
 	
 	/**
 	 * 是否显示
@@ -148,16 +89,6 @@ class PopupLayer<
 	 */
 	private layers: Map<L | commonLayerType, DisplayLayer> = new Map();
 
-    /**
-     * 初始化层
-     * @param key 初始化关键字
-     */
-    public initLayers(key: L[]) {
-        for (let i = 0; i < key.length; i++) {
-            this.render(this.getDisplayLayer(key[i]));
-        }
-    }
-
 	public onLoad(): void {
 		this.on("show", this.handleShowLayer);
 		this.on("hide", this.handleHideLayer);
@@ -165,20 +96,11 @@ class PopupLayer<
 
         // 添加蒙版层
         const maskLayer = this.getDisplayLayer("mask");
-        maskLayer.animateType = AnimateType.fade;
+        maskLayer.animateTime = 100;
-        this.render(maskLayer);
 
         // 添加遮蔽层
         const occludeLayer = this.getDisplayLayer("occlude");
-        occludeLayer.animateType = AnimateType.none;
+        occludeLayer.animateTime = -1;
-        this.render(occludeLayer);
-	}
-
-    /**
-     * 渲染 Layers
-     */
-    private render(layer: DisplayLayer) {
-        this.setData({ [`${ layer.key }$className`]: layer.className });
 	}
 
 	/**
@@ -239,7 +161,10 @@ class PopupLayer<
 
         displayLayer.isShow = true;
         displayLayer.isDisplay = true;
-        this.render(displayLayer);
+		this.setData({ 
+            [`${ e }$isShow`]: true,
+            [`${ e }$isDisplay`]: true
+        });
 
         this.emit("change", displayLayer);
 	};
@@ -257,11 +182,16 @@ class PopupLayer<
 
             displayLayer.isShow = false;
             displayLayer.isDisplay = false;
-            this.render(displayLayer);
+            this.setData({ 
+                [`${ e }$isShow`]: false,
+                [`${ e }$isDisplay`]: false
+            });
         } else {
 
             displayLayer.isShow = false;
-            this.render(displayLayer);
+            this.setData({ 
+                [`${ e }$isShow`]: false 
+            });
 
             // 开启遮蔽
             if (this.showOccludeWhenHide) {
@@ -270,7 +200,9 @@ class PopupLayer<
 
             displayLayer.disappearTimer = setTimeout(() => {
                 displayLayer.isDisplay = false;
-                this.render(displayLayer);
+                this.setData({ 
+                    [`${ e }$isDisplay`]: false
+                });
 
                 // 取消 timer
                 displayLayer.disappearTimer = undefined;

miniprogram/pages/Account/Account.ts

@@ -17,7 +17,7 @@ import { TestLayerA } from "./TestLayerA";
     const userCard = manager.addModule(UserCard, "userCard");
 
     //#region test layer
-    popupLayer.initLayers(["layerA", "layerB"]);
+    // popupLayer.hideOtherWhenShow = false;
     const testLayerA = manager.addModule(TestLayerA, "testLayerA");
     userCard.on("clickChangeTheme", () => {
         popupLayer.emit("show", "layerA");

miniprogram/pages/Account/Account.wxml

@@ -1,16 +1,16 @@
 <!-- 层遮蔽层 -->
-<view class="{{ mask$occlude$className }}" bindtap="mask$clickMask"></view>
+<view class="occlude {{  mask$occlude$isShow ? 'show-fade' : 'hide-fade' }} {{ mask$occlude$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask"></view>
 
 <!-- 蒙版 -->
-<view class="{{ mask$mask$className }}" bindtap="mask$clickMask"></view>
+<view class="mask {{  mask$mask$isShow ? 'show-fade' : 'hide-fade' }} {{ mask$mask$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask"></view>
 
 <!-- 层A -->
-<view class="{{ mask$layerA$className }}" bindtap="mask$clickMask">
+<view class="layer {{  mask$layerA$isShow ? 'show-scale' : 'hide-scale' }} {{ mask$layerA$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask">
     <view class="card" style="height: 300px; line-height: 300px; text-align:center" catchtap="testLayerA$click">layerA(点击显示layerB)</view>
 </view>
 
 <!-- 层B -->
-<view class="{{ mask$layerB$className }}" bindtap="mask$clickMask">
+<view class="layer {{  mask$layerB$isShow ? 'show-scale' : 'hide-scale' }} {{ mask$layerB$isDisplay ? 'block' : 'none' }}" bindtap="mask$clickMask">
     <view class="card" style="height: 200px; line-height: 200px; text-align:center" catchtap>layerB</view>
 </view>