diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue index f22a9f7d29..22628b9f7d 100644 --- a/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue +++ b/frontend/desktop/src/components/common/RenderForm/tags/TagInput.vue @@ -28,7 +28,7 @@ ref="input" class="div-input" :class="{ - 'input-before': !input.value + 'input-before': !input.value && !pasteIng }" :contenteditable="!isDisabled" :data-placeholder="placeholder" @@ -114,7 +114,8 @@ varList: [], varListPosition: '', hoverKey: '', - selection: {} + selection: {}, + pasteIng: false // 粘贴中 } }, computed: { @@ -314,6 +315,7 @@ }, // 文本框输入 handleInputChange (e, selection) { + if (this.pasteIng) return if (!selection) { // 实时更新 this.updateInputValue() @@ -512,7 +514,7 @@ this.emit_event(this.tagCode, 'blur', this.value) this.$emit('blur', this.value) }, - handlePaste (e) { + async handlePaste (e) { event.preventDefault() let text = '' const clp = (e.originalEvent || e).clipboardData @@ -531,7 +533,21 @@ } else { text = clp.getData('text/plain') || '' text = text.replace(/(\n|\r|\r\n)/g, ' ') - text && document.execCommand('insertText', false, text) + this.pasteIng = true + await this.insertTextAsync(text) + this.pasteIng = false + this.handleInputChange(e, false) + } + }, + async insertTextAsync (text) { + const chunkSize = 1000 + for (let i = 0; i < text.length; i += chunkSize) { + const part = text.slice(i, i + chunkSize) + // 创建一个Promise用于管理setTimeout的异步行为 + await new Promise((resolve) => setTimeout(() => { + document.execCommand('insertText', false, part) + resolve() + }, 0)) } } } diff --git a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue index 23eb153580..b792a2995c 100644 --- a/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue +++ b/frontend/desktop/src/components/common/RenderForm/tags/TagTextarea.vue @@ -18,7 +18,7 @@ ref="input" class="div-input" :class="{ - 'input-before': !input.value + 'input-before': !input.value && !pasteIng }" :contenteditable="!isDisabled" :data-placeholder="placeholder" @@ -100,7 +100,8 @@ varListPosition: '', hoverKey: '', selection: {}, - lastEditRange: null + lastEditRange: null, + pasteIng: false // 粘贴中 } }, computed: { @@ -267,6 +268,7 @@ }, // 文本框输入 handleInputChange (e, updateForm = true) { + if (this.pasteIng) return if (updateForm) { // 实时更新 this.updateInputValue() @@ -513,7 +515,7 @@ this.emit_event(this.tagCode, 'blur', this.value) this.$emit('blur', this.value) }, - handlePaste (e) { + async handlePaste (e) { event.preventDefault() let text = '' const clp = (e.originalEvent || e).clipboardData @@ -532,7 +534,21 @@ } else { text = clp.getData('text/plain') || '' text = text.replace(/(\r|\r\n)/g, '') - text && document.execCommand('insertText', false, text) + this.pasteIng = true + await this.insertTextAsync(text) + this.pasteIng = false + this.handleInputChange(e, false) + } + }, + async insertTextAsync (text) { + const chunkSize = 1000 + for (let i = 0; i < text.length; i += chunkSize) { + const part = text.slice(i, i + chunkSize) + // 创建一个Promise用于管理setTimeout的异步行为 + await new Promise((resolve) => setTimeout(() => { + document.execCommand('insertText', false, part) + resolve() + }, 0)) } } } @@ -605,6 +621,7 @@ } .div-input { min-height: 36px; + max-height: 300px; line-height: 18px; color: #63656e; outline: 0;