vue结合dayjs和@vueuse/core中的useIntervalFn实现格式化倒计时功能

1、首先安装环境

npm install dayjs -s
npm i @vueuse/core -s

2、新建一个conform.js其内容如下：

import {onUnmounted, ref} from "vue";
import {useIntervalFn} from "@vueuse/core";
import dayjs from "dayjs";

export const usePayTime = () => {
    // 倒计时逻辑
    const time = ref(0)
    const timeText = ref('')
    const { pause, resume } = useIntervalFn(() => {
        time.value--
        console.log('time.value', time.value)

        timeText.value = dayjs.unix(time.value).format('mm分ss秒')
        // timeText.value = dayjs.unix(time.value).format('HH小时mm分ss秒')
        // timeText.value = dayjs.unix(time.value).format('DD天HH小时mm分ss秒')
        if (time.value <= 0) {
            pause()
        }
    }, 1000, false)
    onUnmounted(() => {
        pause()
    })

    // 开启定时器 countdown 倒计时时间
    const start = (countdown) => {
        time.value = countdown
        timeText.value = dayjs.unix(time.value).format('mm分ss秒')
        // timeText.value = dayjs.unix(time.value).format('HH小时mm分ss秒')
        // timeText.value = dayjs.unix(time.value).format('DD天HH小时mm分ss秒')
        resume()
    }

    return {
        start,
        timeText
    }
}

3、在APP.vue 中使用，其内容如下：

<template>
  <button  @click="validate_ref">开始倒计时</button>
  <div>
    {{timeText}}
  </div>
</template>

<script setup>
import { ref} from "vue";
import {usePayTime} from './conform'
// 若显示到分钟
const total_seconds = ref(60*2)
// 60*60*2
// 若显示到的是小时数则用这种
// const total_seconds = ref(7200-28800)
// 172800 = 24*60*60*2 即两天
// 若显示到的是天数，就要用下边这种
// const total_seconds = ref(172800-28800-86400)
const { start, timeText } = usePayTime()
const minus = 60
const hours = minus*60
const days = hours*24
const noday = ref(172800)
const day = parseInt(noday.value/days)
const hour = parseInt((noday.value%days)/hours)
const min = parseInt((noday.value%hours)/minus)
const second = parseInt(noday.value%minus)

console.log('day', day)
console.log('hour', hour)
console.log('min', min)
console.log('second', second)
const validate_ref = ()=>{
  start(total_seconds.value)
  // start()
}
</script>
<style scoped lang="less">
</style>

4、效果如下：