vue倒计时组件

### 组件: countDown.vue
```
<template>
    <div class="countDown_container">
        <slot v-bind="dateData"></slot>
    </div>
</template>
<script>
import dayjs from "dayjs";

export default {
    name: "countDown",
    props: {
        computeEndTimeFlag: Boolean, // 是否计算结束时间
        nowTime: {
            type: String | Number,
            default: () => Date.now()
        },
        startTime: {
            type: String | Number,
        },
        endTime: {
            type: String | Number,
            required: true,
        },
        showDay: Boolean,
    },
    data() {
        return {
            dateData: {},
            realEndTime: null,
        }
    },
    created() {
        const realEndTime = this.computeEndTimeFlag ? new Date(this.endTime).getTime() : this.getRealEndTime()
        this.realEndTime = realEndTime
        this.$emit("getRealEndTime", realEndTime)

this.setDateData(realEndTime - new Date().getTime())

this.updateState();
        this.timeInterval = setInterval(() => {
            this.updateState()
        }, 1000)
    },
    methods: {
        getRealEndTime() {
            const timeRemaining = new Date(this.endTime).getTime() - new Date(this.nowTime).getTime()
            return new Date().getTime() + timeRemaining
        },
        /**
         * 时间小于10补零
         * */
        timeFormat(param) {
            return param < 10 ? "0" + param : param;
        },
        /**
         * 时间格式化HHmmss
         * */
        formateHHmmss(time) {
            let day = parseInt(time / 1000 / (60 * 60 * 24));
            let hou = parseInt((time / 1000 % (60 * 60 * 24)) / 3600) + (this.showDay ? 0 : (day * 24));
            let min = parseInt(((time / 1000 % (60 * 60 * 24)) % 3600) / 60);
            let sec = Math.ceil(((time / 1000 % (60 * 60 * 24)) % 3600) % 60);
            let HHmmss = {
                day: this.timeFormat(day),
                hou: this.timeFormat(hou),
                min: this.timeFormat(min),
                sec: this.timeFormat(sec)
            };
            return HHmmss;
        },
        /**
         * 更新倒计时状态
         */
        updateState() {
            const endTime = new Date(dayjs(this.realEndTime).format("YYYY-MM-DD HH:mm:ss")).getTime();
            const nowTime = new Date().getTime();
            let beginTime = -1;
            const finishTime = endTime - nowTime;
            let hhmmss = null;
            if (!!this.startTime) {
                const starTime = new Date(dayjs(this.startTime).format("YYYY-MM-DD HH:mm:ss")).getTime();
                beginTime = starTime - nowTime;
            }
            if (beginTime >= 0) {
                hhmmss = this.setDateData(beginTime)
                this.$emit("begin")
            } else if (finishTime >= 0) {
                hhmmss = this.setDateData(finishTime)
                this.$emit("timing", hhmmss)
            } else {
                hhmmss = {
                    day: "00",
                    hou: "00",
                    min: "00",
                    sec: "00"
                };
                clearInterval(this.timeInterval)
                this.$emit("done")
            }
        },
        setDateData(v) {
            const { day, hou, min, sec } = this.formateHHmmss(v);
            const hhmmss = {
                day: day,
                hou: hou,
                min: min,
                sec: sec
            };
            this.dateData = hhmmss;
            return hhmmss
        }
    },
    beforeDestroy() {
        clearInterval(this.timeInterval)
    }
}
</script>
<style scoped lang="scss">
.countDown_container {
}
</style>
```

### 使用
```
<countDown 
    :endTime="Date.now()" 
    v-if=""
    @done=""
>
    <div slot-scope="{hou, min, sec}">
        <span>{{ min }}: </span>
        <span>{{ sec }}</span>
    </div>
</countDown>
```

Leanote's Blog

Navigation

Recent Posts

Friend Links