mobile/src/components/countdown/index.vue

<template>
  <div class="countdown">{{ data.countdown }}</div>
</template>
<script lang="ts" setup>
defineOptions({
  name: 'countdown',
})
const data = reactive({
  countdown: '',
})
const props = defineProps<{ seconds: number }>()
const emits = defineEmits(['ticker', 'ender'])
onMounted(() => {
  methods.start()
})
const methods = {
  start(seconds = props.seconds) {
    func.timer({
      seconds,
      ticker(tick) {
        data.countdown = methods.duration(tick)
      },
      ender(time) {
        emits('ender', time)
      },
    })
  },
  /** 时长处理 */
  duration(times) {
    if (times) {
      let m: number | string = Math.floor(Number(times) / 60)
      let s: number | string = Math.floor(Number(times) % 60)
      if (s < 10) {
        s = `0${s}`
      }
      if (m < 10) {
        m = `0${m}`
      }
      return `${m}:${s}`
    }
  },
}
defineExpose(methods)
</script>
<style lang="scss" scoped>
.countdown {
  margin-top: 2rpx;
}
</style>