vue3实现一个输入框光标位置插入指定字符

可以使用 `ref` 获取输入框的 DOM 元素，然后在插入字符的时候获取光标位置并插入字符。具体实现可以参考以下代码：

<template>
  <div>
    <input ref="input" type="text" v-model="text" @keydown.enter.prevent="insertChar">
  </div>
</template>

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

export default {
  setup() {
    const text = ref('');

    // 获取输入框的 DOM 元素
    const inputRef = ref(null);
    const inputEl = inputRef.value;

    // 插入指定字符
    const insertChar = () => {
      const startPos = inputEl.selectionStart;
      const endPos = inputEl.selectionEnd;
      const char = 'X';
      text.value = text.value.substring(0, startPos) + char + text.value.substring(endPos, text.value.length);
      inputEl.selectionStart = inputEl.selectionEnd = startPos + 1;
    };

    return {
      text,
      inputRef,
      insertChar
    };
  }
};
</script>

在上面的代码中，我们使用 `ref` 创建了一个名为 `inputRef` 的引用，然后通过 `inputRef.value` 获取到输入框的 DOM 元素。在 `insertChar` 方法中，我们先获取当前的光标位置 `startPos` 和 `endPos`，然后插入指定字符，最后将光标位置设置到插入的字符后面。

需要注意的是，在模板中我们使用了 `@keydown.enter.prevent` 修饰符来阻止回车键默认事件，以便在按下回车键时执行 `insertChar` 方法。