- “插入自定义标签是什么鬼？”
- “比如你要插入一个<wise></wise>的标签...”
- “什么情况下会有这种需求？”
- “得罪了产品的情况下...”
一、需求背景
某天，产品找到我，发生了如下对话
PM：“哇，研发小哥哥你今天好帅啊～”
我：“说人话。”
PM：“我有一个需求。”
我：“我不听。”
PM：“我们要给用户发送模版消息。”
我：“找后端小姐姐啊。”
PM：“后端小姐姐让你在编辑这个字段的时候，标记对应的模版词组。”
我：“怎么标记？”
PM：“然后我希望在删除这个模版词组的时候，可以整个删除。”
我：“怎么删除？！”
PM：“整个删除。”
我：(打开抽屉，亮出我的四十米长刀)
PM：(楚楚可怜的看着我)
我：“做不了。”
PM：(伸出一根手指)
我：“这需求我接了。”
十年后...
仓库地址：https://github.com/wisewrong/vue-tag-textarea
二、输入功能实现
为了实现这个功能，我最先想的是改造一个 <textarea>
然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性
这是一个 html5 的属性，可以让元素内容可编辑
<p contenteditable="true">这是一个可编辑的段落。</p>
但这样改造之后的输入框，在粘贴的时候会带上文本格式，即富文本
所以最后我放弃了该属性，采用 CSS 的解决方案：-webkit-user-modify
这个属性有四个可选值：
read-only：默认值，元素只读，不可编辑；
read-write：可以编辑，支持富文本；
read-write-plaintext-only：可以编辑，不支持富文本；
write-only：使元素仅用于编辑（几乎没有浏览器支持）
所以最后我给输入框添加了这样一行 CSS 属性：
-webkit-user-modify: read-write-plaintext-only !important;
三、实现单向绑定
一个常规的输入框组件，父组件可以通过 v-model 指令双向绑定数据
v-model 其实是一个语法糖，它向子组件传递一个 value 属性，并接收一个 input 事件
所以对于父组件来说：
等价于：
而子组件为了支持 v-model，需要在 props 里定一个 value 属性
并且在合适的时候触发 this.$emit('input', value)
在这个 tag-textarea 组件中，我在输入框上监听 input 事件，获取元素内的 innerHTML，并暴露给父组件
到这里，还仅仅实现了单项绑定——子组件的值改变时，父组件的值随之改变
要实现真正意义上的双向绑定，还有一段路要走
四、完成双向绑定
首先需要在 data 定义一个 currentText
如果是普通的输入框，直接在输入框元素上使用 v-text="currentText"
然后在 watch 中监听 value 的变化，实时更新 currentText，就能实现双向绑定
但这个 textarea 返回的是 html，v-text 是不能用了
如果用 v-html 的话，在输入的时候，光标会一直跳到最前方，最后我采用了以下方案：
在 data 添加一个 isLocked 用于记录锁定状态
在 mounted() 的时候，通过 dom 操作初始化数据
在聚焦和失焦的时候修改锁定状态
看，很简单吧，没有人会受伤的世界 一个基本的 textarea，完成了
五、插入标签
创建标签并不难，可如何让这个标签插入到光标所在的位置？
于是 Selection 对象闪亮登场，它记录了拖蓝的文本范围，或插入符号的当前位置
通过 Selection 对象可以获取到 Range 对象，然后使用 Range.insertNode() 方法，在目标位置插入标签
在 mounted() 中监听 selectionchange 事件，添加对应的处理函数，并在 beforeDestroy() 的时候卸载
在处理函数中，记录当前的 range
添加标签的时候，首先通过 document.createElement() 创建标签，然后插入节点
六、删除标签
删除分为光标位于标签外和标签内两种情况
首先是当光标在标签外的时候，有一个取巧的办法
给模版标签添加样式，将 -webkit-user-modify 设置为 read-only
这样在删除的时候，因为无法编辑，就会直接删除整个 dom 节点
当光标位于标签内的时候，会稍微复杂一点
首先需要监听 click 事件，当点击模版标签的时候，记录其 id
然后监听 keydown.delete 事件，如果选中了标签，就使用 removeChild() 删除标签
以上，就已经满足了产品的基本需求
不过既然是开发组件，就需要做一些适合组件开发的优化
比如 props 、slot 、 css样式等，这里就不多赘述了
最后，元旦快乐～