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

要在光标所在位置插入字符，可以使用 Vue 3 中的 refs 和 $refs 属性。首先，你需要在组件中添加一个 ref 属性，然后在模板中使用该 ref 属性来绑定到输入框元素上。

例如：

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

<script>
export default {
  methods: {
    insertChar(char) {
      // 获取输入框元素
      const input = this.$refs.input
      // 获取光标所在位置
      const cursorPos = input.selectionStart
      // 获取输入框的值
      const value = input.value
      // 在光标位置插入字符
      input.value = value.slice(0, cursorPos) + char + value.slice(cursorPos)
      // 设置光标位置
      input.selectionStart = cursorPos + 1
      input.selectionEnd = cursorPos + 1
    },
  },
}
</script>

如果没有选中文本，光标位置就是输入框的最后，此时我们就可以在输入框的最后插入字符了。

注意：上述方法是基于输入框元素的属性实现的，因此只能用于输入框元素。如果需要在其他元素中插入字符，可以使用其他方法，例如使用 Selection API 或者使用 Document.execCommand() 方法。