有两种方法,方法一我觉得更复杂一些。本人更偏向方法二
方法三十针对循环的textarea 进项的添加字段。另外两中方法见获取光标的应用的其他两种方式https://blog.csdn.net/Sunny_lxm/article/details/100121223
(一) 改代码只能实现单个textarea中插入文本,如果是对遍历的元素,暂不可行,有待优化,如有大神看到请指教哈~~~
<div id="symbols-textarea">
<textarea v-model="text" cols="60" rows="10" ref="textarea"></textarea>
<el-select class="selectStyle" :value = "fileds"
placeholder="插入自定义字段" filterable blur>
<el-option v-for="(item,value) in options" :key="value"
:label="item.label" :value="item.label" @click.native="insert(item.label)">
</el-option>
</el-select>
</div>
data(){
text:'',
fileds:'',
options:[
{value:1,label:'mobile'},
{value:2,label:'name'},
{value:3,label:'phone'},
{value:4,label:'email'}
],
}
methods:
// 获取光标位置
setCursor (textDom, pos) {
if(textDom.setSelectionRange) {
textDom.focus();
textDom.setSelectionRange(pos, pos);
} else if (textDom.createTextRange) {
const range = textDom.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
},
insert (symbol) {
this.fileds = symbol;
console.log(symbol);
const _this = this;
const { text } = _this;
const textarea = _this.$refs.textarea;
const { selectionStart, selectionEnd } = textarea;
_this.text = `${text.substring(0, selectionStart)}${'${'+symbol+'}'}${text.substring(selectionEnd, text.length)}`;
_this.$nextTick(() => {
_this.setCursor(textarea, text.substring(0, selectionStart).length + symbol.length+3);
});
},
效果图:图一操作前,图二操作后