「组件」倒计时

1：在components文件夹下新建CountDown.vue

1<template>
2    <p>{{time}}</p>
3</template>
4<script>
5    export default {
6        data() {
7            return {
8                time: '',
9                flag: false//停止
10            }
11        },
12        mounted() {
13            let time = setInterval(() => {
14                if (this.flag == true) {
15                    clearInterval(time)
16                }
17                this.timeDown()
18            }, 500)
19        },
20        props: {
21            endTime: {
22                type: String
23            }
24        },
25        methods: {
26            timeDown() {
27                const endTime = new Date(this.endTime)
28                const nowTime = new Date();
29                let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
30                let d = parseInt(leftTime / (24 * 60 * 60))
31                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
32                let m = this.formate(parseInt(leftTime / 60 % 60))
33                let s = this.formate(parseInt(leftTime % 60))
34                if (leftTime <= 0) {
35                    this.flag = true
36                    this.$emit('time-end')
37                }
38                this.time = `${m}分${s}秒` // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
39            },
40            formate(time) {
41                if (time >= 10) {
42                    return time
43                } else {
44                    return `0${time}`
45                }
46            }
47        }
48    }
49</script>

2：在需要使用的页面

1<CountDown :endTime='this.endTime'></CountDown> 
2import CountDown @/components/CountDown.vue';
3components: {CountDown},
4endTime: sessionStorage.testTime,