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