vue获取验证码切换

 代码如下

点击获取验证码按钮 变换成 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);
                }
            });
        },
}