test: tsx

src/router/modules/test.ts

@@ -1,6 +1,6 @@
 export default {
   path: "/test",
-  redirect: "/test/403",
+  redirect: "/test/countdown",
   meta: {
     icon: "material-symbols:import-contacts-outline",
     title: "测试页面"
@@ -11,8 +11,7 @@ export default {
       name: "Countdown",
       component: () => import("@/views/testPage/Countdown.vue"),
       meta: {
-        title: "倒计时",
-        keepAlive: false
+        title: "倒计时"
       }
     }
   ]

src/views/testPage/Countdown.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import { ref, nextTick, unref } from "vue";
-import { HTMLElementPlus } from "./types";
-// import { formatDate } from "@vueuse/core";
+import { ref, onMounted, unref } from "vue";
 import { formatDate } from "@/utils/formatDate";
 import Flippers from "./Flippers.vue";
 // defineOptions({
 //   name: "Countdown"
 // });
 
-const flipObjs = ref<(HTMLElementPlus | null)[]>([]);
+const flipObjs = ref([]);
 
-const flipperHour1 = ref<HTMLElementPlus | null>(null);
-const flipperHour2 = ref<HTMLElementPlus | null>(null);
-const flipperMinute1 = ref<HTMLElementPlus | null>(null);
-const flipperMinute2 = ref<HTMLElementPlus | null>(null);
-const flipperSecond1 = ref<HTMLElementPlus | null>(null);
-const flipperSecond2 = ref<HTMLElementPlus | null>(null);
+const flipperHour1 = ref(null);
+const flipperHour2 = ref(null);
+const flipperMinute1 = ref(null);
+const flipperMinute2 = ref(null);
+const flipperSecond1 = ref(null);
+const flipperSecond2 = ref(null);
 
 // 初始化数字
 const init = () => {
@@ -25,8 +23,17 @@ const init = () => {
     flipObjs?.value[i]?.setFront(nowTimeStr[i]);
   }
 };
-
-nextTick(() => {
+// 倒计时
+const start = () => {
+  const now = new Date();
+  const nowTimeStr = formatDate(new Date(now.getTime()), "hhiiss");
+  setInterval(() => {
+    for (let i = 0; i < flipObjs.value.length; i++) {
+      flipObjs?.value[i]?.setBack(nowTimeStr[i]);
+    }
+  }, 1000);
+};
+onMounted(() => {
   flipObjs.value = [
     unref(flipperHour1),
     unref(flipperHour2),
@@ -36,6 +43,7 @@ nextTick(() => {
     unref(flipperSecond2)
   ];
   init();
+  start();
 });
 </script>
 

src/views/testPage/Flippers.vue

@@ -1,11 +1,30 @@
 <script setup lang="ts">
 import { ref, defineExpose, computed } from "vue";
+
+const props = defineProps({
+  frontText: {
+    type: Number,
+    default: 0
+  },
+  backText: {
+    type: Number,
+    default: 1
+  }
+});
+
 // 设置前牌文字
-const frontTextFromData = ref(0);
+const frontTextFromData = ref(props.frontText);
+// 设置后排文字
+const backTextFromData = ref(props.backText);
+
 function setFront(text: number): void {
   frontTextFromData.value = text;
 }
 
+function setBack(text: number): void {
+  backTextFromData.value = text;
+}
+
 const textClass = (number: number) => {
   return "number" + number;
 };
@@ -14,12 +33,15 @@ const styleName = computed(() => {
   return {
     mainClass: `m-flipper down go`,
     font: `digital front ${textClass(frontTextFromData.value)}`,
-    back: `digital back ${textClass(frontTextFromData.value)}`
+    back: `digital back ${textClass(backTextFromData.value)}`
   };
 });
 
+// 缓存 promise 测试
+
 defineExpose({
-  setFront
+  setFront,
+  setBack
 });
 </script>