hz_crm_web/src/views/login_manage/components/CaptchaInput.vue

<template>
    <!-- 格子验证码输入组件 -->
    <div class="row-center captcha_input_wrap">
        <input
            v-for="(item, index) in captchas"
            :key="index"
            v-model="item.num"
            :id="'captcha' + index"
            @input="inputFinash(index)"
            @focus="adjust(index)"
            @keydown="(e)=>{inputDirection(index,e)}"
            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,e) {
      let val = this.captchas[index].num;
      // 回退键处理
      if (e.key==='Backspace' && val === "") {
        // 重新校准
        let dom = document.getElementById("captcha" + (index - 1));
        this.activeInput = index - 1;
        if (dom) dom.focus();
      }
      if (e.key!=='Backspace' && 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 scoped lang='scss'>
.row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:40px;
}
.captcha_input_wrap {
    width: 100%;
}
.captcha_input_box {
    width: 40px;
    height: 40px;
    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 #3654C1 !important;
}

@media screen and (max-width:650px) {
  .row-center {
    gap:10px;
  }
  .captcha_input_box{
    box-sizing: border-box;
  }
}
</style>