vue3 光标插入文字

在Vue 3中实现光标插入文字的功能，通常是指在文本编辑器中通过程序控制光标位置，以便用户可以在特定位置输入或插入文字。这可以通过多种方式实现，例如使用`ref`和`textContent`属性，或者更高级的富文本编辑器组件。

下面是一个简单的例子，展示了如何在Vue 3中使用原生DOM操作来控制光标插入文字：

<template>
  <div ref="editableDiv">
    请在这里编辑文本...
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const editableDiv = ref(null);

    onMounted(() => {
      const div = editableDiv.value;
      // 假设我们想在第二个单词后插入文字
      const text = div.textContent;
      const parts = text.split(' ');
      const firstPart = parts.slice(0, 2).join(' ');
      const restText = parts.slice(2).join(' ');
      div.textContent = '';
      div.insertAdjacentText('beforeend', firstPart);
      // 创建一个插入点
      const range = document.createRange();
      range.setStart(div.childNodes[0], firstPart.length);
      range.collapse(true);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      // 在插入点之后插入文字
      div.insertAdjacentText('beforeend', ' 这里是插入的文字');
      div.insertAdjacentText('beforeend', restText);
    });

    return {
      editableDiv
    };
  }
};
</script>

在这个例子中，我们首先获取了一个对`div`元素的引用，然后在组件挂载后，通过分割`textContent`来定位光标应该插入的位置，并使用DOM API来设置光标位置和插入文字。

需要注意的是，这种方法在简单的场景下有效，但它不是响应式的。如果你需要一个更复杂的富文本编辑器，你可能需要使用专门的库，比如`quill`、`tiptap`或者其他Vue可用的富文本编辑器组件，它们提供了更完整的API来处理光标位置和文本操作。