快捷導(dǎo)航

Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼

更新時間：2024年04月14日 15:48:54 作者：帥龍之龍

Vue3的Hooks是一種新的 API,本文主要介紹了Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼,具有一定的參考價值,感興趣的可以了解一下

前言

首先，Vue3的Hooks是一種新的 API，用于在Vue組件中管理狀態(tài)和生命周期。它們是基于 React Hooks的概念設(shè)計的，可以讓開發(fā)者更方便地在函數(shù)式組件中使用狀態(tài)管理和生命周期函數(shù)。本文給大家分享一下基于Hooks實現(xiàn)的兩個案例。

一、示例代碼

（1）/src/views/HelloWorld.vue

<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>

（2）/src/hooks/useRandomCode.js

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

/**
 * 4位隨機數(shù)
 */
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
}

（3）/src/hooks/useCountDown.ts

import { ref, Ref, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 
/**
 * 60秒倒計時
 */
export default (num: number, text = '發(fā)送驗證碼'): ({ 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 }
}

二、運行效果

三、更多了解見以下文章

詳解hooks在vue3中的使用方法及示例_vue.js_腳本之家

最前端｜一文詳解Vue3.x 中 hooks 函數(shù)封裝和使用 - 知乎

到此這篇關(guān)于Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼的文章就介紹到這了,更多相關(guān)Vue3+Hooks 4位隨機數(shù)和60秒倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: