48 lines
965 B
Vue
48 lines
965 B
Vue
|
<template>
|
|||
|
|
{{ timeStr }}
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref, Ref, onBeforeUnmount, onMounted, watch } from 'vue';
|
|||
|
|
import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
|
|||
|
|
|
|||
|
|
interface IProps {
|
|||
|
|
time: string | number,
|
|||
|
|
interval?: number
|
|||
|
|
}
|
|||
|
|
const props = withDefaults(defineProps<IProps>(), {
|
|||
|
|
interval: 60 // 默认刷新间隔，单位s
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const timeStr: Ref<string> = ref('-');
|
|||
|
|
const { formatTimeFromNow } = useTimeFormat();
|
|||
|
|
|
|||
|
|
const init = (): void => {
|
|||
|
|
let timeout: number | undefined;
|
|||
|
|
|
|||
|
|
const updateTime = (): void => {
|
|||
|
|
try {
|
|||
|
|
timeStr.value = formatTimeFromNow(props.time);
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
timeout = setTimeout(() => {
|
|||
|
|
updateTime();
|
|||
|
|
}, props.interval * 1000);
|
|||
|
|
} catch (err) {
|
|||
|
|
// ignore
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onBeforeUnmount(() => {
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
timeout = undefined;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
updateTime();
|
|||
|
|
watch(() => props.time, updateTime);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
init();
|
|||
|
|
});
|
|||
|
|
</script>
|