发送验证码倒计时效果实现

---

前言

今天用@vueuse/core中提供的一个方法，实现发送验证码时倒计时的一个效果。这样的场景使我们经常会见到的，一起来看一下如何实现

---

一、应用场景

用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。

所以对用户点击发送验证码后的按钮，进行一个倒计时的防抖操作是必须的。

二、代码演示

用到的button全局组件 ===》vue3——自己封装按钮组件
使用@vueuse/core中的useIntervalFn来帮助我们完成这项工作

首先需要在项目根目录下打开任意终端,执行npm i @vueuse/core@5.3.0

代码如下（示例）：

<template>
  <div class="home-container">
    <my-button type="plain" size="middle" @click="sendCode"