H5 仿app验证码输入框

实现效果：

1. 从第一个输入框，从左到右依次输入
2. 不可更改其中某一项（比如输入3个数字后，想修改第2个,不可！！）
3. 输入4个数字后自动调用接口
4. 可删除，删除上一个

实现过程：

<div class="fill-message">
    <div v-for="(item,index) in captchas" :key="index">
        <input
            v-model="item.num"
            :id="'captcha'+index"
            @focus="onOneFouce($event, index)"
            @input="onOneInput($event, index)"
            @keyup.delete="deleteOneInput($event, index)"
            class="captcha_input_box row-center"
            type="tel"
            autofocus //自动获取焦点，拉起键盘
            autocomplete="off" // 不保存输入的数字
            maxlength="1"
        />
    </div>
  </div>

.fill-message {
      display: flex;
      padding: 0.67rem 0.44rem;
      div {
        flex: 1;
        input[type='tel'] {
          display: block;
          flex: 1;
          width: 1.56rem;
          height: 1.56rem;
          outline: none;
          padding: 10px 0;
          font-size: 20px;
          font-weight: bold;
          background: rgba(242, 244, 248, 1);
          border-radius: 0.22rem;
          text-align: center;
          transition: all ease 0.6s;
          &:last-child {
            margin-right: 0;
          }
          &:focus {
            border-color: #333;
          }
        }
      }
    }

 setup(props, conx) {
        const message = reactive({
            captchas: [
                { num: "" },
                { num: "" },
                { num: "" },
                { num: "" },
            ],
 
        });
        
        const methods = {
           
            // 自动校准输入顺序
            onOneFouce(e: Event, index: any) {
                const str = Object.values(message.captchas).map(item => item.num).join("")
                const dom = document.getElementById("captcha" + (str.length));
                if (dom) dom.focus()
            },
            // 输入
            onOneInput(e: Event, index: any) {
                const value = (e.target as HTMLInputElement).value.slice(0, 1);
                let dom: any = document.getElementById("captcha" + index);
                let regExp = (/^[0-9]+$/);
                if (!regExp.test(value)) {
                    return dom.value = ""
                }
                dom.value = value
                message.captchas[index].num = value;
                if (index == message.captchas.length - 1) {
                    let code = message.captchas.map((x: any) => x.num).join("");
                    if (code.length == 4) {
                        console.log('chenggong', code)
                        methods.xxxx(code)
                    }
                }
                if (index + 1 >= message.captchas.length) return;
                if (!message.captchas[index].num) return;
                let domN: any = document.getElementById("captcha" + (index + 1))
                domN.focus();
            },
            // 删除
            deleteOneInput(e: any, index: any) {
                if (index <= 0) return;
                message.captchas[index-1].num = ""
                let dom: any = document.getElementById("captcha" + (index - 1));
                dom.focus();
            },
        };

        onMounted(() => {
          
        });
        return {
            ...toRefs(data),
            ...methods,
        }
    },
});