vue-textarea光标位置插入指定元素

在Vue中，可以通过refs和原生DOM事件来在textarea的光标位置插入指定元素。以下是一个简单的例子：

<template>
  <div>
    <textarea ref="myTextarea"></textarea>
    <button @click="insertAtCursor">插入元素</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    insertAtCursor(myValue) {
      // 获取textarea DOM元素
      const textarea = this.$refs.myTextarea;
      
      // 获取光标位置
      let startPos = textarea.selectionStart;
      let endPos = textarea.selectionEnd;
      
      // 保存光标位置
      let scrollPos = textarea.scrollTop;
      
      // 获取textarea当前值
      let currentValue = (textarea.value).substring(0, startPos)
                         + myValue 
                         + (textarea.value).substring(endPos, textarea.value.length);
      
      // 重新设置textarea的值
      textarea.value = currentValue;
      
      // 恢复光标位置
      textarea.selectionStart = startPos + myValue.length;
      textarea.selectionEnd = startPos + myValue.length;
      textarea.focus();
      textarea.scrollTop = scrollPos;
    }
  }
}
</script>

在这个例子中，insertAtCursor 方法会在当前光标位置插入传入的 myValue。这个方法通过保存和恢复textarea的选区来确保插入后光标的位置不会改变。