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

### 回答1：
在 Vue 3 中封装一个组件实现光标所在位置插入一串字符，可以这样做:

1. 在组件的 template 中添加一个输入框。

2. 在组件的 script 标签中定义一个方法，用来插入字符串。

3. 在组件的 mounted 钩子函数中，为输入框绑定 focus 事件。

4. 在输入框的 focus 事件处理函数中，调用定义的方法，实现字符串的插入。

具体实现细节请参考以下代码示例:

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

<script>
export default {
  mounted() {
    this.$refs.input.addEventListener('focus', () => {
      this.insertText('你好！')
    })
  },
  methods: {
    insertText(text) {
      const input = this.$refs.input
      const start = input.selectionStart
      const end = input.selectionEnd
      const currentValue = input.value
      input.value = currentValue.slice(0, start) + text + currentValue.slice(end)
      input.selectionStart = start + text.length
      input.selectionEnd = start + text.length
    },
  },
}
</script>

在上面的代码中，我们使用了输入框的 selectionStart 和 selectionEnd 属性来获取光标的位置，然后使用字符串的 slice 方法来截取输入框的值，最后使用字符串的拼接来插入新的字符串。最后，我们使用输入框的 selectionStart 和 selectionEnd 属性来设置光标的位置，使光标移动到插入的字符串的末尾处。

如果没有选中光标，可以在 insertText 方法的开头判

### 回答2：
要封装一个组件实现在Vue 3中光标所在位置插入一串字符，并且如果没有选中光标的话，默认在输入框最前面添加一串字符，可以按照以下步骤进行。

首先，我们可以创建一个名为`InsertText`的组件。在该组件的模板中包含一个输入框和一个按钮，用于触发插入字符的操作。在输入框中添加`ref`属性，以便后续获取输入框的DOM元素。按钮绑定一个点击事件，用于触发插入字符的方法。

接着，在组件的`setup`函数中，使用`ref`函数创建一个名为`inputRef`的响应式引用。这个引用将指向输入框的DOM元素。

然后，在组件的方法中，定义一个名为`insertText`的方法。该方法首先判断输入框是否获取焦点，如果没有获取焦点，则在输入框的最前面插入一串字符。如果输入框获取了焦点，则在光标所在位置插入一串字符。可以使用`inputRef.value.selectionStart`获取光标所在位置的索引，然后使用`substring`方法将原始输入框的值拆分成字符串的左右两部分，再将插入的字符与左右两部分拼接起来。

最后，在组件的模板中，将输入框的`v-model`绑定到一个名为`inputValue`的响应式属性上。当光标位置发生变化时，`inputValue`也会随之更新。

这样，我们就封装了一个组件，实现了在Vue 3中光标所在位置插入一串字符，如果没有选中光标的话，默认在输入框最前面添加一串字符。

以下是示例代码：

<template>
  <div>
    <input
      ref="inputRef"
      v-model="inputValue"
    />
    <button @click="insertText">插入字符</button>
  </div>
</template>

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

export default {
  setup() {
    const inputRef = ref(null);
    const inputValue = ref('');

    const insertText = () => {
      if (!inputRef.value || !inputRef.value.focus) {
        inputValue.value = '要插入的字符' + inputValue.value;
      } else {
        const startPos = inputRef.value.selectionStart;
        inputValue.value = inputValue.value.substring(0, startPos)
          + '要插入的字符'
          + inputValue.value.substring(startPos);
      }
    }

    return {
      inputRef,
      inputValue,
      insertText
    }
  }
}
</script>

希望这个回答对你有帮助！

### 回答3：
要实现在Vue3中封装一个组件实现光标所在位置插入一串字符，并在没有选中光标的情况下默认在输入框最前面添加一串字符，可以按照以下步骤进行操作：

1. 首先，我们创建一个名为`InsertString`的组件。在组件的`template`中，可以包含一个输入框和一个按钮，用于触发插入操作。

<template>
  <div>
    <input ref="inputField" type="text" v-model="inputValue">
    <button @click="insertString">插入字符</button>
  </div>
</template>

2. 在组件的`data`属性中，需要定义一个用于绑定输入框的值的变量`inputValue`。

data() {
  return {
    inputValue: ''
  }
}

3. 接下来，为按钮的点击事件`insertString`定义方法，在该方法中实现光标插入字符的逻辑。

methods: {
  insertString() {
    const cursorPosition = this.$refs.inputField.selectionStart; // 获取光标位置
    const insertedString = '插入的字符'; // 定义要插入的字符
    
    if (cursorPosition) {
      this.inputValue = this.inputValue.slice(0, cursorPosition) + insertedString + this.inputValue.slice(cursorPosition); // 在光标位置插入字符
    } else {
      this.inputValue = insertedString + this.inputValue; // 在最前面添加字符
    }
  }
}

4. 最后，将组件添加到需要使用的页面中即可。

<template>
  <div>
    <InsertString></InsertString>
  </div>
</template>

通过以上步骤，在Vue3中就可以封装一个组件，实现光标所在位置插入一串字符，并在没有选中光标的情况下默认在输入框最前面添加一串字符的功能。