（一）select选中项插入到文本框中；获取鼠标位置，在鼠标最后停留的位置插入选中项

有两种方法，方法一我觉得更复杂一些。本人更偏向方法二

方法三十针对循环的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);
            });
        },

效果图：图一操作前，图二操作后