优化组合的事件内容

src/hooks/eventHandler.hook.ts

@@ -9,7 +9,7 @@ const ceshiFunction = mapFun();
 
 // 交互事件
 export const eventHandlerHook = (
-  comonentList: any,
+  componentList: any,
   interactConfigEvents: any,
   type: string,
   params: any = null,
@@ -24,7 +24,7 @@ export const eventHandlerHook = (
       }
     }
   }
-  for (let i = 0; i < comonentList.length; i++) {
+  for (let i = 0; i < componentList.length; i++) {
     for (let j = 0; j < elementList.length; j++) {
       if (elementList[j].movement == 'newaddress') {
         // 打开新页面
@@ -63,8 +63,8 @@ export const eventHandlerHook = (
       } else if (elementList[j].movement == 'reveal') {
         // 显示
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (comonentList[i].id == elementList[j].elementId[k]) {
-            obj = comonentList[i];
+          if (componentList[i].id == elementList[j].elementId[k]) {
+            obj = componentList[i];
             index = i;
             obj.status.hide = false;
             chartEditStore.updateComponentList(index, obj);
@@ -73,8 +73,8 @@ export const eventHandlerHook = (
       } else if (elementList[j].movement == 'hidden') {
         // 隐藏
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (comonentList[i].id == elementList[j].elementId[k]) {
-            obj = comonentList[i];
+          if (componentList[i].id == elementList[j].elementId[k]) {
+            obj = componentList[i];
             index = i;
             obj.status.hide = true;
             chartEditStore.updateComponentList(index, obj);
@@ -83,7 +83,7 @@ export const eventHandlerHook = (
       } else if (elementList[j].movement == 'map') {
         // 地图事件联动
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (comonentList[i].id == elementList[j].elementId[k]) {
+          if (componentList[i].id == elementList[j].elementId[k]) {
             if (params) {
               ceshiFunction[elementList[j].funName](params);
             } else {
@@ -94,7 +94,7 @@ export const eventHandlerHook = (
       } else if (elementList[j].movement == 'communication') {
         // 组件通信
         for (let k = 0; k < elementList[j].elementId.length; k++) {
-          if (comonentList[i].id == elementList[j].elementId[k]) {
+          if (componentList[i].id == elementList[j].elementId[k]) {
             EventBus.emit(elementList[j].elementId[k] + type, params);
           }
         }

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -73,56 +73,46 @@
       required: true,
     },
   });
-  // 单击交互
-  const clickElementItem = ref([]);
-  // 双击交互
-  const dbclickElementItem = ref([]);
-  // 右击交互
-  const rightclickElementItem = ref([]);
-  // 鼠标移入交互
-  const mouseenterElementItem = ref([]);
-  // 鼠标移出交互
-  const mouseleaveElementItem = ref([]);
 
-  const list = props.groupData.events.interactConfigEvents;
-  for (let i = 0; i < list.length; i++) {
-    if (list[i].type == 'click') {
-      for (let j = 0; j < list[i].movementList.length; j++) {
-        clickElementItem.value.push(list[i].movementList[j]);
-      }
-    } else if (list[i].type == 'dblclick') {
-      for (let j = 0; j < list[i].movementList.length; j++) {
-        dbclickElementItem.value.push(list[i].movementList[j]);
-      }
-    } else if (list[i].type == 'rightclick') {
-      for (let j = 0; j < list[i].movementList.length; j++) {
-        rightclickElementItem.value.push(list[i].movementList[j]);
-      }
-    } else if (list[i].type == 'mousein') {
-      for (let j = 0; j < list[i].movementList.length; j++) {
-        mouseenterElementItem.value.push(list[i].movementList[j]);
-      }
-    } else if (list[i].type == 'mouseout') {
-      for (let j = 0; j < list[i].movementList.length; j++) {
-        mouseleaveElementItem.value.push(list[i].movementList[j]);
-      }
-    }
-  }
-  const clickBtn = () => {
-    eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
+  const clickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.groupData.events.interactConfigEvents,
+      'click',
+      val,
+    );
   };
-  const dblclickBtn = () => {
-    eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
+  const dblclickBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.groupData.events.interactConfigEvents,
+      'dblclick',
+      val,
+    );
   };
   const rightclickBtn = (event) => {
     event.preventDefault(); // 阻止默认的右键菜单
-    eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.groupData.events.interactConfigEvents,
+      'rightclick',
+    );
   };
-  const mouseenterBtn = () => {
-    eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
+  const mouseenterBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.groupData.events.interactConfigEvents,
+      'mousein',
+      val,
+    );
   };
-  const mouseleaveBtn = () => {
-    eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
+  const mouseleaveBtn = (val) => {
+    eventHandlerHook(
+      chartEditStore.getComponentList,
+      props.groupData.events.interactConfigEvents,
+      'mouseout',
+      val,
+    );
   };
 </script>