vue 获取光标位置

<el-form-item label="模板说明：" v-if="form.news_type==='1'">
   <el-row class="templateCode">
       <el-col :span="8">
         <div class="grid-content bg-purple" style="color:#666" @click="makeActive('$Username$')"> 用户名：$Username$</div>
       </el-col>
       <el-col :span="8">
         <div class="grid-content bg-purple-light" @click="makeActive('$OrderId$')">订单号：$OrderId$</div>
       </el-col>
       <el-col :span="8">
         <div class="grid-content bg-purple" @click="makeActive('$Total$')">订单金额：$Total$</div>
       </el-col>
     </el-row>
     <el-row>
       <el-col :span="8">
         <div class="grid-content bg-purple" @click="makeActive('$Product_name$')">产品名称：$Product_name$</div>
       </el-col>
     </el-row>
   </el-form-item>

   <el-form-item label="编辑模板：" prop="message" v-if="form.news_type==='1'">
     <el-input
       type="textarea"
       id="emojiInput"
       maxlength="300"
       show-word-limit
       :autosize="{ minRows: 4, maxRows: 8}"
       v-model="form.message"
       placeholder="1111"
     ></el-input>
   </el-form-item>
 
    /**
    *插入模板说明的变量
    */
    makeActive (item) {
      var elInput = document.getElementById('emojiInput') // 根据id选择器选中对象
      var startPos = elInput.selectionStart// input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd// 选中的字符到最后的字符
      if (startPos === undefined || endPos === undefined) return
      var txt = elInput.value
      // 将表情添加到选中的光标位置
      var result = txt.substring(0, startPos) + item + txt.substring(endPos)
      elInput.value = result// 赋值给input的value
      // 重新定义光标位置
      elInput.focus()
      elInput.selectionStart = startPos + item.length
      elInput.selectionEnd = startPos + item.length
      this.form.message = result// 赋值给表单中的的字段
    },