JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 组件树右键菜单在组件树面板拖出时被面板遮挡

Browse Source 
fix #624
This commit is contained in:
roymondchen 2024-07-25 19:30:50 +08:00
parent 3fa21fd3eb
commit 72a7c151e9
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/editor/src/components/ContentMenu.vue
View File

@ -38,6 +38,8 @@
<script lang="ts" setup>
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
import { useZIndex } from '@tmagic/design';
import { MenuButton, MenuComponent } from '@editor/type';
import ToolButton from './ToolButton.vue';
@ -71,6 +73,8 @@ const buttons = ref<InstanceType<typeof ToolButton>[]>();
const subMenu = ref<any>();
const visible = ref(false);
const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
const zIndex = useZIndex();
const curZIndex = ref<number>(0);
const menuPosition = ref({
left: 0,
@ -80,6 +84,7 @@ const menuPosition = ref({
const menuStyle = computed(() => ({
top: `${menuPosition.value.top}px`,
left: `${menuPosition.value.left}px`,
zIndex: curZIndex.value,
}));
const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
@ -127,13 +132,15 @@ const setPosition = (e: { clientY: number; clientX: number }) => {
};
const show = (e?: { clientY: number; clientX: number }) => {
// 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
// 加setTimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
setTimeout(() => {
visible.value = true;
nextTick(() => {
e && setPosition(e);
curZIndex.value = zIndex.nextZIndex();
emit('show');
});
}, 300);