vue获取验证码切换

最新推荐文章于 2025-02-21 22:02:02 发布

原创最新推荐文章于 2025-02-21 22:02:02 发布 · 464 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一个基于Vue的前端开发示例，展示如何设计一个点击获取验证码后，自动在限定时间内重发的组件。通过JavaScript定时器实现倒计时，并在验证成功后停止计时。

代码如下

点击获取验证码按钮变换成 xx秒后重发

                       <el-form-item>
                            <el-input
                                type="text"
                                placeholder="请输入短信验证码"
                            />
                            <div
                                //绑定事件
                                @click.stop="senderVerficationCode"
                                v-if="show"
                            >
                                获取验证码
                            </div>
                            <div v-if="!show">
                                {{ count }}秒后重发
                            </div>
                        </el-form-item>

    data() {
        return {
            show:true,
            count:"",
            timer:null,
            } }

methods: {
  senderVerficationCode() {
            let TIME_COUNT = 6;
            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);
                this.getcode();
            }
        },

        getcode() {
            request.post("/verificationCode").then((res) => {
                if (res.code === "0") {
                    setTimeout(() => {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                    }, 3000);
                }
            });
        },
}