diff --git a/src/hooks/eventHandler.hook.ts b/src/hooks/eventHandler.hook.ts index dd3704f..d7645cf 100644 --- a/src/hooks/eventHandler.hook.ts +++ b/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); } } diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue index f382480..ed05bca 100644 --- a/src/views/preview/components/PreviewRenderGroup/index.vue +++ b/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, + ); };