vue3，光标所在位置插入一串字符，没有选中光标的话默认在输入框最前面添加一串字符

### 回答1：
在 Vue 3 中，你可以使用 ref 获取到输入框的 DOM 元素，然后使用 DOM 操作来插入字符。下面是一个例子：

<template>
  <input ref="input" />
</template>

<script>
export default {
  methods: {
    insertString(str) {
      // 获取输入框 DOM 元素
      const input = this.$refs.input
      // 获取光标位置
      const start = input.selectionStart
      const end = input.selectionEnd
      // 在光标位置插入字符
      input.value = input.value.slice(0, start) + str + input.value.slice(end)
      // 设置光标位置
      input.selectionStart = input.selectionEnd = start + str.length
      // 触发输入事件
      input.dispatchEvent(new Event('input'))
    }
  }
}
</script>

然后你就可以在组件内部或外部调用这个方法，传入你想要插入的字符串即可。

如果你想在输入框最前面添加一串字符，可以使用类似的方法，将光标位置设置为 0 即可。

### 回答2：
在Vue3中，我们可以通过操作DOM元素来实现光标所在位置插入一串字符的功能。首先，我们需要获取到输入框的DOM元素。可以使用`ref`进行引用。

<template>
  <input ref="myInput" type="text" />
  <button @click="insertText">插入字符</button>
</template>

在组件的`methods`中，使用`insertText`函数来插入字符。首先获取输入框的DOM元素，然后使用`selectionStart`属性获取光标所在位置的索引。如果没有选中光标，则索引为0，即光标位于输入框的最前面。然后，使用`splice`函数在字符串的相应位置插入一串字符，并重新设置输入框的值。

export default {
  methods: {
    insertText() {
      const myInput = this.$refs.myInput;
      const startPos = myInput.selectionStart || 0;
      const textToInsert = "一串字符";
      const currentValue = myInput.value;

      const newValue = currentValue.slice(0, startPos) + textToInsert + currentValue.slice(startPos);
      myInput.value = newValue;
    }
  }
}

最后，通过点击按钮触发`insertText`函数，就可以在光标所在位置插入一串字符了。如果没有选中光标，插入的字符将默认位于输入框的最前面。

### 回答3：
在Vue3中，可以使用以下方法在光标所在位置插入一串字符，如果没有选中光标，则默认在输入框最前面添加一串字符。

首先需要在组件中设置一个数据双向绑定的变量，例如inputText。

然后，在绑定的输入框中加入一个`ref`属性，并将其指向一个名为"inputRef"的引用对象。

接着，在组件中声明一个方法，例如insertText，用于实现在光标位置插入一串字符。方法接收一个参数text，表示要插入的字符串。

在该方法中，首先通过`this.$refs.inputRef`来获取到输入框的DOM元素，然后获取光标位置，可以使用`selectionStart`属性。如果光标没有选中任何内容，则将光标位置设置为0，即输入框最前面。

最后，使用字符串的`substring`方法将插入的字符text分别插入到光标前、光标后的文本中，再重新设置到输入框的值上。

代码示例如下：

<template>
  <div>
    <input v-model="inputText" ref="inputRef">
    <button @click="insertText('插入的字符串')">插入</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    insertText(text) {
      const inputElem = this.$refs.inputRef;
      const cursorPos = inputElem.selectionStart || 0;
      
      const textBeforeCursor = this.inputText.substring(0, cursorPos);
      const textAfterCursor = this.inputText.substring(cursorPos);
      
      this.inputText = textBeforeCursor + text + textAfterCursor;
      
      // 更新光标位置，可选
      inputElem.selectionStart = cursorPos + text.length;
      inputElem.selectionEnd = cursorPos + text.length;
      inputElem.focus();
    }
  }
};
</script>

这样就实现了在Vue3中，在光标所在位置插入一串字符，如果没有选中光标，则默认在输入框最前面添加一串字符。