vue3倒计时组件，增加了时间校对

元仙僧

于 2024-01-16 18:23:13 发布

阅读量664

点赞数 11

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue3 js定时器校对

本文链接：https://blog.csdn.net/weixin_42567389/article/details/135631906

本文介绍了如何使用Vue.js编写一个可配置总时长和间隔的倒计时组件，包括计数逻辑、格式化时间和时间间隔控制，以及与父组件的交互方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="countdown-box">
        <span>{
   
   {
   
    formatTime }}</span>
    </div>
</template>

<script lang="ts" setup>

import {
   
    ref, onMounted, onBeforeUnmount, watch } from 'vue';
let formatTime = ref(''); //格式化后的时间

const props = defineProps({
   
   
    totalTime: Number, //总时长 -1未开始 0已结束
    interval: {
   
    //时间间隔
        type: Number,
        default: 1000
    },
})


watch(() => props.totalTime, (newVal, oldVal) => {
   
   
    totalTime = newVal;
    stopCountDown()
    startCountDown()

})


//格式化
/**
 * t: 时间
 * type: 显示类型; 0: :; 1: 小时分钟秒
*/
const secondToTimeStr = (t: number, type: any) => {
   
   
    let timeStr1 = '', timeStr2 = '', timeStr3 = '';
    if (type == 0)