diff --git a/packages/editor/src/components/ContentMenu.vue b/packages/editor/src/components/ContentMenu.vue index 3bf2bc4e..fb0e8726 100644 --- a/packages/editor/src/components/ContentMenu.vue +++ b/packages/editor/src/components/ContentMenu.vue @@ -6,6 +6,7 @@ ref="menu" :style="menuStyle" @mouseenter="mouseenterHandler()" + @contextmenu.prevent >
@@ -82,8 +83,8 @@ const menuPosition = ref({ }); const menuStyle = computed(() => ({ - top: `${menuPosition.value.top}px`, - left: `${menuPosition.value.left}px`, + top: `${menuPosition.value.top + 2}px`, + left: `${menuPosition.value.left + 2}px`, zIndex: curZIndex.value, })); @@ -98,10 +99,12 @@ const hide = () => { emit('hide'); }; -const clickHandler = () => { +const clickHandler = (event: MouseEvent) => { if (!props.autoHide) return; - hide(); + if (event.button === 0) { + hide(); + } }; const outsideClickHideHandler = (e: MouseEvent) => { @@ -132,18 +135,15 @@ const setPosition = (e: { clientY: number; clientX: number }) => { }; const show = (e?: { clientY: number; clientX: number }) => { - // 加setTimeout是以为,如果菜单中的按钮监听的是mouseup,那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup - setTimeout(() => { - visible.value = true; + visible.value = true; - nextTick(() => { - e && setPosition(e); + nextTick(() => { + e && setPosition(e); - curZIndex.value = zIndex.nextZIndex(); + curZIndex.value = zIndex.nextZIndex(); - emit('show'); - }); - }, 300); + emit('show'); + }); }; const showSubMenu = (item: MenuButton | MenuComponent, index: number) => { @@ -166,7 +166,7 @@ const showSubMenu = (item: MenuButton | MenuComponent, index: number) => { y = rect.top; } subMenu.value?.show({ - clientX: menu.value.offsetLeft + menu.value.clientWidth, + clientX: menu.value.offsetLeft + menu.value.clientWidth - 2, clientY: y, }); } diff --git a/packages/editor/src/components/ToolButton.vue b/packages/editor/src/components/ToolButton.vue index 581a7452..0e83b599 100644 --- a/packages/editor/src/components/ToolButton.vue +++ b/packages/editor/src/components/ToolButton.vue @@ -131,7 +131,8 @@ const mousedownHandler = (item: MenuButton | MenuComponent, event: MouseEvent) = const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => { if (props.eventType !== 'mouseup') return; - if (item.type === 'button') { + + if (item.type === 'button' && event.button === 0) { buttonHandler(item, event); } }; diff --git a/packages/editor/src/editorProps.ts b/packages/editor/src/editorProps.ts index 06508dc6..da78ab1c 100644 --- a/packages/editor/src/editorProps.ts +++ b/packages/editor/src/editorProps.ts @@ -13,6 +13,7 @@ import { getIdFromEl } from '@tmagic/utils'; import type { ComponentGroup, + CustomContentMenuFunction, DatasourceTypeOption, MenuBarData, MenuButton, @@ -93,7 +94,7 @@ export interface EditorProps { /** 用于设置画布上的dom是否可以被拖入其中 */ isContainer?: (el: HTMLElement) => boolean | Promise; /** 用于自定义组件树与画布的右键菜单 */ - customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]; + customContentMenu?: CustomContentMenuFunction; extendFormState?: (state: FormState) => Record | Promise>; /** 页面顺序拖拽配置参数 */ pageBarSortOptions?: PageBarSortOptions; @@ -123,4 +124,5 @@ export const defaultEditorProps = { canSelect: (el: HTMLElement) => Boolean(getIdFromEl()(el)), isContainer: (el: HTMLElement) => el.classList.contains('magic-ui-container'), codeOptions: () => ({}), + customContentMenu: (menus: (MenuButton | MenuComponent)[]) => menus, }; diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue index 64e8bbc0..223aaf88 100644 --- a/packages/editor/src/layouts/sidebar/Sidebar.vue +++ b/packages/editor/src/layouts/sidebar/Sidebar.vue @@ -158,6 +158,7 @@ import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height' import { useFloatBox } from '@editor/hooks/use-float-box'; import { ColumnLayout, + CustomContentMenuFunction, type MenuButton, type MenuComponent, type Services, @@ -185,7 +186,7 @@ const props = withDefaults( layerContentMenu: (MenuButton | MenuComponent)[]; indent?: number; nextLevelIndentIncrement?: number; - customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[]; + customContentMenu: CustomContentMenuFunction; }>(), { data: () => ({ @@ -254,6 +255,7 @@ const getItemConfig = (data: SideItem): SideComponent => { props: { indent: props.indent, nextLevelIndentIncrement: props.nextLevelIndentIncrement, + customContentMenu: props.customContentMenu, }, slots: {}, }, @@ -266,6 +268,7 @@ const getItemConfig = (data: SideItem): SideComponent => { props: { indent: props.indent, nextLevelIndentIncrement: props.nextLevelIndentIncrement, + customContentMenu: props.customContentMenu, }, slots: {}, }, diff --git a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue index 2dc30bf7..37f02257 100644 --- a/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue +++ b/packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue @@ -5,6 +5,7 @@ :indent="indent" :next-level-indent-increment="nextLevelIndentIncrement" @node-click="clickHandler" + @node-contextmenu="nodeContentMenuHandler" >