JS如何往输入框的鼠标光标处插入内容！

【功能需要】

原因是因为某个功能需要实现往输入框中光标位置插入点击的内容，并且插入后需要光标保持在尾部，这个功能之前在monaco-editor中使用过，也在各类富文本中调用过，但是这次需求是在普通输入框中实现，就萌生了自己实现这个功能试试。

【编码实现】【原生HTML功能实现】

const addTextToInput = (text) => {
    let GInput = document.getElementById('GInput');
    // 获取光标开始位置
    let startTarget = GInput.selectionStart
    // 获取光标结束位置
    let endTarget = GInput.selectionEnd
    // 当输入框没有光标位置时
    if(startTarget == undefined || endTarget == undefined) return
    // 获取当前输入框中的值
    let oldText = GInput.value
    // 拼接插入的文本数据
    let result = oldText.substring(0, startTarget) + text + oldText.substring(endTarget);
    // 将拼接好的数据赋值给输入框
    GInput.value = result;
    // 重新给输入框获取焦点
    GInput.focus()
    // 将光标位置移动到插入数据的尾部
    let newFocusIndex = startTarget + String(text || '').length
    GInput.selectionStart = newFocusIndex
    GInput.selectionEnd = newFocusIndex 
}

【编码实现】【vue3.0】

const GInput = ref();

const str = ref('')

const addTextToInput  = (text: string) => {
    let GInputRefInput = GInput.value.ref;
    let startTarget = GInputRefInput.selectionStart;
    let endTarget = GInputRefInput.selectionEnd;
    if(startTarget === undefined || endTarget === undefined) return
    let oldText = GInputRefInput .value;
    let result = oldText.substring(0,startTarget) + text +oldText.substring(endTarget)
    GInputRefInput.value = result;
    // 此处需要赋值给双向绑定值，不然只会出现视图层发生变化，但是绑定值不发生变化
    str.value = result;
    GInputRefInput.focus();
    let newFocusIndex = startTarget + String(text || '').length
    GInputRefInput.selectionStart = newFocusIndex;
    GInputRefInput.selectionEnd = newFocusIndex;
}

在vue3版本中最让我想省略的是赋值给双向绑定值这一步骤，因为我其实更希望方法更专注于传递进来的值，而不是值的绑定，但是我想了蛮多办法也没能触发外部的绑定值的变化，最后只能退而求其次，用了直接绑定的方法。略微觉得有点不太符合我的预期，如果有更好的方法，麻烦告诉我。谢了各位