vue登录验证码格子组件(做组件使用)

 

<template>
  <div class="row-center captcha_input_wrapper">
    <input
      v-for="(item, index) in captchas"
      :key="index"
      v-model="item.num"
      :id="'captcha' + index"
      @input="inputFinash(index)"
      @focus="adjust(index)"
      @keydown="inputDirection(index)"
      class="captcha_input_box row-center"
      :class="[index <= activeInput ? 'active' : '']"
      type="tel"
      maxlength="1"
    />
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      // 当前输入框
      activeInput: 0,
      captchas: [
        { num: "" },
        { num: "" },
        { num: "" },
        { num: "" },
        { num: "" },
        { num: "" },
      ],
    };
  },
  //   页面加载后聚焦第一个
  mounted() {
    let dom = document.getElementById("captcha" + this.activeInput);
    dom.focus();
  },

  methods: {
    // 自动校准输入顺序
    adjust(index) {
      let dom = document.getElementById("captcha" + this.activeInput);
      if (index !== this.activeInput && dom) {
        dom.focus();
      }
    },
    // 控制前后方向
    inputDirection(index) {
      let val = this.captchas[index].num;
      // 回退键处理
      if (event.keyCode == 8 && val == "") {
        // 重新校准
        let dom = document.getElementById("captcha" + (index - 1));
        this.activeInput = index - 1;
        if (dom) dom.focus();
      }
      if (event.keyCode != 8 && val != "") {
        let dom = document.getElementById("captcha" + (index + 1));
        this.activeInput = index + 1;
        if (dom) dom.focus();
      }
    },
    // 输入框相互联动
    inputFinash(index) {
      let val = this.captchas[index].num;
      this.activeInput = val ? index + 1 : index - 1;
      let dom = document.getElementById("captcha" + this.activeInput);
      if (dom) dom.focus();
      if (index == this.captchas.length - 1) {
        let code = this.captchas.map((x) => x.num).join("");
        if (code.length == 6) {
          this.$emit("finish", code);
        }
      }
    },
  },
};
</script>
  
  <style lang='scss'>
.row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.captcha_input_wrapper {
  width: 100%;
}
.captcha_input_box {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px;
  border: 1px solid #dddddd;
  font-size: 16px;
  text-align: center;
  color: #1e243a;
  outline: none;
}
.active {
  border: 1px solid #3370ff !important;
}
</style>