Vue3+Hooks实现4位随机数和60秒倒计时的示例代码
作者：帅龍之龍
Vue3的Hooks是一种新的 API,本文主要介绍了Vue3+Hooks实现4位随机数和60秒倒计时的示例代码,具有一定的参考价值,感兴趣的可以了解一下
前言
首先，Vue3的Hooks是一种新的 API，用于在Vue组件中管理状态和生命周期。它们是基于 React Hooks的概念设计的，可以让开发者更方便地在函数式组件中使用状态管理和生命周期函数。本文给大家分享一下基于Hooks实现的两个案例。
一、示例代码
（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位随机数
*/
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 = '发送验证码'): ({ 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 函数封装和使用 - 知乎
到此这篇关于Vue3+Hooks实现4位随机数和60秒倒计时的示例代码的文章就介绍到这了,更多相关Vue3+Hooks 4位随机数和60秒倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！