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

你可以这样封装你的组件：

// 首先，你需要在组件中声明一个 ref，用于指向输入框元素
const inputRef = ref<HTMLInputElement>()

// 然后，你可以在组件的方法中使用 JavaScript 来实现光标的插入操作。

function insertString(str: string) {
  // 获取输入框元素
  const input = inputRef.value
  // 如果没有选中文本，则默认在最前面添加
  if (input.selectionStart === input.selectionEnd) {
    input.value = str + input.value
  } else {
    // 获取选中文本的起始位置
    const start = input.selectionStart
    // 获取选中文本的结束位置
    const end = input.selectionEnd
    // 在选中文本的前面插入字符串
    input.value = input.value.slice(0, start) + str + input.value.slice(end)
  }
}

// 最后，你可以在组件的模板中使用这个方法
<template>
  <input ref="inputRef" />
  <button @click="insertString('hello')">插入字符串</button>
</template>

希望这能帮到你！