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

效果图仿上文 地址：juejin.cn/post/713242…

背景

兼容安卓5.0

实现过程

 <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;
            }
          }
        }
      }

    }
    @keyframes buling {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
   }

 text: "",
 curr: 0,
 
 oneClick() {
   this.$refs.input.focus();
},
// 输入
onOneInput() {
  this.curr = this.text.length
  if (this.curr == 4) {
      this.checkOTPOrPassword(this.text);
  }
  if (!this.text) return;
},