Vue3 Hooks学习

121 阅读1分钟

倒计时Hooks

//useTime.ts
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 }
}
//AboutView
<template>
  <button @click="countdown(3)">倒计时</button>
</template>
<script setup lang="ts">
import { useTime } from '../hooks/useTime.ts'
const { countdown } = useTime()
</script>
<style>
</style>