feat: 新增每分钟更新的时钟组件

实现了一个新的Vue组件,即一个数字时钟,它每分钟更新一次显示的时间。该组件使用Vue的Composition API和VueUse的间隔函数进行实现。时间显示格式为HH:mm:ss,采用Moment库进行格式化。
This commit is contained in:
hello8693 2024-08-05 18:05:35 +08:00
parent 9adf607859
commit 21679fcd75

View 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>