image.png

效果如图所示，填写的验证码自动跳到下一个，监听填写完之后自动校验验证码正确性。使用了Vant组件的van-password-input和van-number-keyboard,没有使用Vant自带的模态框组件，代码如下：

1.template

    <!-- 填写邀请码 -->
    <div class="mask-box" v-show="showMask">
      <div class="context-box">
        <div class="close-img">
          <van-icon name="cross" size="20px" color="#666" @click="closeMask" />
        </div>
        <div class="mask-title">请输入验证码</div>
        <van-password-input
          :value="invitationCode"
          :length="6"
          :gutter="10"
          :mask="false"
          :error-info="errorInfo"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <div v-if="showLoading" class="code-loading"><van-loading /></div>
        <van-number-keyboard
        :maxlength="6"
        :show="showKeyboard"
         @input="onInput"
         @delete="onDelete"
         @blur="showKeyboard = false"
        />
    </div>
</template>

2.script

export default {
    data() {
      return {
        showMask: false,  //模态框展示
        showLoading: false,//验证loading 
        invitationCode: '', // 验证码
        errorInfo: '', // 错误提示信息
        showKeyboard: false, // 数字键盘展示
      }
  },
  watch: {
    invitationCode: {
      handler(newVal, oldVal) {
        if (newVal.length === 6) {
          console.log('监听输入完成', newVal)
          this.showKeyboard = false
          this.showLoading = true
          this.errorInfo = ''
          const params = {
            authCode: newVal
          }
          verifyCode(params).then(res => {  //后台接口校验是否正确
            if (res.success) {
              this.$toast.success('验证成功')
              this.showMask = false
              this.showKeyboard = false
              //...验证成功执行后续操作
            } else {
              this.errorInfo = '验证码错误，请重试'
              this.invitationCode = ''
              this.showLoading = false
            }
          })
        }
      }
    }
  },
  methods:{
    //验证码删除
    onDelete() {
        const arr = this.invitationCode.split('')
        if (arr.length) {
          arr.pop()
          this.invitationCode = arr.join('')
        }
    },
  //展示模态框
  showMask(){
      this.invitationCode = ''
      this.errorInfo = ''
      this.showMask = true
      this.showKeyboard = true
      this.showLoading = false
  },
  //关闭模态框
    closeMask() {
      this.showKeyboard = false
      this.showMask = false
    }
  }
}

3.style

    .mask-box{
      position: fixed;
      left:0;
      right:0;
      top:0;
      bottom:0;
      background-color: rgba(0,0,0,.7);
      .context-box{
        width:90%;
        background: #fff;
        border:1px solid #fd0;
        height:280px;
        width: 320px;
        margin:auto;
        margin-top:44px;
        border-radius: 20px;
        padding: 10px;
        box-sizing: border-box;
        overflow-y: auto;
        .close-img{
          width:20px;
          height:20px;
        }
        .mask-title{
          color:#333;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          margin:30px 0 50px 0;
        }
        .code-loading{
          text-align: center;
          margin-top:10px;
        }
        .van-password-input__item{
          background: #f5f5f5 !important;
        }
      }
    }
    .van-number-keyboard{
      bottom: 30px;
    }