数据可视化大屏项目开发中，登录页需要一个验证码发送功能，这里我们来实现这个功能。

使用

<captcha :phone="phone"></captcha>

创建组件captcha

组件接收电话号码，使用label来显示获取验证码，点击发送后，触发接口执行发送，发送成功进行60s倒计时。

<template>
  <label :class="labelClass" @click="requestCaptcha">{{ labelText }}</label>
</template>

<script>
import {getAuthCode} from '@/api/api/LargeScreenData.js'
import {ElMessage} from 'element-plus';  // 引入 Element 的 Message 模块
export default {
  data() {
    return {
      isCaptchaActive: true,   // 判断验证码是否可点击
      countdown: 0            // 倒计时秒数
    }
  },
  props: {
    phone: {
      type: String,
      default: ''
    }
  },
  computed: {
    labelText() {
      return this.countdown > 0 ? `${this.countdown}秒后重试` : '获取验证码';
    },
    labelClass() {
      return {
        'active': this.isCaptchaActive,
        'inactive': !this.isCaptchaActive
      };
    }
  },
  methods: {
    async requestCaptcha() {
      if (!this.isCaptchaActive) return;  // 如果不可点击则直接返回

      if (!this.phone) {
        ElMessage.error('请输入电话号码');
        return;
      }

      try {
        // 请求验证码 API
        const response = await getAuthCode({phone: this.phone});
        console.log(response)
        // 检查返回的响应码
        if (response.code === 0) {
          // 登录成功，重定向到主页
          ElMessage({
            message: '发送成功',
            type: 'success',
          })
          // 设置验证码不可点击并启动倒计时
          this.isCaptchaActive = false;
          this.countdown = 60;
          const interval = setInterval(() => {
            this.countdown--;
            if (this.countdown <= 0) {
              clearInterval(interval);
              this.isCaptchaActive = true;
            }
          }, 1000);
        } else {
          // 登录失败，显示错误消息
          ElMessage.error(response.message);
        }

      } catch (error) {
        console.error('Error fetching captcha:', error);
      }
    }
  }
}
</script>

<style scoped>
label {
  cursor: pointer;
  position: absolute;
  right: 10px;
  width: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.active {
  color: #78a8e5;
}

.inactive {
  color: gray;
}
</style>