前言

平时总会遇到公司UI设计不一样的倒计时样式，如下图：

于是就自己写了一个组件分享一下，直接上代码。

子组件:exam-time

<template>
  <div class="time-box flex-center mb-24">
    <span class="t--num mr-4 flex-center">{{ hArr[0] }}</span>
    <span class="t--num flex-center">{{ hArr[1] }}</span>
    <span class="t--dv mr-8 ml-8 flex-center">:</span>
    <span class="t--num mr-4 flex-center">{{ mArr[0] }}</span>
    <span class="t--num flex-center">{{ mArr[1] }}</span>
    <span class="t--dv mr-8 ml-8 flex-center">:</span>
    <span class="t--num mr-4 flex-center">{{ sArr[0] }}</span>
    <span class="t--num flex-center">{{ sArr[1] }}</span>
  </div>
</template>

<script setup>
const emits = defineEmits(['timeInPaper']);
const timer = ref(null);
const hArr = ref([0, 0]); // 记录小时
const mArr = ref([0, 0]); // 记录分钟
const sArr = ref([0, 0]); // 记录秒
const countDown = seconds => {
  // 倒计时
  timer.value = setInterval(() => {
    if (seconds == 0) {
      clearTimer(); // 清除定时任务
      emits('timeInPaper'); // 自动交卷
      return;
    }
    seconds--;
    let h = parseInt((seconds / (60 * 60)) % 24);
    h = h < 10 ? '0' + h : h;
    let m = parseInt((seconds / 60) % 60);
    m = m < 10 ? '0' + m : m;
    let s = parseInt(seconds % 60);
    s = s < 10 ? '0' + s : s;

    hArr.value = h.toString().split('');
    mArr.value = m.toString().split('');
    sArr.value = s.toString().split('');
  }, 1000);
};
// 清楚定时器
const clearTimer = () => {
  clearTimeout(timer.value);
  timer.value = null;
};
defineExpose({
  timer,
  countDown,
  clearTimer,
});
</script>

<style lang="less" scoped>
.time-box {
  .t--num {
    width: 32px;
    height: 32px;
    background: rgba(24, 144, 240, 0.08);
    border-radius: @border-radius-base;
    font-size: 18px;
    font-weight: 600;
    color: #1890f0;
  }
  .t--dv {
    font-size: 18px;
    font-weight: 600;
    color: #1890f0;
  }
}
</style>

父组件使用

<template>
 <!-- 倒计时 -->
   <ExamTime ref="refExamTime" @timeInPaper="timeInPaper" />
 <!-- end -->
</template>
<script setup>
import ExamTime from './components/exam-time.vue';

const refExamTime = ref(null); // 倒计时
//请求获取时间-秒
const getTime=()=>{
   try {
    let { code, data } = await api({ id: route.query.id });
    if (code == 200) {
      let times = parseInt(data.remainSeconds);
      refExamTime.value.countDown(times);
    }
  } catch (error) {
    console.log(error);
  }
}
// 倒计时结束自动提交
const timeInPaper = () => {
  console.log(111);
};
</script>

总结

以上就是这篇文章的全部内容，有错误处希望大家纠正。