vue商品秒殺倒計時組件

用法:傳入秒數(shù)

<Countdown :time="countdown" @countdownClose="countdownShow=false"></Countdown>
<template>
    <div class="timeBox" v-if="countdownShow">
        <span class="value" v-if="pageData.day > 0">{{ pageData.day }}</span><span class="label" v-if="pageData.day > 0">天</span>
        <span class="value">{{ pageData.hour }}</span><span class="label">:</span>
        <span class="value">{{ pageData.minute }}</span><span class="label">:</span>
        <span class="value">{{ pageData.second }}</span>
    </div>
</template>

<script>
export default {
    name: 'countdown',
    props: {
        time: {
            type: Number
        }
    },
    created() {
        this.interval = setInterval(() => {
            const endTime  = this.time - (new Date() / 1000 | 0)
            if ( endTime <=0 ) {
                clearInterval(this.interval)
                this.countdownShow = false
                this.$emit('countdownClose');
            }
            let date = {
                day: Math.floor(endTime / 86400),
                hour: Math.floor(endTime % 86400 / 3600),
                minute: Math.floor(endTime % 3600 / 60),
                second: Math.floor(endTime % 3600 % 60)
            }

            Object.keys(date).forEach(value => {
                if (date[value].toString().length < 2 && value !== 'day') {
                    this.pageData[value] = "0" + date[value]
                } else {
                    this.pageData[value] = date[value]
                }
            })
        }, 1000);
    },
    beforeDestroy() {
        clearInterval(this.interval)
    },
    data() {
        return {
            countdownShow: true,
            pageData: {
                day: '0',
                hour: '00',
                minute: '00',
                second: '00'
            }
        }
    }
}
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容