点击按钮，在textarea光标位置插入值

应用场景是一个邮件模板配置的功能，需要点击按钮后在textarea光标位置插入占位符（如下图）

 

 

解决代码如下

   插入动态元素：
  <MdButton class="checkBtn" @click="insert('{message}')">{message}</MdButton>
  <MdInput type="textarea" id="mailTemplate" v-model="detailForm.mailTemplate" :rows="4" :autosize="{minRows: 10, maxRows: 10}"/>

js:

  insert (content) {
    let textInput = document.getElementById('mailTemplate');
    let area = textInput.getElementsByClassName('ivu-input')[0];
    // 获取光标初始索引
    let insert = area.selectionStart;
    // 拼接字符串的形式来得到需要的内容
    area.value = area.value.substr(0, insert) + content + area.value.substr(insert);
    //computed不会计算得重新赋值
    this.detailForm.mailTemplate = area.value;
  },

注：<MdInput>为基于iview二次封装的input组件，主要是获取到<textarea>的selectionStart即为光标位置进行字符串拼接，本来想用ref的方式获取结果不行不知道为啥就还得再看看。
关键是！（敲黑板！）改变<textarea>的value不会改变双向绑定的值，得手动赋值一下