inleft
2022-08-02 70097d968795fcc872095c42f7b7bba618baaaf9
commit | author | age
9bcb19 1 <template>
I 2   <span>
3     {{ lastTime | format }}
4   </span>
5 </template>
6
7 <script>
8
9 function fixedZero (val) {
10   return val * 1 < 10 ? `0${val}` : val
11 }
12
13 export default {
14   name: 'CountDown',
15   props: {
16     format: {
17       type: Function,
18       default: undefined
19     },
20     target: {
21       type: [Date, Number],
22       required: true
23     },
24     onEnd: {
25       type: Function,
26       default: () => ({})
27     }
28   },
29   data () {
30     return {
31       dateTime: '0',
32       originTargetTime: 0,
33       lastTime: 0,
34       timer: 0,
35       interval: 1000
36     }
37   },
38   filters: {
39     format (time) {
40       const hours = 60 * 60 * 1000
41       const minutes = 60 * 1000
42
43       const h = Math.floor(time / hours)
44       const m = Math.floor((time - h * hours) / minutes)
45       const s = Math.floor((time - h * hours - m * minutes) / 1000)
46       return `${fixedZero(h)}:${fixedZero(m)}:${fixedZero(s)}`
47     }
48   },
49   created () {
50     this.initTime()
51     this.tick()
52   },
53   methods: {
54     initTime () {
55       let lastTime = 0
56       let targetTime = 0
57       this.originTargetTime = this.target
58       try {
59         if (Object.prototype.toString.call(this.target) === '[object Date]') {
60           targetTime = this.target
61         } else {
62           targetTime = new Date(this.target).getTime()
63         }
64       } catch (e) {
65         throw new Error('invalid target prop')
66       }
67
68       lastTime = targetTime - new Date().getTime()
69
70       this.lastTime = lastTime < 0 ? 0 : lastTime
71     },
72     tick () {
73       const { onEnd } = this
74
75       this.timer = setTimeout(() => {
76         if (this.lastTime < this.interval) {
77           clearTimeout(this.timer)
78           this.lastTime = 0
79           if (typeof onEnd === 'function') {
80             onEnd()
81           }
82         } else {
83           this.lastTime -= this.interval
84           this.tick()
85         }
86       }, this.interval)
87     }
88   },
89   beforeUpdate () {
90     if (this.originTargetTime !== this.target) {
91       this.initTime()
92     }
93   },
94   beforeDestroy () {
95     clearTimeout(this.timer)
96   }
97 }
98 </script>
99
100 <style scoped>
101
102 </style>