Vue定时任务

Vue定时任务_第1张图片

1.创建的头部

<template>
<div>
    <van-field v-model="newcode" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
          <van-button  type="primary" @click="sms" :disabled='status'>{{msg}}</van-button>
</div>
 </template>

2.定义的属性

        mobile:"",
          newcode:"",
          status: false,
		      msg: '获取验证码',
		      time: 60

3.定义方法

        sms(){
          this.axios.post("/user/sendcode",{
              Mobile:this.mobile
          }).then((resp) => {
            console.log(resp)
            if (resp.data.code==200){
               var t=setInterval(()=>{
                if(this.time==0){
                  this.msg="发送验证码";
                  this.status=false;
                  this.time=20;
                  clearInterval(t);
              }else{
                  this.msg=this.time + '秒';
                  this.time--;
                  this.status=true;
                }
            },1000)
              console.log("发送验证码成功",resp)
            }
          }).catch((err) => {
            console.log("发送失败",err)
          });
        },

你可能感兴趣的:(vue,vue.js,前端)