美文网首页
vue验证码60秒倒计时

vue验证码60秒倒计时

作者: 吴小冷 | 来源:发表于2022-05-13 11:39 被阅读0次

<span v-show="show" @click="getCode" class="getCode">获取验证码</span>
<span v-show="!show" class="count">{{count}}s后重新获取</span>
data(){
    return {
        show: true,
        count: '',
        timer: null,
    }
},
methods: {
        getCode(){
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                }, 1000)
            }
        }
    }

相关文章

网友评论

      本文标题:vue验证码60秒倒计时

      本文链接:https://www.haomeiwen.com/subject/afwyurtx.html