输入区提示 插入 可直接删除标签

edit-mention

If you're looking for a complete solution，It is recommended that you can try to use the draft-js and its plug-in system draft-js-plugins(about mention module).]

总体设计

标签插入整体思路

模块一： mention-pop 组件

提示弹出框选取组件

原生DOM实现 生成Vue组件，React组件，WebComponent组件 最终都是构造一个弹出框实例对象用于渲染及与mention-tag模块进行通信 (通过render函数或者写一套JSX直接转换) 模块二： mention-tag 模块

输入区标签插入控制模块

mention taget 适配可编辑元素(contenteditable=true) 适配HTMLTextAreaElement，HTMLInputElement封装元素(由于使用shadowdom封装无法获取到selection和Range只能通过Dom元素暴露的属性及方法进行操作setSelectionRange) mention tag 生成/插入 可直接删除的标签 通过 contenteditable 生成可直接删除的标签 通过 img 的 alt 模拟可直接删除的标签 通过 img 的 background-img（dataurl，SVG-text，CSS Houdini-paint） 模拟可直接删除的标签 通过 canvas 生成图片标签 模拟可直接删除的标签 标签可配置化(可选择标签 是否 可直接删除等) DOC