vue 如何獲取input中光標位置，並且點擊按鈕在當前光標后追加內容

第一步：監聽輸入框的鼠標失焦事件@blur
<el-input @blur="handleInputBlur"></el-input>

第二步: 獲取失去交點時的光標在輸入內容中的位置，data里定義一個變量存儲如 cursorIndex

handleInputBlur(e) {
　　this.cursorIndex = e.srcElement.selectionStart; }

 

第三步：在指定光標位置添加內容，data里定義一個變量存儲如 inputData，用來存儲輸入框中的內容

addEmoji (str) {
    console.log(str)
    if (this.maxLength - this.inputData.length >= 2) {
        let s1 = ''
        let s2 = ''
        if (this.inputData.length < this.cursorIndex) {
    
            this.inputData = this.inputData + str
        } else {
            s1 = this.inputData.substring(0, this.cursorIndex)
            s2 = this.inputData.substring(this.cursorIndex, this.inputData.length)
            this.inputData = s1 + str + s2
        }
    }
    this.emoji_show = false
    this.$refs.inputArea.focus()
}