vue封装倒计时：

readme：

```javascript
倒计时组件：

1、index.vue   输入倒计时结束的时间："2023-6-24 16:00:00"
    引用：
       import CountDown from '@/components/CountDown/index.vue'
    使用：
       <CountDown time="2023-6-24 16:00:00"></CountDown>
      注意：1、输入为字符串：   所以    time="2023-6-24 16:00:00"
            



2、index2.vue   输入倒计时所经历的时间：[3,0,0,0]    （【天，时，分，秒】）（3天）
    引用：
       import CountDown2 from '@/components/CountDown/index2.vue'
    使用：
       <CountDown2 :time=[3,0,0,0]></CountDown2>
        注意： 1、输入为数组：   所以    :time=[3,0,0,0]
               2、 刷新页面会重新计时

index1.vue

<script setup>
import { onMounted,onUnmounted,ref } from 'vue';

const props=defineProps({
    time:{
        type:String
    }
})

//时间到了：
const timeover=ref(false)
const timeList=ref([0,0,0,0])
const 单位=['天','时','分','秒']
let timer=null
//倒计时函数：每一秒执行一次


const CountDown=()=>{
    let nowTime=+new Date()
    let inputTime=+new Date(props.time)
    let times = (inputTime - nowTime) / 1000
    if( times>=1){
      // 获取剩余天数
      timeList.value[0] = format(parseInt(times / 60 / 60 / 24))
      // 获取剩余小时
      timeList.value[1]= format(parseInt(times / 60 / 60 % 24))
      // 获取剩余分钟
      timeList.value[2] = format(parseInt(times / 60 % 60))
      // 获取剩余秒
      timeList.value[3] = format(parseInt(times % 60))
      // 返回倒计时封装信息的字符串
    }else{
        timeList.value[0]='00'
        timeList.value[1]='00'
        timeList.value[2]='00'
        timeList.value[3]='00'
        timeover.value=true
    }
      
      
}
//修正  把 8秒 变成08 秒
const format =(x)=>{
    return x>=10?x:`0${x}`
}

onMounted(()=>{
  //先执行一次 防止刚打开页面要等1秒才出现倒计时
   CountDown()
   timer=setInterval(CountDown,1000)
})
//切换组件关闭定时器
onUnmounted(()=>{
   clearInterval(timer)
})
</script>


<template>

 <div class="box" :class="{'timeover':timeover}">
    <div class="minibox" v-for="(item,index) in timeList" :key="index"> 
       <div class="time">{{ item }}</div> 
       <div class="danwei">{{ 单位[index] }}</div> 
    </div>
 </div>

</template>


<style scoped lang="scss">
.box{
    display: flex;
    height: 100px;
    width: 400px;
    border: 2px solid silver;
    justify-content:space-between;
    align-items: center;
   
    .minibox{
        position: relative;
        .time{
            height: 80px;
            width: 80px;
            background-color: black;
            color: aliceblue;
            font-size: 40px;
            line-height: 80px;
            margin: 5px;
            text-align: center;
            border-radius: 10px;
        }
        .danwei{
            position: absolute;
            height: 20px;
            width: 20px;
            color: aliceblue;
            font-size: 20px;
            right: 5px;
            bottom: 5px;
       }
    }
    
}
.timeover{
    background-color: red;
}
</style>

index2.vue

<script setup>
import { computed, onMounted,onUnmounted,ref } from 'vue';

const props=defineProps({
    time:{
        type:Array
    }
})
//计算一共多少秒
const timeToSecond=computed(()=>{
    return props.time[0]*24*60*60+props.time[1]*60*60+props.time[2]*60+props.time[3]
})

const 单位=['天','时','分','秒']
let timer=null
//倒计时函数：每一秒执行一次
const xxx=ref(timeToSecond.value)
// 更改格式：
const timeList=computed(()=>{
    let d=0
    let h=0
    let m =0
    let s=0
    let timrover=false
    if(xxx.value>0) {
        d = format(parseInt(xxx.value / 60 / 60 / 24))
      // 获取剩余小时
       h= format(parseInt(xxx.value / 60 / 60 % 24))
      // 获取剩余分钟
      m = format(parseInt(xxx.value / 60 % 60))
      // 获取剩余秒
       s = format(parseInt(xxx.value % 60))
    }else{
        timrover=true
         d='00'
         h='00'
         m ='00'
         s='00'
    }
     
    return {time:[d,h,m,s],timeover:timrover}
})
//修正  把 8秒 变成08 秒
const format =(x)=>{
    return x>=10?x:`0${x}`
}

onMounted(()=>{
  //先执行一次 防止刚打开页面要等1秒才出现倒计时
   
   timer=setInterval(()=>{
    xxx.value--
   
   },1000)
})
//切换组件关闭定时器
onUnmounted(()=>{
   clearInterval(timer)
})
</script>


<template>

 <div class="box" :class="{'timeover':timeList.timeover}">
     <div class="minibox" v-for="(item,index) in timeList.time" :key="index"> 
       <div class="time">{{ item }}</div> 
       <div class="danwei">{{ 单位[index] }}</div> 
    </div> 
 </div>

</template>


<style scoped lang="scss">
.box{
    display: flex;
    height: 100px;
    width: 400px;
    border: 2px solid silver;
    justify-content:space-between;
    align-items: center;
   
    .minibox{
        position: relative;
        .time{
            height: 80px;
            width: 80px;
            background-color: black;
            color: aliceblue;
            font-size: 40px;
            line-height: 80px;
            margin: 5px;
            text-align: center;
            border-radius: 10px;
        }
        .danwei{
            position: absolute;
            height: 20px;
            width: 20px;
            color: aliceblue;
            font-size: 20px;
            right: 5px;
            bottom: 5px;
       }
    }
    
}
.timeover{
    background-color: red;
}
</style>