fix(editor): 组件树右键菜单支持多选

This commit is contained in:
roymondchen 2023-06-26 16:57:11 +08:00
parent 91e4680024
commit 1660e941d7
2 changed files with 9 additions and 4 deletions

View File

@ -22,6 +22,7 @@ const props = defineProps<{
const services = inject<Services>('services'); const services = inject<Services>('services');
const menu = ref<InstanceType<typeof ContentMenu>>(); const menu = ref<InstanceType<typeof ContentMenu>>();
const node = computed(() => services?.editorService.get('node')); const node = computed(() => services?.editorService.get('node'));
const nodes = computed(() => services?.editorService.get('nodes'));
const isRoot = computed(() => node.value?.type === NodeType.ROOT); const isRoot = computed(() => node.value?.type === NodeType.ROOT);
const isPage = computed(() => node.value?.type === NodeType.PAGE); const isPage = computed(() => node.value?.type === NodeType.PAGE);
const componentList = computed(() => services?.componentListService.getList() || []); const componentList = computed(() => services?.componentListService.getList() || []);
@ -82,7 +83,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
type: 'button', type: 'button',
text: '新增', text: '新增',
icon: markRaw(Plus), icon: markRaw(Plus),
display: () => node.value?.items, display: () => node.value?.items && nodes.value?.length === 1,
items: getSubMenuData.value, items: getSubMenuData.value,
}, },
{ {
@ -91,7 +92,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
icon: markRaw(CopyDocument), icon: markRaw(CopyDocument),
display: () => !isRoot.value, display: () => !isRoot.value,
handler: () => { handler: () => {
node.value && services?.editorService.copy(node.value); node.value && services?.editorService.copy(nodes.value || []);
}, },
}, },
{ {
@ -100,7 +101,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
icon: markRaw(Delete), icon: markRaw(Delete),
display: () => !isRoot.value && !isPage.value, display: () => !isRoot.value && !isPage.value,
handler: () => { handler: () => {
node.value && services?.editorService.remove(node.value); node.value && services?.editorService.remove(nodes.value || []);
}, },
}, },
...props.layerContentMenu, ...props.layerContentMenu,

View File

@ -350,7 +350,11 @@ const clickHandler = (data: MNode): void => {
// //
const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => { const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
event.preventDefault(); event.preventDefault();
if (nodes.value.length < 2) {
await select(data); await select(data);
}
menu.value?.show(event); menu.value?.show(event);
}; };
</script> </script>