update

src/components/XCountdown.vue

@@ -1,25 +1,39 @@
 <script setup>
-import {ref} from "vue";
+import {ref, watch} from "vue";
 import dayjs from "dayjs";
 
-const {time} = defineProps({
+const props = defineProps({
     time: {
         type: String,
-        default: dayjs(new Date()).add(20, 'minutes'),
+        default: null,
     }
 });
 
-const diff = ref(dayjs(time).diff(dayjs(new Date()), 'second'));
+const diff = ref(dayjs(props.time).diff(dayjs(new Date()), 'second'));
 const hours = ref(null);
 const minutes = ref(null);
 const seconds = ref(null);
 
-const timer = setInterval(() => {
-    diff.value = dayjs(time).diff(dayjs(new Date()), 'second');
-    hours.value = Math.floor(diff.value / 3600);
-    minutes.value = Math.floor((diff.value % 3600) / 60);
-    seconds.value = diff.value % 60;
-}, 1000);
+let timer = null;
+
+watch(
+    () => props.time,
+    () => {
+        console.log('运行')
+        clearInterval(timer);
+        diff.value = dayjs(props.time).diff(dayjs(new Date()), 'second');
+        hours.value = Math.floor(diff.value / 3600);
+        minutes.value = Math.floor((diff.value % 3600) / 60);
+        seconds.value = diff.value % 60;
+        timer = setInterval(() => {
+            diff.value = dayjs(props.time).diff(dayjs(new Date()), 'second');
+            hours.value = Math.floor(diff.value / 3600);
+            minutes.value = Math.floor((diff.value % 3600) / 60);
+            seconds.value = diff.value % 60;
+        }, 1000);
+    },
+    {deep: true, immediate: true}
+)
 </script>
 
 <template>