小程序短信4位6位验证码验证/vue也适用

如图我看有要这种需求的随便贴一下，随便看一下。有需要的根据自己的业务修改一下就OK了

`

  <div class="title">请输入验证码</div>
  <div class="conBox">
      <div class="concon">
        <block v-for="item in verCodeNumber" :key="index">
            <input 
            :value="inputValue.length >= index+1 ? inputValue[index] : '' "
            class='conNum' 
            disabled 
            @tap='Tap'
            ></input>
        </block>
      </div>
      <input 
          class="hiddenInput"
          type="number" 
          name="" 
          :maxlength="verCodeNumber" 
          v-model="inputValue" 
          bindinput="Focus"
          :focus="isFocus" 
          @input="!Focus"
      />
  </div>
  <div class="sendAgain" @click="handleClickSendAgainBtn">{{second}}</div>
</div>  

`

    data(){
      return{
          verCodeNumber:4,
          inputValue:"",
          isFocus:false,
          second:"",
          phoneNum:"",
          canClickAgainSend:true,
      }
    },
    watch:{
        inputValue(newValue){
            console.log(newValue)
            if(newValue == ""){ //为空 关闭键盘 失去焦点
              this.isFocus = false
            }else if(newValue.length >= this.verCodeNumber){//输入完成 关闭键盘 接口校验验证码
              this.isFocus = false
              this.mesCodeSendTest()
              console.log("输入完成")
            }
        }
    },
    mounted(){
      this.phoneNum = this.$root.$mp.query.phoneNum;
      this. startTiming();
      this.canClickAgainSend = false
    },
    methods:{
      Focus(e){
        console.log(e)
      },
      
      Tap(){
        this.isFocus = true
      },
      startTiming(){
          var that = this;
          this.$wxhttp.post({
            host:'app',
            url:'sendSmsCode',
            data: {
              phone:that.phoneNum,
              smsType:3
            },
          }).then((res)=>{
            console.log(res)
            that.canClickSendMessage = false;
            if(res.status != '000000')  {
                wx.showToast({
                    title: res.message,
                    icon: 'none',
                    duration: 1000
                })

                setTimeout(()=>{
                   wx.navigateBack({
                    delta: 1
                  })
                },1000)
            }else{
                var i = 60
                var timer = setInterval(()=>{
                    i--
                    that.second = i +"秒之后重新发送验证码"
                    if(i == 0){
                      that.second = '重新发送'
                      clearInterval(timer);
                       this.canClickAgainSend = true
                    }
                },1000)
            }

          })

      },
      handleClickSendAgainBtn(){
        this.startTiming()
      },