image.png

效果如圖所示，填寫的驗(yàn)證碼自動跳到下一個，監(jiān)聽填寫完之后自動校驗(yàn)驗(yàn)證碼正確性。使用了Vant組件的van-password-input和van-number-keyboard,沒有使用Vant自帶的模態(tài)框組件，代碼如下：

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">請輸入驗(yàn)證碼</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,  //模態(tài)框展示
        showLoading: false,//驗(yàn)證loading 
        invitationCode: '', // 驗(yàn)證碼
        errorInfo: '', // 錯誤提示信息
        showKeyboard: false, // 數(shù)字鍵盤展示
      }
  },
  watch: {
    invitationCode: {
      handler(newVal, oldVal) {
        if (newVal.length === 6) {
          console.log('監(jiān)聽輸入完成', newVal)
          this.showKeyboard = false
          this.showLoading = true
          this.errorInfo = ''
          const params = {
            authCode: newVal
          }
          verifyCode(params).then(res => {  //后臺接口校驗(yàn)是否正確
            if (res.success) {
              this.$toast.success('驗(yàn)證成功')
              this.showMask = false
              this.showKeyboard = false
              //...驗(yàn)證成功執(zhí)行后續(xù)操作
            } else {
              this.errorInfo = '驗(yàn)證碼錯誤，請重試'
              this.invitationCode = ''
              this.showLoading = false
            }
          })
        }
      }
    }
  },
  methods:{
    //驗(yàn)證碼刪除
    onDelete() {
        const arr = this.invitationCode.split('')
        if (arr.length) {
          arr.pop()
          this.invitationCode = arr.join('')
        }
    },
  //展示模態(tài)框
  showMask(){
      this.invitationCode = ''
      this.errorInfo = ''
      this.showMask = true
      this.showKeyboard = true
      this.showLoading = false
  },
  //關(guān)閉模態(tài)框
    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;
    }