1

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

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-	import { reactive, ref, onMounted } from 'vue'
+	import { reactive, ref, onMounted, nextTick } from 'vue'
 	const props = defineProps({
 		data: {
 			type: Object,
@@ -29,7 +29,7 @@
 	})
 	const emit = defineEmits(['update-data'])
 	const data = reactive({
-		text: props.data?.text || '双击编辑文本'
+		text: props.data?.text || '点击编辑文本'
 	})
 	const edit = ref(false)
 	const time = ref(null)
@@ -44,10 +44,16 @@
 	}
 	const onClick = () => {
 		if (edit.value) return
-		time.value = setTimeout(() => {
-			edit.value = false
-		}, 500)
 		edit.value = true
+		nextTick(() => {
+			// 光标定位到文本末尾
+			const range = document.createRange()
+			const selection = window.getSelection()
+			range.selectNodeContents(inputRef.value)
+			range.collapse(false)
+			selection.removeAllRanges()
+			selection.addRange(range)
+		})
 	}
 	const onDoubleClick = () => {
 		clearTimeout(time.value)
@@ -65,7 +71,10 @@
 <style lang="less" scoped>
 	.text {
 		user-select: none;
+		border: 1px solid transparent;
+		padding: 2px;
 		&.edit {
+			border-color: #000;
 			> .input {
 				cursor: text;
 			}