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

<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>