关于vue.js:使用useIntervalFn倒计时

1. 引入

import { useIntervalFn } from '@vueuse/core'

2. 格局

const {pause, resume } =useIntervalFn(() => {// 具体要做的事件 }, 间隔时间, { immediate: false|true })pause() // 暂停，进行resume()// 持续，开始

3.应用

export const useCountdown = () => {  const time = ref(0)  const { pause, resume } = useIntervalFn(() => {    // 每隔多长时间做什么 回调    time.value--    if (time.value <= 0) {      pause()    }    console.log('useIntervalFn', Date.now())  }, 1000, { immediate: false })  // pause: 暂停,  // resume: 开始  const start = (num) => {    time.value = num    resume()  }   return { time, start }}

在setup中。

const { time, start } = useCountdown()  // 发手机验证码    const send = async () => {      // 1. 验证手机号格局      if (mobile(formData.mobile) !== true) {        Message({ type: 'error', text: '手机号格局不对' })        return      }     if (time.value !== 0) {      return      }      // 2.调用api      try {        await userMobileLoginMsg(formData.mobile)        Message({ type: 'success', text: '验证码曾经发送！' })        // 倒计时        start(60)      } catch (err) {        console.dir(err)        Message({ type: 'error', text: err.response.data.message })      }    }

批改视图

<span @click="send()" class="code">      {{time===0?'发送验证码':`${time}秒后发送`}}</span>