vue 如何获取input中光标位置，并且点击按钮在当前光标后追加指定内容

vue 如何获取input中光标位置，并且点击按钮在当前光标后追加内容

1. 监听输入框的鼠标失焦事件
2. 获取失去交点时的光标在输入内容中的位置 （e.srcElement.selectionStart）
3. 替换指定内容 （str.slice(0, index)）
   具体代码实现如下：

<template>    
 <el-input v-model="addForm.templateContent" type="textarea" @blur="blurEvent"></el-input>
  <el-button plain  type="primary" size="mini" @click="insertContentHandle(“我是插入的内容”)">向光标位置插入内容</el-button>
</template>
<script>
export default {
  data () {
    return {
      addForm: {
        templateContent: "",
      },
      blurIndex: null,//记录光标位置
    }
  },
  // 方法集合
  methods: {
    // 获取光标所在位置的index
    blurEvent(e) {
      this.blurIndex = e.srcElement.selectionStart;
      console.log(e)
      console.log(e.srcElement)
      console.log(e.srcElement.selectionStart) //光标所在的位置
    },
     // 插入内容的方法
    insertContentHandle(text) {
      let index=this.blurIndex
      let str=this.addForm.templateContent
      this.addForm.templateContent=str.slice(0, index) + text + str.slice(index);
    },
  }
}
</script>
<style lang='scss' scoped>
</style>