vue2中开发评论模块时，在评论文本输入完成后，往往需要在文本某处插入表情或其他内容，但在打开表情列表选了表情之后，textarea失去焦点后往往无法在刚才鼠标定位处插入表情，因此需要解决以下两个需求：
1、选好表情后，执行插入动作时，需要定位好刚才光标移动到或鼠标 focus 点到的位置。
2、textarea 必须在重新聚焦时自动聚焦到定位好的位置。
这里需要对 textarea 进行监测，要对键盘移动光标和鼠标点击两个动作进行光标位置监测。
1、用 @input="getCursorPos" @focus="getCursorPos" 监测移动光标
2、用 @mousedown="getCursorPos" @mouseup="getCursorPos" 监测鼠标点击
在插入表情之前，监测光标位置后，还需要判定光标的位置，通过 textarea 获取 selectionStart 和 selectionEnd 的值得到光标的起始、结束位置，再通过调用 setSelectionRange 方法将光标的位置标注出来，实现定位。
// 添加 emoji
addEmoji (code) {const obj = this.$refs.commentInput;// 在光标位置插入 emojiconst startPos = obj.selectionStart; // 光标起始位置const endPos = obj.selectionEnd; // 光标结束位置// 截取内容并插入 emojithis.commentText = this.commentText ? this.commentText.substring(0, startPos) + code + this.commentText.substring(endPos, this.commentText.length) : code;obj.focus(); // 自动聚焦// setSelectionRange 必须在 nextTick 中才有效this.$nextTick(() => {obj.setSelectionRange(endPos, endPos);// 将光标位置手动定位到刚刚添加 emoji 的后面this.cursorPos += 2;obj.setSelectionRange(this.cursorPos, this.cursorPos);})
},最后在定位之后，将光标向插入表情的后一位移动，以实现连续插入的效果。
下面实现光标位置的监测
// 监测光标位置
getCursorPos () {// 检测光标的位置let commentInput = this.$refs.commentInput;if (commentInput) {this.cursorPos = commentInput.selectionStart;}
},注意，这里使用的是 selectionStart，只能实现选择文本时对光标的监测，但我们可以将选择文本的起始和结束位置设置在同一个定位数值上，则相当于使用了选择文本功能，但却什么都没选，间接实现了定位到具体某个位置的功能。
