Open CoderSerio opened 1 month ago
针对此问题修改的: 问题原因、问题定位、问题解决思路、问题解决后验证结果可以都贴一下
mention组件之前的代码实现是只选取了整个输入区域的第一个字符进行判断:
if(props.trigger.includes(val[0]))
根据 #1762 中的描述,在文本输入区域的任意位置插入多个提及标识字符(默认为@),同时多个提及部分之间用空格隔开这样的交互更为合理,于是便按照这个思路进行修改。 核心实现代码片段如下:
const wordsWithoutSpace = val.split(' '); // 空格划分取出每个词
const lastWordIndex = wordsWithoutSpace.length - 1;
const lastWord = wordsWithoutSpace[lastWordIndex]; // 取出输入的最后一个词
如果最后一个词以@
等标识字符开头,那么便可对此进行字符串内容解析,实现上述效果。
在mention组件的 demo 中体现的核心功能均无误,实现了用空格隔开便能在任意位置插入多个标识,自定义标识,异步加载列表,按下enter或点击选择列表项进行补全等功能,如下图所示i:
对此 PR 进行了以下修订:
@GreatZPP 同时这里建议使用原始的textarea
替代d-textarea
或者将 DevUI 中 Textarea 组件的<textarea>
标签移动至顶层替代上层<div>
标签,很多文本作用域内的功能和参数都无法从d-textarea
中提取,所以我暂时无法实现以下两个重要功能:
由于无法简单的提取出原始 textarea 的 Dom 元素(因为d-textarea
实质上是一个div
中包裹了一个textarea
,我们得到的是这个div
元素),我们完全无法实现判断光标位置,因为我们无法直接得到原始textarea
的样式(Feature 1 的解决方案是创建一个样式一致的镜像元素),同样的,也无法获得当前光标选中的起始位置和结束位置,因此也无法判断光标状态。
@CoderSerio 翻阅了一下 issue 列表,此 PR 同时解决了 #1304,可以将此 issue 也加入到 Fix 清单中
@CoderSerio 刚才翻阅 issue 的时候,发现此 PR 还解决了 #1611 ,可以把 #1611 也加入 Fix 清单😅😅
@CoderSerio 刚才翻阅 issue 的时候,发现此 PR 还解决了 #1611 ,可以把 #1611 也加入 Fix 清单😅😅
get,已经加上了 😂
fix #1762, fix #1304, fix #1611
另外,也修改了对应的mdx文档,因为在我本地环境下,原本mdx中组合式API的写法貌似并不能够正确绑定数据(数据总是undefined),而修改为选项式API后就没有这个问题了。 所以保险起见,对mdx文档进行了修改,现在comment组件文档统一使用选项式API了。