例子

如何在点击添加按钮的时候，插入【客人姓名】等文字

微信截图_20240815103418.png

思路

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

<el-collapse-item title="指令格式设置" name="2">
   <el-form-item label="指令数据项">
    <el-select v-model.trim="dictKey" placeholder="请选择指令数据项" class='dish-input'>
      <el-option
        v-for="item in dictKeyList"
        :key="item.key"
        :label="item.value"
        :value="item.key"
      ></el-option>
    </el-select>
                            
    <el-button type="primary" @click="addTemplateKey">添加</el-button>
        <el-button type="primary" plain @click="clearSearch">预览</el-button>
    </el-form-item>
     <el-form-item label="">
      <el-input
         style="width: 900px"
         type="textarea"
         :rows="2"
         placeholder="请输入内容"
         v-model="form.content"
         @blur="contentBlur"
        >
      </el-input>
   </el-form-item>
 </el-collapse-item>

this.contentIndex是定义在data中
在methond中

contentBlur(e){
  this.contentIndex = e.srcElement.selectionStart;
},
addTemplateKey(){
  const keyObj = this.dictKeyList.find(item => item.key === this.dictKey);
  let dictName = '[' + keyObj.value + ']';
  if(this.form.content){
    let index = this.contentIndex;
    let name = this.form.content;
    this.form.content = name.slice(0,index) + dictName + name.slice(index);
  }else {
    this.form.content = dictName;
  }
},