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