vue获取验证码按钮设置60点击间隔

第一步页面部分

  <el-form-item label="验证码">
          <el-input size="medium"  style="width: 150px" v-model="user.code"></el-input>
          <el-button :disabled="two" type="primary" size="medium" class="ml-5" @click="sendEmailCode" >获取验证码 {{num}}</el-button>
        </el-form-item>

第二步return里面的数据

return {
      num:"",
      two:false
      }

第三步methods里面的方法

 sendEmailCode() {
      let email= this.user.email;
      if(!email) {
        this.$message.warning("请输入邮箱账号")
        return
      }
      if(!/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email)) {
        this.$message.warning("请输入正确的邮箱账号")
        return
      }
      this.num = 60
      this.two = true
      let num = setInterval(() =>{
        this.num -= 1
        if(this.num < 1){
          clearInterval(num),
            this.two = false
          this.num = ""
        }
      },1000)
      // 发送邮箱验证码
      this.request.get("/user/email/" + email).then(res => {
        if (res.code === '200') {
          this.$message.success("发送成功")
        } else {
          this.$message.error("发送失败")
        }
      })
    },

效果图如下