JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-18 11:23:39 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 支持多层右键菜单

Browse Source
This commit is contained in:
roymondchen 2023-06-16 20:24:51 +08:00
parent 8ca6b3fbe4
commit 1f5527270c
1 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@
</div> </div>
<teleport to="body"> <teleport to="body">
<content-menu <content-menu
v-if="subMenuData.length"
class="sub-menu" class="sub-menu"
ref="subMenu" ref="subMenu"
:menu-data="subMenuData" :menu-data="subMenuData"
@ -55,6 +56,8 @@ const menuStyle = ref({
top: '0', top: '0',
}); });
const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
const hide = () => { const hide = () => {
if (!visible.value) return; if (!visible.value) return;
@ -69,7 +72,7 @@ const hideHandler = (e: MouseEvent) => {
if (!visible.value || !target) { if (!visible.value || !target) {
return; return;
} }
if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) { if (contains(target)) {
return; return;
} }
hide(); hide();
@ -104,13 +107,15 @@ const showSubMenu = (item: MenuButton | MenuComponent) => {
return; return;
} }
subMenuData.value = menuItem.items; subMenuData.value = menuItem.items || [];
setTimeout(() => {
if (menu.value) { if (menu.value) {
subMenu.value.show({ subMenu.value?.show({
clientX: menu.value.offsetLeft + menu.value.clientWidth, clientX: menu.value.offsetLeft + menu.value.clientWidth,
clientY: menu.value.offsetTop, clientY: menu.value.offsetTop,
}); });
} }
}, 0);
}; };
onMounted(() => { onMounted(() => {
@ -126,7 +131,9 @@ onUnmounted(() => {
}); });
defineExpose({ defineExpose({
menu,
hide, hide,
show, show,
contains,
}); });
</script> </script>