Merge pull request #2 from Composur/dev-test

test : tsx

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // 使用 IntelliSense 了解相关属性。
+  // 悬停以查看现有属性的描述。
+  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8848",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

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>
 

src/views/testPage/filpper.tsx

@@ -0,0 +1,93 @@
+import { defineComponent, ref } from "vue";
+import { propTypes } from "@/utils/propTypes";
+import "./filpper.css";
+
+const props = {
+  // front paper text
+  // 前牌文字
+  frontText: propTypes.number.def(0),
+  // back paper text
+  // 后牌文字
+  backText: propTypes.number.def(1),
+  // flipping duration, please be consistent with the CSS animation-duration value.
+  // 翻牌动画时间，与CSS中设置的animation-duration保持一致
+  duration: propTypes.number.def(600)
+};
+
+export default defineComponent({
+  name: "ReFlop",
+  props,
+  setup(props) {
+    // eslint-disable-next-line vue/no-setup-props-destructure
+    const { frontText, backText, duration } = props;
+    const isFlipping = ref(false);
+    const flipType = ref("down");
+    const frontTextFromData = ref(frontText);
+    const backTextFromData = ref(backText);
+
+    const textClass = (number: number) => {
+      return "number" + number;
+    };
+
+    const flip = (type: string, front: number, back: number) => {
+      // 如果处于翻转中，则不执行
+      if (isFlipping.value) return false;
+      frontTextFromData.value = front;
+      backTextFromData.value = back;
+      // 根据传递过来的type设置翻转方向
+      flipType.value = type;
+      // 设置翻转状态为true
+      isFlipping.value = true;
+
+      setTimeout(() => {
+        // 设置翻转状态为false
+        isFlipping.value = false;
+        frontTextFromData.value = back;
+      }, duration);
+    };
+
+    // 下翻牌
+    const flipDown = (front: any, back: any): void => {
+      flip("down", front, back);
+    };
+
+    // 上翻牌
+    const flipUp = (front: any, back: any): void => {
+      flip("up", front, back);
+    };
+
+    // 设置前牌文字
+    function setFront(text: number): void {
+      frontTextFromData.value = text;
+    }
+
+    // 设置后牌文字
+    const setBack = (text: number): void => {
+      backTextFromData.value = text;
+    };
+
+    return {
+      flipType,
+      isFlipping,
+      frontTextFromData,
+      backTextFromData,
+      textClass,
+      flipDown,
+      flipUp,
+      setFront,
+      setBack
+    };
+  },
+
+  render() {
+    const main = `m-flipper ${this.flipType} ${this.isFlipping ? "go" : ""}`;
+    const front = `digital front ${this.textClass(this.frontTextFromData)}`;
+    const back = `digital back ${this.textClass(this.backTextFromData)}`;
+    return (
+      <div class={main}>
+        <div class={front} />
+        <div class={back} />
+      </div>
+    );
+  }
+});