【vue】获取光标位置，点击按钮插入文本标签

vue部分

// An highlighted block
<el-form-item>
<el-input type="textarea"
v-model="addForm.content"
:rows="4"
@blur="handleInputBlur"
ref="inputArea"
>el-input>
el-form-item>
<el-form-item>
<el-button
v-for="item in dicts['lable']"
@click="labClick(item.lableName)"
>{{item.lableName}}el-button>
el-form-item>


js部分

// An highlighted block
<script>
export default {
data () {
return {
cursorIndex:''
}
},
methods:{
//获取光标位置
handleInputBlur (e) {
this.cursorIndex = e.srcElement.selectionStart
},
//点击标签按钮，处理文本框文本内容
labClick(lab){
let s1='',
let s2='',
if(this.addForm.content.length<this.cursorIndex){
this.addForm.content=this,addForm.content+lab;
}
else{
s1=this.addForm.content.toString();
s2=this,addForm.content.toString();
this.addForm.content=s1.toString(0,this.cursorIndex)+
'['+
lab+
']'+
s2.substring(this.cursorIndex,this.addForm.content.length);
}
this.$refs.inputArea.forcus()
}
}
}
</script>