vue-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>