开发背景

开发一款个人博客一直是我的梦想，自我三年前入行以来，一直梦想着自己能独立完成一款个人博客，将陪伴我这一生，待我年迈，看着曾经的过往，也会欣慰。最近使用 NuxtJS3 + Vue3 + AntDesignVue 又一次重构，后端使用的 NestJS + MySQL + Redis + TypeScript，注册功能使用 邮箱 + 密码 + 验证码。

前端方面涉及到了点击 按钮 开启倒计时。

具体实现

最初的想法是在 vue 中编写一个 自定义指令，将这个指令作用于按钮，传入一个数值作为倒计时的初始值。但是第一次在 NuxtJS 中编写自定义指令，有点无从下手，毕竟要使用 Vue 去注册，后来经过各种翻阅资料，发现可以在 plugins 目录中定义 defineNuxtPlugin，在回调参数的 nuxtApp.vueApp 中可以直接注册，那就好办了。

定义指令

在 /utils/directive 目录下新建一个 CountDown.ts 文件，作为倒计时指令。这里需要导出一个对象，这个对象包含 mounted 钩子，指的是指令挂载完成。

export default {
  mounted(el,binding){}
}

在 mounted 钩子中来处理倒计时业务。

mounted(el,binding){
  // 获取按钮的初始文字(获取验证码)
  const normalText = el.innerText;
  // 定义倒计时初始值，如果传有就使用传过来的，没有则默认60秒
  let count = binding.value || 60;
  // 按钮被点击的时候
  el.onclick = () => {
    // 设置按钮禁用
    el.disabled = true;
    // 数值开始-1
    count -= 1;
    // 定义一个定时器，每秒执行一次
    const timer = setInterval(() => {
      // 如果当前count大于1，说明倒计时还未结束，那就修改按钮的文字，继续让count-1
      if(count > 1){
        el.innerText = `（${count > 9 ? count : '0'+count}）秒后重新发送`;
        count -= 1;
      }else{
        // 走到这里说明倒计时结束了，那就开始放开disabled，还原按钮的文字，并清空定时器
        el.disabled = false;
        el.innerText = normalText;
        clearInterval(timer);
      }
    },1000)
  };
}

到了这里指令就定义完成了。

导出注册

为了方便管理，在 /utils/directive 目录下新建了一个 index.ts 文件，用来将所有的指令统一导出。

// index.js

import CountDown from "./CountDown";

export default {
  countdown: CountDown
};

然后在 /plugins 中定义 Directives.ts 文件注册指令。

// 引入所有指令
import directives from "@/utils/directive";

// 定义nuxt插件
export default defineNuxtPlugin((nuxtApp) => {
  // 通过循环注册所有指令
  for(let key in directives){
    nuxtApp.vueApp.directive(key,directives[key])
  }
})

这就把指令注册了，最后我们还需要使用这个插件。

打开 nuxt.config.ts 文件，在 plugins 中引入我们的插件。

export default defineNuxtConfig({
  // ...
  plugins:[
    "@/plugins/Directives",
    // ...
  ]
})

如何使用

在页面的按钮上这样使用：直接通过 v-countdown 使用即可，也可以传入倒计时的数值，这里传入的是 60 ，只需要关注点击之后的业务操作。

<a-button type="primary" v-countdown="60" @click="getEmailCode">获取验证码</a-button>

结语

在NuxtJS这门技术中，我也是个小白，我所封装的指令只是提供一个思路，后期还是需要不断完善，如果有建议的小伙伴欢迎评论指导指导，大家一起学习一起进步。

在下一篇文章，我将介绍NestJS中实现发送邮箱验证码与Redis的存储。