input框实现光标自动移到下一个框

<el-form :model="codeData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
         :inline="true">
  <el-form-item label-width="opx" prop="input1">
    <input
      class="el-input__inner"
      ref="refName1"
      @input="dataChange($event,1)"
      v-model.trim="codeData.input1">
    </input>
  </el-form-item>
  <span style="height: 42px;margin-right: 5px">-</span>
  <el-form-item label-width="opx" prop="input2">
    <input
      class="el-input__inner"
      ref="refName2"
      @input="dataChange($event,2)"
      v-model.trim="codeData.input2">
    </input>
  </el-form-item>
  <span style="height: 42px;margin-right: 5px">-</span>
  <el-form-item label-width="opx" prop="input3">
    <input
      class="el-input__inner"
      ref="refName3"
      @input="dataChange($event,3)"
      v-model.trim="codeData.input3">
    </input>
  </el-form-item>
  <span style="height: 42px;margin-right: 5px">-</span>
  <el-form-item label-width="opx" prop="input4">
    <input
      class="el-input__inner"
      ref="refName4"
      @input="dataChange($event,4)"
      v-model.trim="codeData.input4">
    </input>
  </el-form-item>
</el-form>

dataChange(e, index) {
  const val = e.target.value
  console.log(e.target.value)
  const len = val.length
  if (index != 4 && len >= 6) {
    this.$refs['refName' + index].blur()
    // 移到下一个
    this.$refs['refName' + (index + 1)].focus()
  } else if (index == 4 && len >= 6) {
    this.$refs['refName' + index].blur()
  }
}