细节优化

src/components/StartCountdown.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref, watch, onUnmounted } from "vue";
+const props = defineProps({
+  start: {
+    type: Boolean,
+    default: false,
+  },
+  onFinish: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const count = ref(4);
+const timer = ref(null);
+watch(
+  () => props.start,
+  (newVal) => {
+    if (newVal) {
+      if (timer.value) clearInterval(timer.value);
+      timer.value = setInterval(() => {
+        if (count.value <= 1) {
+          props.onFinish();
+          clearInterval(timer.value);
+        }
+        count.value -= 1;
+      }, 1000);
+    }
+  },
+  {
+    immediate: true,
+  }
+);
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="container">
+    <view class="number pump-in" v-if="count === 3">3</view>
+    <view class="number pump-in" v-if="count === 2">2</view>
+    <view class="number pump-in" v-if="count === 1">1</view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  position: fixed;
+  top: 120px;
+  left: calc(50% - 30px);
+}
+.number {
+  color: #fff9;
+  font-size: 88px;
+  width: 60px;
+  text-align: center;
+}
+</style>