useCountDown

useCountDown 可用于实现倒计时

基础用法

<template>
  <div>
    <div v-if="isRunningCountDown">
      <button>{{currentCounrDown.seconds}} s</button>
      <button
        @click="
          {
            stopCountDown();
          }
        "
      >
        停止倒计时
      </button>
      <button
        @click="
          () => {
            startCountDown(6 * 1000);
          }
        "
      >
        重新开始倒计时
      </button>
    </div>

    <button
      v-else
      @click="
        () => {
          startCountDown();
        }
      "
    >
      手动触发开始倒计时6秒
    </button>
  </div>
</template>

<script setup lang="ts">

import { useCountDown } from "hooks-vue3";
const {
  isRunning: isRunningCountDown,
  current: currentCounrDown,
  start: startCountDown,
  stop: stopCountDown,
} = useCountDown({
  //倒计时6秒
  time: 6 * 1000,
  //变化时间间隔（毫秒）
  interval: 1000,
  //默认true,设置为false，需要手动触发调用start
  autoStart: false,
  //倒计时改变时触发的回调函数
  onChange: (current) => {
    console.log("当前时间current", current);
  },
  //倒计时结束时触发的回调函数
  onEnd: () => {
    console.log("结束倒计时");
  },
});
</script>

API

const {
  isRunning,
  current,
  start,
  stop,
} = useCountDown({
  //倒计时，秒为单位
  time: number,
  //变化时间间隔（毫秒），默认1000
  interval: number,
  //默认true,设置为false，需要手动触发调用start
  autoStart: false,
  //倒计时改变时触发的回调函数
  onChange: (current) => {
    console.log("当前时间current", current);
  },
  //倒计时结束时触发的回调函数
  onEnd: () => {
    console.log("结束倒计时");
  },
});

参数

type CurrentTime = {
  days: number;
  hours: number;
  total: number;
  minutes: number;
  seconds: number;
  milliseconds: number;
};

type UseCountDownActions = {
  isRunning?: Ref<boolean>;
  start: (time?: number) => void; //手动触发倒计时
  stop: () => void; //停止触发倒计时
  current: Ref<CurrentTime>;
};

type UseCountDownOptions = {
  time: number; //剩余时间（毫秒）
  interval?: number; //变化时间间隔（毫秒）
  immediate?: boolean; //是否立即触发
  autoStart?: boolean; //是否自动开始倒计时
  onChange?: (current: CurrentTime) => void; //变化的回调函数
  onEnd?: () => void; //倒计时结束触发
};

function useCountDown({
  time,
  interval = 1000,
  immediate = false,
  autoStart = true,
  onChange,
  onEnd,
}: UseCountDownOptions): UseCountDownActions