获取验证码，倒计时函数控制按钮是否可用

最新推荐文章于 2024-09-26 14:22:46 发布

原创最新推荐文章于 2024-09-26 14:22:46 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

这篇博客介绍了如何在前端实现获取验证码功能的按钮控制，包括在用户点击后禁用按钮，并设置2分钟倒计时后再启用。通过`el-button`组件和`setTimeout`函数，实现了点击后按钮状态的改变以及倒计时逻辑。当请求成功发送验证码后，会显示成功消息，如果请求失败则显示错误信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
点获取验证码，过一段时间才可点击这个按钮

<template>
  <el-button
              type="primary"
              :disabled="keyBtnDisable"
              @click="getKey"
              >获取验证码</el-button>
</template>

<script>
export default {
  data() {
    return {
      keyBtnDisable: false,
    };
  },
  
  methods: {
    getKey() {
      // 请求验证码接口
      postParamsAction("/api/getKey", {
        mobile: this.mobile,
      }).then((res) => {
        if (res.data.errCode == 0) {
          this.$message({
            message: "已发送验证码,2分钟后可重新请求",
            type: "success",
          });
          this.keyBtnDisable = true;
          //倒计时函数
          setTimeout(() => {
            this.keyBtnDisable = false;
          }, 3000);
        } else {
          this.$message.error(res.data.errMsg);
          this.keyBtnDisable = false;
        }
      });
    },