倒计时Hooks
import { ref } from 'vue'
export const useTime = () => {
const countdown = (time: number) => {
const maxTime = ref(time)
let startTime: number | null = null
const intervalFunction = () => {
if (maxTime.value > 0) {
maxTime.value--
console.log(maxTime.value)
} else {
clearInterval(startTime!)
startTime = null
console.log('倒计时结束')
}
}
startTime = setInterval(intervalFunction, 1000)
}
return { countdown }
}
<template>
<button @click="countdown(3)">倒计时</button>
</template>
<script setup lang="ts">
import { useTime } from '../hooks/useTime.ts'
const { countdown } = useTime()
</script>
<style>
</style>