实现定时器组件

页面显示时间：

<template><div>{{ display }}</div>
</template>

父组件传来 second 属性值，使用 ref 接收 props.second 并赋值为 left，再利用 computed 根据 left 计算展示的时间，通过 setInterval 控制每秒 left - 1

import { ref, computed } from 'vue'const { second } = defineProps(['second'])
const emit = defineEmits(['finish'])const left = ref(second)
const display = computed(() => {const hh = String(Math.floor(left.value / 3600)).padStart(2, '0')const mm = String(Math.floor((left.value % 3600) / 60)).padStart(2, '0')const ss = String(Math.floor(left.value % 60)).padStart(2, '0')return `${hh}:${mm}:${ss}`
})const timer = setInterval(() => {if(left.value <= 0) {clearInterval(timer)emit('finish')return}left.value -= 1
}, 1000)