fix(component): 修复蒙版组件切换时状态初始化为false的问题

Author: Qiu-Jun

packages/core/plugin/MaskPlugin.ts

@@ -12,7 +12,7 @@ type IEditor = Editor;
 
 class MaskPlugin implements IPluginTempl {
   static pluginName = 'MaskPlugin';
-  static apis = ['setCoverMask', 'workspaceMaskToggle'];
+  static apis = ['setCoverMask', 'workspaceMaskToggle', 'getworkspaceMaskStatus'];
   coverMask: null | fabric.Rect = null;
   workspace: null | fabric.Rect = null;
   workspaceEl!: HTMLElement;
@@ -42,11 +42,18 @@ class MaskPlugin implements IPluginTempl {
       workspaceMask && this.canvas.remove(workspaceMask);
       this.workspace?.clone((cloned: fabric.Rect) => {
         this.canvas.clipPath = cloned;
+        this.coverMask = null;
         this.canvas.requestRenderAll();
       });
       this.editor.off('loadJson', this.initMask);
     }
   }
+  /**
+   * @desc 获取蒙版开关
+   */
+  getworkspaceMaskStatus() {
+    return this.coverMask !== null;
+  }
 
   /**
    * @desc 获取蒙版

src/components/workspaceMask.vue

@@ -22,6 +22,10 @@ const openMask = ref(false);
 const onMaskChange = () => {
   canvasEditor?.workspaceMaskToggle();
 };
+
+onMounted(() => {
+  openMask.value = canvasEditor?.getworkspaceMaskStatus();
+});
 </script>
 
 <style lang="less" scoped>