纯手工vue.js倒计时组件

该组件应用场景，例如单个页面需要多个倒计时的时候，该组件就派上用场了。 因不同的项目，需求不同，微调一下代码即可用。本实例代码的实际场景是，用户在规定时间点内需要有个操作，倒计时的时间其实是规定的时间-(当前时间-历史时间的一个节点)。组件代码为完整代码，复制即可用，欢迎批评指正~~

<template>
    <p class="countDown" v-html="newSeconds"></p>
</template>
	
<script>
    export default {
    	data(){
            return{
            	time: '',
            	recive: '',
            }
        },
        props: ['seconds', 'reciveTime'],
        created(){
	    	this.time = this.seconds;
	    	this.recive = this.reciveTime;
		},
        computed: {
        	newSeconds: {
        		get: function(){
        			let self = this;
        			let stime = self.recive - self.time;
	
        			if(stime <= 0 || self.recive < stime){
						return self.newSeconds = '<b>00</b>:<b>00</b>:<b>00</b>';
					}
	
					let h=parseInt((stime/3600)%24);
					if(h < 10) h = '0'+h;
					let m=parseInt((stime/60)%60);
					if(m < 10) m = '0'+m;
					let s=parseInt(stime%60);
					if(s < 10) s = '0'+s;
					return self.newSeconds = '<b>'+h+'</b>:<b>'+m+'</b>:<b>'+s+'</b>';
        		},
        		set: function(){
        		}
        	}
        },
		mounted(){
			let self = this;
			let timer = setInterval(function(){
				self.time++;
				if(self.recive < self.time){
					clearInterval(timer);
				}
			}, 1000);
		},
        methods: {},
    }
</script>

在页面内调用方法

<timer :seconds='now-pay_time' :reciveTime="reciveTime"></timer>
<script>
	import timer from '../components/common/timer'
	components: { timer },
	data () {
            return {
                reciveTime: null,
                now: parseInt(new Date().getTime()/1000),
            }
        },
</script>