获取验证码倒计时

  <!-- 可以点击 -->
                            <button type="warning" v-if="isGetCode" class="getCode" style="width:40%" round @click="getSendPhoneMessage" size="mini" id="getcode">获取验证码</button>
                            <!-- 不可以 -->
                            <button type="warning" v-else class="getCode grey" style="width:40%" round size="mini" id="getcode">{{time}}秒后可重新获取</button>

初始设置:
 token: "",
 isGetCode: true, // 是否点击了获取code
 time: 60,

getSendPhoneMessage(){
	 var clock = "";
            var nums = 60;
            this.time = nums;

            clock = setInterval(() => {
                nums--;
                if (nums > 0) {
                    this.time = nums + "秒后可重新获取";
                } else {
                    clearInterval(clock); //清除js定时器
                    this.isGetCode = true;
                    this.time = "点击发送验证码";
                    nums = 60; //重置时间
                }
            }, 1000); //一秒执行一次
}

在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值