fix

src/components/Canvas/FlowCanvas/components/nodes/text.vue

@@ -0,0 +1,74 @@
+<template>
+	<!-- 结果图片 -->
+	<div
+		class="text"
+		:class="{ edit }"
+		@click="onClick"
+		@mousedown="onMouseDown"
+		@dblclick="onDoubleClick"
+	>
+		<div
+			tabindex="0"
+			class="input"
+			ref="inputRef"
+			contenteditable="true"
+			@input="onInput"
+			@blur="onBlur"
+			@paste.prevent
+		>
+			双击编辑文本
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { reactive, ref, nextTick, useAttrs, inject, watch } from 'vue'
+	const props = defineProps({
+		data: {
+			type: Object,
+			default: () => ({})
+		}
+	})
+	const emit = defineEmits(['delete-node', 'copy-node'])
+	const data = reactive({
+		text: props.data?.text || '双击编辑文本'
+	})
+	const edit = ref(false)
+	const time = ref(null)
+	const inputRef = ref<any>()
+	const onInput = () => {
+		const text = inputRef.value.innerText
+		data.text = text
+	}
+	const onBlur = () => {
+		edit.value = false
+	}
+	const onClick = () => {
+		if (edit.value) return
+		time.value = setTimeout(() => {
+			edit.value = false
+		}, 500)
+		edit.value = true
+	}
+	const onDoubleClick = () => {
+		clearTimeout(time.value)
+	}
+	const onMouseDown = (e: MouseEvent) => {
+		if (edit.value) e.stopPropagation()
+	}
+	defineExpose({ data })
+</script>
+
+<style lang="less" scoped>
+	.text {
+		&.edit {
+			> .input {
+				cursor: text;
+			}
+		}
+		> .input {
+			outline: none;
+			min-width: 1px;
+		}
+	}
+</style>