另一种获取光标的方法见文章/Sunny_lxm/article/details/89445518
（一）、单元素
效果：
<!-- 单元素获取光标位置 --><div class="el-textarea"><textarea v-model="content" id="textarea" type="textarea" rows="2" autocomplete="off" ref="singleText"></textarea><button @click="insert('<name>')" type="button">插入会员名</button></div>methods:{async insert(myValue) {// const myField = document.querySelector('#textarea');const myField = this.$refs.singleText;if (myField.selectionStart || myField.selectionStart === 0) {var startPos = myField.selectionStartvar endPos = myField.selectionEndthis.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循环的元素，在光标处插入字段，并对兄弟元素没有影响<!-- 获取光标位置 --><div style="display:flex;flex-direction:column;"><div class="el-textarea" v-for="(item,index) in shoppeList" :key="index">//绑定不同的model值，不然会影响到所有的textarea，这里绑定的model值是item.content，但是这个key值在item中目前是没有的<textarea v-model="item.content" type="textarea" rows="10" autocomplete="off" ref="ttl"></textarea><button @click="insertAtCursor(item,index)" type="button">插入字段</button></div></div>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 + "}";}},}
(二)vue获取鼠标位置 在光标位置插入文本（三）v-for循环的元素获取鼠标位置 在光标处插入文本
