vue如何在光标处插入文字

列子：

如何 想要在 侧的事故打打 的中间插入 下面的 日期，时间等文字

思路，通过e.srcElement.selectionStart 记录光标位置，然后通过slice截取拼接字符串

<el-form-item label="计划名称" prop="campaignName">
          <el-input v-model="form.campaignName" size="small" style="width: 800px;" maxlength="100" show-word-limit @blur="campaignNameBlur"></el-input>
          <br/>
          <span class="red" style="margin-left: 10px;">生成规则：(定向个数 x 素材个数)；变量为名字后面追加数字，从1开始，如：计划1，计划2。</span>
          <br/>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[日期]')">+日期</el-tag>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[时间]')">+时间</el-tag>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[定向]')">+定向</el-tag>
          <el-tag size="small" style="cursor: pointer;margin-left: 5px;" @click="campaignFormatChar('[变量]')">+变量</el-tag>
        </el-form-item>

 this.campaignNameIndex 是定义在data中的

下面的方法是写在method中的

/** 广告计划名称记录光标位置 **/
      campaignNameBlur(e){
        this.campaignNameIndex = e.srcElement.selectionStart;
      },

      /** 广告计划名称替换字符 **/
      campaignFormatChar(val){
        if(this.form.campaignName){
          let index = this.campaignNameIndex;
          let name = this.form.campaignName;
          //this.form.campaignName = this.form.campaignName + val;
          this.form.campaignName = name.slice(0,index) + val + name.slice(index);
        }else{
          this.form.campaignName = val;
        }
      },