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

feat(editor): 组件选择器点击已选择组件由重新选择改成选择组件

Browse Source
This commit is contained in:
roymondchen 2023-07-07 17:10:51 +08:00
parent ee3ad63aa3
commit 07cd3065b2
1 changed files with 37 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/editor/src/fields/UISelect.vue
View File

@ -2,12 +2,26 @@
<div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler"> <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
<TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton> <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
</div> </div>
<div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex"> <div class="m-fields-ui-select" v-else style="display: flex">
<TMagicTooltip v-if="val" content="清除"> <template v-if="val">
<TMagicTooltip content="清除" placement="top">
<TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton> <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
</TMagicTooltip> </TMagicTooltip>
<TMagicTooltip :content="val ? toName + '_' + val : '点击此处选择'">
<TMagicButton text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</TMagicButton> <TMagicTooltip content="点击选中组件" placement="top">
<TMagicButton
text
style="padding: 0; margin: 0"
@click="selectNode(val)"
@mouseenter="highlight(val)"
@mouseleave="unhightlight"
>{{ `${toName}_${val}` }}</TMagicButton
>
</TMagicTooltip>
</template>
<TMagicTooltip v-else content="点击此处选择" placement="top">
<TMagicButton text style="padding: 0; margin: 0" @click="startSelect">点击此处选择</TMagicButton>
</TMagicTooltip> </TMagicTooltip>
</div> </div>
</template> </template>
@ -15,9 +29,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, ref } from 'vue'; import { computed, inject, ref } from 'vue';
import { Close, Delete } from '@element-plus/icons-vue'; import { Close, Delete } from '@element-plus/icons-vue';
import { throttle } from 'lodash-es';
import { TMagicButton, TMagicTooltip } from '@tmagic/design'; import { TMagicButton, TMagicTooltip } from '@tmagic/design';
import { FormState } from '@tmagic/form'; import { FormState } from '@tmagic/form';
import type { Id } from '@tmagic/schema';
import type { Services } from '@editor/type'; import type { Services } from '@editor/type';
@ -77,6 +93,21 @@ const deleteHandler = () => {
mForm?.$emit('field-change', props.prop, ''); mForm?.$emit('field-change', props.prop, '');
} }
}; };
const selectNode = async (id: Id) => {
await services?.editorService.select(id);
services?.editorService.get('stage')?.select(id);
};
const highlight = throttle((id: Id) => {
services?.editorService.highlight(id);
services?.editorService.get('stage')?.highlight(id);
}, 150);
const unhightlight = () => {
services?.editorService.set('highlightNode', null);
services?.editorService.get('stage')?.clearHighlight();
};
</script> </script>
<style lang="scss"> <style lang="scss">