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