(二)vue获取鼠标位置，在光标位置插入文本（三）v-for循环的元素获取鼠标位置，在光标处插入文本

另一种获取光标的方法见文章https://blog.csdn.net/Sunny_lxm/article/details/89445518

 

（一）、单元素

效果：

 

         
     插入会员名



methods:{

    async insert(myValue) {
          // const myField = document.querySelector('#textarea');
            const myField = this.$refs.singleText;
            if (myField.selectionStart || myField.selectionStart === 0) {
                var startPos = myField.selectionStart
                var endPos = myField.selectionEnd
                this.content = myField.value.substring(0, startPos) + myValue 
                            + myField.value.substring(endPos, myField.value.length)
                await this.$nextTick() // 这句是重点, 圈起来
                myField.focus()
                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)
            } else {
                this.content += myValue
            }
        },

}
 

（二）、v-for循环的元素，通过this.refs找到对应的文本框，并插入字段

//v-for循环的元素，在光标处插入字段，并对兄弟元素没有影响
 

     

//绑定不同的model值，不然会影响到所有的textarea，这里绑定的model值是item.content，但是这个key值在item中目前是没有的
          
                插入字段
      
 

data(){
    return{
        
         shoppeList: [
                {
                    id: 3,
                    value: "name"
                },
                {
                    id: 4,
                    value: "sex"
                }
            ],
    }

},
methods:{
    // 获取光标位置
   async insertAtCursor(item, index) {
//在这个地方要给item  set一个content，如果不手动set的话。textarea在没有输入文本之前是不能插入字段的
         this.$set(item , 'content', '');
         const myField = this.$refs.ttl[index];//虽然ref在v-for中不能绑定动态的，但是可以根据唯一标志找到对应的dom元素
         //console.log(item)
         // console.log(this.$refs.ttl[index]);
         const myValue = item.value;

        if (myField.selectionStart || myField.selectionStart === 0) {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                item.content = myField.value.substring(0, startPos) + 
                "{" + item.value + "}" + 
                myField.value.substring(endPos, myField.value.length+2);
                await this.$nextTick(); // 这句是重点, 圈起来
                myField.focus();
                myField.setSelectionRange( endPos + item.value.length+2, 
                                            endPos + item.value.length+2);
            } else {
                item.content += "{" + myValue+2 + "}";
            }
        },





}