Vue implements countdown plug-in timestamp refresh jump without affecting vue jump

Vue implements countdown plug-in timestamp refresh jump without affecting vue jump

A countdown plug-in needs to be developed in the work, so I started to take it online first. I found that many countdown plug-ins will be refreshed from the beginning, so I wrote a plug-in with vue2.0 and the test has passed, directly Add code

The following is the component code:

 

<Template> <span: endTime = "endTime": callback = "callback ": endText = "endText"> <slot >{{ content }}</slot> </span> </template> <script> export default {data () {return {content: '',}}, props: {endTime: {type: String, default:''}, endText: {type: String, default: 'stopped'}, callback: {type: Function, default: ''}}, mounted () {this. countdowm (this. endTime)}, methods: {countdowm (timestamp) {let Self = this; let timer = setInterval (function () {let nowTime = new Date (); let endTime = new Date (timestamp * 1000); let t = endTime. getTime ()-nowTime. getTime (); if (t> 0) {let day = Math. floor (t/86400000); let hour = Math. floor (t/3600000) % 24); let min = Math. floor (t/60000) % 60); let sec = Math. floor (t/1000) % 60); hour = hour <10? "0" + hour: hour; min = min <10? "0" + min: min; sec = sec <10? "0" + sec: sec; let format = ''; if (day> 0) {format = '$ {day} day $ {hour} hour $ {min} minute $ {sec} second';} if (day <= 0 & hour> 0) {format = '$ {hour} hour $ {min} minute $ {sec} second';} if (day <= 0 & hour <= 0) {format = '$ {min} minute $ {sec} second';} self. content = format;} else {clearInterval (timer); self. content = self. endText; self. _ callback () ;}}, 1000) ;}, _ callback () {if (this. callback & this. callback instanceof Function) {this. callback (... this) ;}}}</script>

 

The following code calls the component:

<Count-down endTime = "1490761620": callback = "callback" endText = "ended"> </count-down>

After the above code is introduced, add the callback function to the methods of the vue.

EdnTime is the timestamp after the end of the time. callback is the callback endText after the end is the text display after the end!