Vue3 验证码倒计时实现

在登录界面中实现短信验证的倒计时功能

最近在学习Vue3，写登录界面时遇到了短信验证倒计时的问题，代码是根据Vue3+Antd+Js实现的，话不多说直接上代码。

<template>
  <div class="forget">
    <div class="forget-wrap">
      <a-form
        id="components-form-demo-normal-login"
        class="login-form"
        v-bind="formItemLayout"
      >
        <a-from-item>
          <!-- <span class="from-title">登录界面</span> -->
        </a-from-item>
        <a-form-item>
          <label class="from-text">账号</label>
          <a-input placeholder="请输入账号"> </a-input>
        </a-form-item>
        <a-form-item>
          <label class="from-text">新密码</label>
          <a-input type="password" placeholder="请输入新的密码"> </a-input>
        </a-form-item>
        <a-form-item>
          <label class="from-text">确认密码</label>
          <a-input type="password" placeholder="请确认新的密码"> </a-input>
        </a-form-item>
        <a-from-item>
          <label class="from-text">验证码</label>
          <a-row :gutter="10">
            <a-col :span="12">
              <a-input placeholder="请输入验证码" />
            </a-col>
            <a-col :span="12" :push="4">
              <a-button type="primary"
                ><span v-show="show" @click="Verification">获取验证码</span>
                <span v-show="!show" class="count"
                  >{{ count }} s 后获取</span
                ></a-button
              >
            </a-col>
          </a-row>
        </a-from-item>
        <a-form-item>
          <a-button
            type="primary"
            @click="submitModify"
            class="login-form-button"
          >
            找回
          </a-button>
        </a-form-item>
      </a-form>
      <div class="forget-wrap-bottom">
        <a href="" class="text-color"
          ><i class="iconfont icon-zhuce"></i> 返回登录
        </a>
        |
        <router-link to="/Register" class="text-color"
          ><i class="iconfont icon-wangjimima"></i> 快速注册
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Forget",
  setup() {
    const show = ref(true);
    const timer = ref();
    const TIME_COUNT = ref(60);
    const count = ref();
    const submitModify = () => {
      alert("修改密码成功");
    };
    //点击发送验证码
    const Verification = () => {
      if (!timer.value) {
        count.value = TIME_COUNT.value;
        show.value = false;
        timer.value = setInterval(() => {
          if (count.value > 0 && count.value <= TIME_COUNT.value) {
            count.value--;
            console.log("count----", count);
          } else {
            show.value = true;
            clearInterval(timer.value);
            timer.value = null;
          }
        }, 1000);
      }
      alert("已发送，请注意查收");
    };
    return {
      submitModify,
      Verification,
      show,
      timer,
      TIME_COUNT,
      count,
    };
  },
};
</script>

最终的结果：