From 25368419a36ef346e5835596e44cf3102e2ccb61 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Tue, 1 Feb 2022 00:31:28 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E5=B0=81=E8=A3=85=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/hooks/useContextMenu.hook.ts | 49 ++++++++++++++------
 1 file changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts
index 36baa179..38d93da6 100644
--- a/src/views/chart/hooks/useContextMenu.hook.ts
+++ b/src/views/chart/hooks/useContextMenu.hook.ts
@@ -1,4 +1,4 @@
-import { reactive, ref, nextTick } from 'vue'
+import { ref, nextTick } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { loadingError } from '@/utils'
 
@@ -8,16 +8,38 @@ enum MenuEnum {
   DELETE = 'delete'
 }
 
-export const useContextMenu = () => {
+export interface MenuOptionsItemType {
+  label: string
+  key: MenuEnum
+  fnHandle: Function
+}
+/**
+ * * 右键hook
+ * @param menuOption
+ * @returns
+ */
+export const useContextMenu = (menuOption?: {
+  // 自定义右键配置
+  selfOptions: MenuOptionsItemType[]
+  // 前置处理函数
+  optionsHandle: Function
+}) => {
+  const selfOptions = menuOption?.selfOptions
+  const optionsHandle = menuOption?.optionsHandle
+
   const targetIndex = ref<number>(0)
 
-  // * 右键选项
-  const menuOptions = reactive([
+  // * 默认选项
+  const defaultOptions: MenuOptionsItemType[] = [
     {
       label: '删除',
-      key: MenuEnum.DELETE
+      key: MenuEnum.DELETE,
+      fnHandle: chartEditStore.removeComponentList
     }
-  ])
+  ]
+
+  // * 右键选项
+  const menuOptions: MenuOptionsItemType[] = selfOptions || defaultOptions
 
   // * 右键处理
   const handleContextMenu = (e: MouseEvent, index: number) => {
@@ -43,16 +65,15 @@ export const useContextMenu = () => {
   // * 事件处理
   const handleMenuSelect = (key: string) => {
     chartEditStore.setRightMenuShow(false)
-    switch (key) {
-      case MenuEnum.DELETE:
-        chartEditStore.removeComponentList(targetIndex.value)
-        break
-      default: loadingError()
-    }
+    const targetItem: MenuOptionsItemType[] = menuOptions.filter(
+      (e: MenuOptionsItemType) => e.key === key
+    )
+    if (!targetItem) loadingError()
+    if (targetItem.length) targetItem.pop()?.fnHandle(targetIndex.value)
   }
-
+  console.log(optionsHandle ? optionsHandle(menuOptions) : menuOptions)
   return {
-    menuOptions,
+    menuOptions: optionsHandle ? optionsHandle(menuOptions) : menuOptions,
     handleContextMenu,
     onClickoutside,
     handleMenuSelect,