vue3 el-input使光标处插入的关键词为一个整体

在Vue3中，`el-input`组件通常用于创建输入框，如果你想实现在输入框某个特定位置自动插入关键词并作为一个整体，可以利用`v-model`绑定值，并监听`input`事件。你可以自定义一个方法，在用户输入时检查输入内容并在适当的位置添加关键词。

例如：

<template>
  <el-input
    v-model="inputValue"
    @input="handleInput"
    placeholder="请输入内容..."
  ></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      keyword: '要插入的关键词',
    };
  },
  methods: {
    handleInput(e) {
      // 获取当前光标位置
      const cursorPosition = e.target.selectionStart;
      
      // 如果在指定位置插入关键词不会超出边界
      if (cursorPosition + this.keyword.length <= this.inputValue.length) {
        // 将关键词插入到相应位置
        this.inputValue =
          this.inputValue.slice(0, cursorPosition) +
          this.keyword +
          this.inputValue.slice(cursorPosition);
        
        // 更新光标位置以便于显示
        e.target.setSelectionRange(cursorPosition + this.keyword.length, cursorPosition + this.keyword.length);
      }
    },
  },
};
</script>

在这个例子中，当用户在输入框内输入，`handleInput`方法会被触发，它会检测当前光标位置并将关键词插入。然后更新光标位置保持在关键词结尾。