Vue自定义输入框支持插入标签

477 阅读1分钟

完整代码如下:

支持功能:

  • 支持插入标签
  • 标签点按删除
  • 删除时删除整块标签
  • 数据回显
  • 保存时获取json格式的数据(包含标签id)

值得说的:

主要应用了 Range 对象来确定编辑框的光标显示位置,每插入一个标签,应将光标置后:

this.insertTag(node)
this.Range.setEndAfter(node)
this.Range.setStartAfter(node)

Range对象 end 和 start 点索引相等时形成光标。

参考链接:

react版本:juejin.cn/post/712895…

Range API: developer.mozilla.org/zh-CN/docs/…