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

在 Vue 3 中，你可以使用 ref 和 v-model 属性来访问输入框的 DOM 元素和数据。然后，你可以使用 JavaScript 方法来实现光标所在位置插入一串字符的功能。

首先，在输入框元素上使用 ref 属性创建一个引用。例如：

<template>
  <input ref="input" v-model="value" />
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

然后，你可以在组件的方法中使用这个引用来访问输入框的 DOM 元素。例如：

insertText(text) {
  const input = this.$refs.input
  // 获取光标所在位置
  const start = input.selectionStart
  const end = input.selectionEnd
  // 获取输入框的值
  const val = this.value
  // 在光标处插入文本
  this.value = val.slice(0, start) + text + val.slice(end)
  // 设置光标位置
  input.selectionStart = input.selectionEnd = start + text.length
}

如果没有选中文本，那么 start 和 end 的值相等，即代表光标所在位置。你可以在输入框最前面插入文本，将 start 的值设为 0 即可。

最后，你可以在组件的模板中绑定一个按钮或者其他元素，在点击时调用这个方法。例如：

<template>
  <div>
    <input ref="input" v-model="value" />
    <button @click="insertText('Hello World!')">插入文本</button>
  </div>
</template>

<script>
export default {