搜索结果列表页面开发

src/components/Time/README.md

@@ -0,0 +1,15 @@
+# Time
+
+### 说明
+- 将时间自动转换为距离当前的时间，已全局声明
+
+``` js
+<Time :time="2023-07-20 11:21:00" />
+```
+
+### Props
+
+| 参数           | 说明                     | 类型                           | 可选值     | 默认值   |
+|----------------|-------------------------|-------------------------------|-----------|---------|
+| time           | 时间                     | string \| number \| date      | -         | -       |
+| interval?      | 时间刷新间隔，单位s        | number                        | -         | 60      |

src/components/Time/index.vue

@@ -0,0 +1,47 @@
+<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>