xl-mobile/src/components/XCountdown.vue

<script setup>
import {ref, watch} from "vue";
import dayjs from "dayjs";

const props = defineProps({
    time: {
        type: String,
        default: null,
    }
});

const diff = ref(dayjs(props.time).diff(dayjs(new Date()), 'second'));
const hours = ref(null);
const minutes = ref(null);
const seconds = ref(null);

let timer = null;

watch(
    () => props.time,
    () => {
        console.log('运行')
        clearInterval(timer);
        diff.value = dayjs(props.time).diff(dayjs(new Date()), 'second');
        hours.value = Math.floor(diff.value / 3600);
        minutes.value = Math.floor((diff.value % 3600) / 60);
        seconds.value = diff.value % 60;
        timer = setInterval(() => {
            diff.value = dayjs(props.time).diff(dayjs(new Date()), 'second');
            hours.value = Math.floor(diff.value / 3600);
            minutes.value = Math.floor((diff.value % 3600) / 60);
            seconds.value = diff.value % 60;
        }, 1000);
    },
    {deep: true, immediate: true}
)
</script>

<template>
    <view class="!flex items-center gap-[20rpx]">
        <slot></slot>
        <view class="!flex gap-[16rpx] items-center">
            <view class="time-block" v-if="hours && hours>0">{{ hours < 10 ? `0${hours}` : hours }}</view>
            <view v-if="hours">:</view>
            <view class="time-block" v-if="minutes && minutes>0">{{ minutes < 10 ? `0${minutes}` : minutes }}</view>
            <view v-if="minutes">:</view>
            <view class="time-block" v-if="seconds && seconds>0">{{ seconds < 10 ? `0${seconds}` : seconds }}</view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.time-block {
    background-color: #E8F3FF;
    border-radius: 4rpx;
    padding: 4rpx;
    color: rgb(22, 93, 255);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
}
</style>