最近在做vue项目 订单支付这一块，当用户选择余额支付并点击`支付的时候，弹出如下框(PS:这里是我实现之后的效果，输入框本来是移动到看不见的位置，测试的时候才会把输入框移回来。)
需求：当弹出如下效果之后，要让输入框自动获取焦点(光标在输入框中闪烁)。

image.png

核心代码如下

html中

<input
  class="input_control"
  v-model="inputVal"
  type="number"
  oninput="if(value.length>6)value=value.slice(0,6)"
  ref="getFocus"
  id="inputValId"
/>

js中

data() {
    return {
        inputVal: "",
        timer: null,
    }
},
methods: {
    goToPay: function(param1, param2) {
     this.$nextTick(function() {
        if (this.timer) {
           clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {// 100毫秒延迟解决第二次打开支付框，输入框不自动获取焦点的bug
           this.$refs.getFocus.focus();// 等价  document.getElementById("inputValId").focus();
            
        }, 100);
});
}

• 遇到的坑

问题1.关闭遮罩，input失去焦点。再次点击支付按钮，输入框的焦点获取不到

解决办法：在$nextTick设置100毫秒延迟，让this.$refs.getFocus.focus();延迟100毫秒执行

if (this.timer) {
  clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
   this.$refs.getFocus.focus();// 等价  document.getElementById("inputValId").focus();
}, 100);