- “插入自定義標簽是什么鬼？”
- “比如你要插入一個<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樣式等，這里就不多贅述了
最后，元旦快樂～