shoot-miniprograms/src/components/StartCountdown.vue

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
const props = defineProps({
  start: {
    type: Boolean,
    default: false,
  },
});

const count = ref(4);
const timer = ref(null);
const isIos = ref(true);
watch(
  () => props.start,
  (newVal) => {
    if (newVal) {
      if (timer.value) clearInterval(timer.value);
      count.value = 4;
      timer.value = setInterval(() => {
        if (count.value <= 1) {
          clearInterval(timer.value);
        }
        count.value -= 1;
      }, 1000);
    }
  },
  {
    immediate: true,
  }
);
onMounted(() => {
  const deviceInfo = uni.getDeviceInfo();
  isIos.value = deviceInfo.osName === "ios";
});
onUnmounted(() => {
  if (timer.value) clearInterval(timer.value);
});
</script>

<template>
  <view class="container" :style="{ top: `calc(50% - ${isIos ? 56 : 64}px)` }">
    <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: absolute;
  top: calc(50% - 64px);
  left: calc(50% - 30px);
}
.number {
  color: #fff9;
  font-size: 88px;
  width: 60px;
  text-align: center;
}
</style>