我用Vue3+TS实现了一个新年倒计时组件，适用于各种场景

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

写在前面

最近在写一个考试系统，有一个倒计时自动交卷的需求，正好也马上春节，就有了编写一个倒计时组件的想法。

对于这个倒计时组件，它应该具有这样的功能：

• 字体、颜色等样式可以由使用者自定义；
• 结束时间也可以由使用者自定义；
• 倒计时结束以后，倒计时组件emit一个事件，以便进行后续操作。

现在我们根据这样的需求，去编写这个组件。

组件属性和事件

首先我们创建一个Vue3+TS+setup的基础组件，代码如下：

<template>
  <div></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
onMounted(() => {
  console.log('mounted!')
})
</script>
<style scoped></style>

然后定义组件的props和emits，方便后续编写，定义的内容如下：

interface Props {
  label?: string
  // 字体颜色和背景颜色，接收十六进制字符串
  textColor?: string
  backgroundColor?: string
  height?: string
  width?: string
  // 依次传递 label 时间 描述 的字体大小
  fontSize?: string[]
  mFontSize?: string[]
  // 结束时间࿰