如何实现在失去焦点的字符串中在中间插入值，模拟虚拟键盘。

思路：

1.在输入框获取鼠标的位置并存储起来。

2.把字符串切割成两部分

3.判断输入框内是否有值，如果没有直接添加到字符串后面，如果有则切割成两部分，在中间插入值，并拼接。

第一步，定义事件获取光标的位置。

@blur="blurChange"   

@blur 指令被用来监听 DOM 元素上的 blur 事件。blur 事件会在输入元素失去焦点时触发。

第二步，存储光标位置

定义常量存储光标的位置 const startIndex = ref(0);

把值赋值给startIndex数组

// 当光标移出运算规则显示框时记录光标位置

const blurChange = (event) => {

  startIndex.value = event.target.selectionStart;

};

第三步，添加事件。

因为失去焦点和点击输入的时候会有先后顺序，这边用一个定时器解决

if (!startIndex.value && startIndex.value !== 0) {

      currentRule.value = currentRule.value += value;

}
这段代码是用来判断当前的输入框内有没有值，如果没有值存在的话之间就添加在输入框的后面。

let str1 = currentRule.value.substring(0, startIndex.value);

      let str2 = currentRule.value.substring(startIndex.value);

      currentRule.value = `${str1}${value}${str2}`;

这段代码是通过光标的位置用来把字符串拆分成两半，好让输入的值插入进去。

  currentRule.value = `${str1}${value}${str2}`;

这段代码是将分割的两个字符串拼接要插入的值的结果。