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

feat(editor): 可选组件按钮只有在可选组件长度大于3时才显示

Browse Source
This commit is contained in:
roymondchen 2023-12-08 17:27:19 +08:00
parent 741140fa71
commit e50e332818
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<TMagicTooltip v-if="page" content="点击查看当前位置下的组件"> <TMagicTooltip v-if="page && buttonVisible" content="点击查看当前位置下的组件">
<div ref="button" class="m-editor-stage-float-button" @click="visible = true">可选组件</div> <div ref="button" class="m-editor-stage-float-button" @click="visible = true">可选组件</div>
</TMagicTooltip> </TMagicTooltip>
<FloatingBox <FloatingBox
v-if="page && nodeStatusMap" v-if="page && nodeStatusMap && buttonVisible"
ref="box" ref="box"
v-model:visible="visible" v-model:visible="visible"
title="当前位置下的组件" title="当前位置下的组件"
@ -36,6 +36,7 @@ const services = inject<Services>('services');
const editorService = services?.editorService; const editorService = services?.editorService;
const visible = ref(false); const visible = ref(false);
const buttonVisible = ref(false);
const button = ref<HTMLDivElement>(); const button = ref<HTMLDivElement>();
const box = ref<InstanceType<typeof FloatingBox>>(); const box = ref<InstanceType<typeof FloatingBox>>();
@ -58,6 +59,9 @@ const unWatch = watch(
stage.on('select', (el: HTMLElement, event: MouseEvent) => { stage.on('select', (el: HTMLElement, event: MouseEvent) => {
const els = stage.renderer.getElementsFromPoint(event) || []; const els = stage.renderer.getElementsFromPoint(event) || [];
const ids = els.map((el) => el.id).filter((id) => Boolean(id)); const ids = els.map((el) => el.id).filter((id) => Boolean(id));
buttonVisible.value = ids.length > 3;
filterTextChangeHandler(ids); filterTextChangeHandler(ids);
}); });