Vue3+Hooks实现4位随机数和60秒倒计时的示例代码

<template>
  <div class="index">
    <h1>{{ code }}</h1>
    <p>
      <el-input size="small" style="font-size: 13px" placeholder="请输入验证码" />
      <el-button size="small" :disabled="isDisabled" @click="sendCode">{{ countdownText }}</el-button>
    </p>
    <p>{{ `disabled=${isDisabled}` }}</p>
  </div>
</template>

<script lang='ts' setup>
import { useRandomCode } from '@/hooks/useRandomCode'
const code = useRandomCode()
import useCountDown from '@/hooks/useCountDown'
const { countdownText, isDisabled, sendCode } = useCountDown(60)
</script>

<style lang="less" scoped>
.index {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  justify-content: center;
  align-items: center;

  p {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
</style>

import { ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue'

/**
 * 4位随机数
 */
export const useRandomCode = () => {

  const code = ref(('000' + Math.floor(Math.random() * 10000)).slice(-4))

  const fn = () => {
    let num = Math.floor(Math.random() * 10000)
    num = ('000' + num).slice(-4)
    return num
  }

  setInterval(() => {
    code.value = fn()
  }, 1000)

  onMounted(() => {
    console.log('useRandomCode -> onMounted')
  })

  onBeforeUnmount(() => {
    console.log('useRandomCode -> onBeforeUnmount')
  })

  onUnmounted(() => {
    console.log('useRandomCode -> onUnmounted')
  })

  return code
}

import { ref, Ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 
/**
 * 60秒倒计时
 */
export default (num: number, text = '发送验证码'): ({ countdownText: Ref<string>, isDisabled: Ref<boolean>, sendCode: () => void }) => {
  const countdownNum = ref(num)
  const countdownText = ref(text)
  const isDisabled = ref(false)
  
  const sendCode = () => {
    countdownText.value = `${countdownNum.value}s`
    isDisabled.value = true
    const timer = setInterval(() => {
      countdownNum.value--
      countdownText.value = `${countdownNum.value}s`
      if (countdownNum.value === 0) {
        clearInterval(timer)
        countdownNum.value = num
        countdownText.value = text
        isDisabled.value = false
      }
    }, 1000)
  }
 
  onMounted(() => {
    console.log('useCountDown -> onMounted')
  })
 
  onBeforeUnmount(() => {
    console.log('useCountDown -> onBeforeUnmount')
  })
 
  onUnmounted(() => {
    console.log('useCountDown -> onUnmounted')
  })
 
  return { countdownText, isDisabled, sendCode }
}