vue3中验证码倒计时实现

754 阅读1分钟

<template>
  <el-button @click="getCaptcha" :disabled="text === '获取验证码' ? false : true">{{ text }}</el-button>
</template>
<script setup lang="ts">
import { ref } from "vue";
const text = ref("获取验证码");
const getCaptcha = async () => {
  let n = 60;
  text.value = n + "秒钟重新获取";
  const timer = setInterval(() => {
    if (n === 0) {
      clearInterval(timer);
      text.value = "获取验证码";
    } else {
      n--;
      text.value = n + "秒钟重新获取";
    }
  }, 1000);
};
</script>