fix:优化@圈人功能
This commit is contained in:
@@ -133,6 +133,40 @@ const handleInput = (e) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleKeyDown = (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 (!showPopover.value) return;
|
||||||
if (e.key === 'ArrowUp') {
|
if (e.key === 'ArrowUp') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|||||||
Reference in New Issue
Block a user