vue3+ts：实现倒计时

以下是倒计时五分钟的一个简单案例

<template>
  <div class="bg">
    <div class="tips">
      <div class="unfinshed">{{ tips }}</div>
      <div v-if="isShow">
        剩余支付时间为 <span>{{ countDown }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const countDown = ref('') // 倒计时时间：时:分
const tips = ref('待支付') // 支付提示
const isShow = ref(true) // 是否显示剩余时间
let timer: ReturnType<typeof setInterval> | any = null
const maxTime = ref(300) // 倒计时间
const startCountdown = () => {
  if (maxTime.value >= 0) {
    timer = setInterval(() => {
      let minutes: number | string = Math.floor(maxTime.value / 60)
      let seconds: number | string = Math.floor(maxTime.value % 60)
      minutes = minutes < 10 ? '0' + minutes : minutes
      seconds = seconds < 10 ? "0" + seconds : seconds
      countDown.value = minutes + ':' + seconds
      // maxTime.value > 0 && maxTime.value--
      maxTime.value--
      if (maxTime.value < -1 ) {
        tips.value = '支付超时'
        isShow.value = false
        stopCountdown()
      }
    }, 1000)
  }
}

const stopCountdown = () => {  
  if (timer !== null) {  
    clearInterval(timer)  
    timer = null  
  }  
}  

onMounted(() => {
  startCountdown() // 在组件挂载后开始倒计时
})

onUnmounted(() => {
  // 在组件卸载前停止倒计时
  stopCountdown()
})
</script>

<style scoped>
.bg {
  width: 550px;
  height: 300px;
  background-image: url('../assets/background-image.jpg');
  background-size: cover;
  padding: 20px;
  position: relative;
}
.tips {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  text-align: start;
  color: #fff;
}
.unfinshed {
  font-size: 24px;
  font-weight: 700;
}
</style>