diff --git a/src/modules/Comment/mentionEditor.vue b/src/modules/Comment/mentionEditor.vue index e6a58cf..1134ad4 100644 --- a/src/modules/Comment/mentionEditor.vue +++ b/src/modules/Comment/mentionEditor.vue @@ -133,6 +133,40 @@ const handleInput = (e) => { }; const handleKeyDown = (e) => { + // 兼容删除 删除整个块而不是单独的文字 + if (e.key === 'Backspace') { + const el = e.target; + const pos = el.selectionStart; // 获取光标当前位置 + const val = el.value; + + // 1. 获取光标之前的文本 + const textBefore = val.slice(0, pos); + + // 2. 正则匹配:光标前是否紧跟 "@姓名 " (注意:这里匹配的是带空格的完整块) + // 这里的正则要匹配:以@开头,中间没有空格或@,最后以一个空格结尾 + const mentionMatch = textBefore.match(/@([^\s@]+)\s$/); + + if (mentionMatch) { + // 匹配到了,说明光标刚好在某个 "@姓名 " 的末尾 + const wholeMatch = mentionMatch[0]; // 例如 "@李星倩 " + + e.preventDefault(); // 阻止浏览器默认的删除一个字符的行为 + + // 3. 计算新值:删掉整个匹配到的块 + const startPos = pos - wholeMatch.length; + const newValue = val.slice(0, startPos) + val.slice(pos); + + emit('update:modelValue', newValue); + + // 4. 在下个 tick 修正光标位置 + nextTick(() => { + el.setSelectionRange(startPos, startPos); + // 同时也关闭可能存在的弹窗 + showPopover.value = false; + }); + return; + } + } if (!showPopover.value) return; if (e.key === 'ArrowUp') { e.preventDefault();