fix: 修改右键封装逻辑

This commit is contained in:
MTrun 2022-02-01 00:31:28 +08:00
parent 47456fb801
commit c92510863f

View File

@ -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,