vue获取验证码后，一分钟倒计时

最新推荐文章于 2023-05-29 11:02:18 发布

只吃一口e

最新推荐文章于 2023-05-29 11:02:18 发布

阅读量249

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_43628847/article/details/120006893

版权

这篇博客介绍了如何在Vue项目中使用Element UI组件库创建一个发送验证码的按钮，并实现点击后的验证逻辑以及验证码60秒倒计时功能。代码中展示了data中的定义，包括校验、发送请求、倒计时处理等关键步骤。

摘要由CSDN通过智能技术生成

html

<el-button type="primary" class="code-but" @click='code'
        :disabled="codeDisabled"
        >
        {{codeMsg}}
</el-button>

请添加图片描述
在data中定义

js

code() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$axios.get('/login/authCode', {
          params: { phone: this.loginForm.phone },
        });
        window.console.log(res);
        if (res.code !== 200) {
          this.$message.error(res.msg);
        } else {
          this.$message.success('获取验证码成功');
          // 获取验证码倒计时
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 60) {
                this.countdown -= 1;
                this.codeDisabled = true;
                if (this.countdown !== 0) {
                  const codeMsgs = '重新获取';
                  this.codeMsg = codeMsgs.concat(this.countdown, 's');
                } else {
                  clearInterval(this.timer);
                  this.codeMsg = '获取验证码';
                  this.countdown = 60;
                  this.timer = null;
                  this.codeDisabled = false;
                }
              }
            }, 1000);
          }
        }
      });