倒计时获取短信验证码防止连续点击 vue

最新推荐文章于 2023-06-08 17:02:17 发布

<div>

最新推荐文章于 2023-06-08 17:02:17 发布

阅读量337

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/max100c/article/details/125292488

版权

1、模板区域

 <el-button :type="typeValue" @click="djsTime" :disabled="able">{{djs}}</el-button>

2、数据变量

   able: false,
      djs: "获取验证码",
      djsMove: 15,
      typeValue: "primary",
      isClick: true,

3、方法

  djsTime() {
      if (this.isClick) {
        this.isClick = false;
        let djsAll = setInterval(() => {
          this.djsMove--
          if (this.djsMove == 0) {
            this.djs = "获取验证码";
            clearTimeout(djsAll);
            this.djsMove = 15;
            this.typeValue = "primary";
            this.able = false;
          } else {
            this.djsMove = this.djsMove >= 10 ? this.djsMove : "0" + this.djsMove;  
            this.djs = "还剩下" + this.djsMove + "秒";
            this.typeValue = "success";
            this.able = true;
          }
        }, 1000);
          setTimeout(() => {
            this.isClick = true
          },1000)
      }
    },