H5 仿app验证码输入框（三）

效果图如上两篇，直接上代码吧

div

 <div class="fill-message">
      <input class="input" v-model="text" type="number" maxlength="4" ref="input" @input="onOneInput"/>
      <div class="wrap">
          <div
            @click="oneClick"
            :class="{ active: index == curr  }"
            v-for="(item, index) in 4"
            :key="item"
          >
          {{ text[index] }}
          </div>
     </div>
  </div>

样式

.fill-message {
     padding: 0.67rem 0.44rem;
     .input{
         opacity: 0;
     }
     .wrap {
         display: flex;
         .fx(space-around);
         flex-direction: row;
         div{
           width: 1.56rem;
           height: 1.56rem;
           display: flex;
           justify-content: center;
           align-items: center;
           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;
           }
          &.active {
           position: relative;
           &::after {
             content: "";
             position: absolute;
             top:50%;
             transform: translateY(-50%);
             display: block;
             width: 1px;
             height: 0.78rem;
             background-color: #ccc;
             animation: buling 1.1s infinite;
           }
         }
       }
     }

   }

data() {
    return {
      text: "",
      curr: 0,
    };
  },
// 输入
onOneInput() {
  this.curr = this.text.length
  if (this.curr == 4) {
      this.checkOTPOrPassword(this.text);
  }
  if (!this.text) return;
},
// 校验验证码是否成功
async checkOTPOrPassword(code) {
  const params = {
    auth_code: "" + code,
    password: "",
  };
  console.log(params);
  let res = await API.xxxx(params);
  if (res.code === 0) {
    // 下一步操作
  } else {
    this.text = '';
    this.curr = 0;
    this.$refs.input.blur();
    this.$toast(false, "", res.message);
  }
},
oneClick() {
  this.$refs.input.focus();
},