例子
如何在点击添加按钮的时候，插入【客人姓名】等文字
微信截图_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;
}
},
