Skip to content

ResJI/vue-cycle-timer

Repository files navigation

VueCycleTimer

说明

该组件为Vue3中的定时器。同时提供use版本,可在组件挂在时自启动 在线Demo

安装

npm install vue-cycle-timer

使用

1.说明

export default class Timer {
    constructor(callback: () => void, interval: number, immediate?: boolean);
    start: (immediate?: boolean | null) => void;
    stop: () => void;
    restart: (immediate?: boolean | null) => void;
}
export declare function useCycleTimer(callback: () => void, interval: number, immediate?: boolean): Timer;

// interval: 定时器时间间隔
// immediate: true(启动时立即调用回调函数),默认为true

2.手动控制

<script lang="ts" setup>
import VueCycleTimer from 'vue-cycle-timer'
const manualTimer = new CycleTimer(()=>{
  // todo: 定时器回调函数
}, 1000)
manualTimer.start() // 启动定时器
manualTimer.restart() // 重启定时器
manualTimer.stop() // 停止定时器
</script>

3.自动控制(onMounted自启动,onUnmounted停止)

<script lang="ts" setup>
import { useCycleTimer } from 'vue-cycle-timer'
useCycleTimer(() => {
  // todo: 定时器回调函数
}, 1000)
</script>

About

vue3循环定时器

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published