mirror of
https://hub.gitmirror.com/https://github.com/ExamAware/ExamShowboard-Legacy.git
synced 2025-04-29 13:46:32 +00:00
feat: 新增每分钟更新的时钟组件
实现了一个新的Vue组件,即一个数字时钟,它每分钟更新一次显示的时间。该组件使用Vue的Composition API和VueUse的间隔函数进行实现。时间显示格式为HH:mm:ss,采用Moment库进行格式化。
This commit is contained in:
parent
9adf607859
commit
21679fcd75
40
src/renderer/src/components/Clock.vue
Normal file
40
src/renderer/src/components/Clock.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<v-card class="mx-auto" max-width="600">
|
||||
<v-card-text class="text-center">
|
||||
<div class="display-1 font-weight-bold">
|
||||
{{ formattedTime }}
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useIntervalFn } from '@vueuse/core';
|
||||
import moment from 'moment';
|
||||
|
||||
// 使用ref来存储当前时间
|
||||
const formattedTime = ref('');
|
||||
|
||||
// 在页面加载完成后初始化时间
|
||||
onMounted(() => {
|
||||
updateTime();
|
||||
});
|
||||
|
||||
const formatDateTime = (isoString) => moment(isoString).format('HH:mm:ss');
|
||||
|
||||
// 更新时间的函数
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
formattedTime.value = formatDateTime(now);
|
||||
}
|
||||
|
||||
// 每隔一分钟更新一次时间
|
||||
useIntervalFn(updateTime, 250);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.display-1 {
|
||||
font-size: 5rem; /* 调整字号以适应大屏幕 */
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user