vue2 实现多个input输入框组合密码

解决chrome浏览器出现自动填充，autocomplete off / new-password 失效问题

经测试，聚焦失焦，切换type类型，第一个输入框还是会显示密码提示，不友好。

换个方法实现避免提示

html

  <template v-for="(item, index) in inputs.length">
      <input class="input-box" ref="passwordInput" 
          :value="getInputs(index)" :maxlength="1" oninput="value = value.replace(/[^\d]/g,'')"
          @input="(e) => handleInput(e, index)" @keyup.delete="handleDel(index)" />
 </template>

ref 数组 || 拼接 ref="passwordInput_{{index}}"
@input === oninput 箭头函数传参
@keyup.delete 删除事件

data

inputs: ['', '', '', '', '', '']

methods

// ## :value 替代v-model重写get
getInputs(i) {
     if (this.inputs[i]) return '*'
     return this.inputs[i]
},
// 光标上一位
handleDel(i) {
  if (this.inputs[i] === '' && i - 1 >= 0) {
    this.$refs.passwordInput[i - 1].focus();
  }
},
 // 光标下一位
handleInput(e, i) {
  this.$set(this.inputs, i, e.target.value)
  if (this.inputs[i] && i + 1 < this.inputs.length) {
    this.$refs.passwordInput[i + 1].focus()
  }
}