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

Comma_Zhang

于 2022-09-07 19:51:42 发布

阅读量137

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Comma_Zhang/article/details/126752457

版权

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

<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;
        }
      });
    },