Mentions组件设计

佚名 / 2023-07-25 / 原文

前言

 

Mentions组件通常用在评论@某人。Antd是基于textarea实现,功能单一,无法对@xx进行样式设置。

功能

 

基础API熟悉

1.Range & Selection

在阅读上述Mdn文档后,我们有以下的点需要注意

1)如果当前已经有选区,则调用selection.addRange添加新的range会不生效,需要先取消选区

selection.removeRange(range)  // 取消当前选区
selection.removeAllRanges()  // 取消所有选区

 

2) Chrome 无法在一个Selection中添加多个Range

 

3)Selection.collapse(parentNode, offset)  offset 选项针对是否为文本节点,还是元素节点有不同的表现

解释:Selection.collapse() 方法可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面,则光标会在该处闪烁。

parentNode 为Node.Element_Node, 则offset为parentNode.childNodes 数组的偏移量

parentNode 为Node.Text_Node,则offset为文本节点字符偏移量

 

4)Selection.empty 与Selection.removeAllRanges 方法的不同之处

 Selection.empty 老的IE浏览器API,已废弃。取消选区使用removeAllRanges即可
 
5)Selection.getRangeAt(index)
使用这个API前,index需要位于[0, selection.rangeCount) 之间,否则会报错
 
6)