vue iview input输入完成自动进入下一输入框

<div class="flex" v-for="(item,index) in bindingList" :key="index">
   <div class="inputs">
        <Input @on-keyup="nextinput(item.deviceInput1,index)" ref="inputOne" @on-blur="inputBlur(deviceInput1,index)" :maxlength="2" v-model="item.deviceInput1" style="width: 30px" />
        <Input @on-keyup.delete="backspace(item.deviceInput2,index)" ref="inputTwo" @on-blur="inputBlur(deviceInput2,index)" :maxlength="2"  v-model="item.deviceInput2" style="width: 30px" />
    </div>
</div>
//键盘输入事件
    nextinput(item,index) {
          
   
      if (item.length == 2) {
          
      
        this.$nextTick(()=>{
          
   
          this.$refs.inputTwo[index].focus();
        })  
      }
    },
    //键盘删除触发事件
    backspace(item,index){
          
   
      if(item.length == 0){
          
   
        this.$nextTick(()=>{
          
   
          this.$refs.inputOne[index].focus();
        })
      }
    },
    //失去焦点时不足两位补零
    inputBlur(type,index){
          
   
      if(this.bindingList[index][type]){
          
   
        this.bindingList[index][type] = this.bindingList[index][type].padStart(2,0)
      }
    },
经验分享 程序员 微信小程序 职场和发展