vue3倒计时功能封装

在前端项目中，倒计时功能是较为常用的功能模块，今天在做vue3项目时，正好碰到了这个需求，于是封装了一个功能函数，有了一些新的想法，决定记录一下......

需要实现的效果是：

点击图一的发送验证码按钮（如图一）

开始倒计时，并显示几秒后重新发送（如图二）

在倒计时过程中，按钮不能点击

倒计时结束后变回原样（如图一）

js写法

     const counter = ref(0)
     let timer = -1

// send点击事件
if(counter.value>0) return
 const send = ()=>{
         counter.value = 60
         timer = window.setInterval(() => {
          counter.value--
          if (counter.value === 0) {
            clearInterval(timer)
          }
        }, 1000)
 }

定义两个变量，一个用来接收定时器，一个用来接收时间

点击按钮，判断是否在倒计时中，如果在直接return（类似按钮禁用）

给counter赋值，赋值为要倒计时的时长

counter--

判断，当counter的值到0时停止，清楚定时器

以上是在vue3中通过ji代码实现的效果
接下来是通过vue3来实现： 在vue3中,可以搭配vueuse/core使用
下包: yarn add @vueuse/core

导入: import { useIntervalFn } from "@vueuse/core"

解构:

const { pause: 暂停, resume: 开始 } = useIntervalFn(() => { // 回调 }, 间隔时长, {immediate: 是否立即执行})

具体代码:

// 倒计时功能
export function useCountDown(){
  const counter = ref(0)
  const { pause, resume} = useIntervalFn(() => {
    if(counter.value === 0) {
        pause()
    } else {
      counter.value--
    }
  }, 1000, { immediate: false})

  const start = (num: number) => {
    counter.value = num
    resume()
  }

  return { counter, start }
}

在需要的地方使用:

import { useCountDown } from '@/utils/hooks';
 const {counter,start} = useCountDown()

  const send = ()=>{
       start(60)
  }

start()里面传要倒计时的时间
counter代表倒计时的时间
如果其他地方需要用到这个效果,只需要引入使用就行