手撕组件

vue3 60s 倒计时

<template>
  <div>
    <input v-model="phoneNumber" placeholder="请输入手机号码" />
    <button @click="startCountdown" :disabled="counting">获取验证码</button>
    <span v-show="counting">倒计时: {{ countdown }}s</span>
  </div>
</template>

<script setup>
  import { ref } from "vue";

  const phoneNumber = ref("");
  const counting = ref(false);
  const countdown = ref(60);

  const startCountdown = () => {
    // 发送验证码的逻辑
    // 在这里添加发送验证码的代码

    counting.value = true;
    const interval = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--;
      } else {
        counting.value = false;
        countdown.value = 60;
        clearInterval(interval);
      }
    }, 1000);
  };
</script>