VUE倒计时组件

一个vue的小组件,可用在订单有效期相关处

Posted by Warden_Gfs on March 14, 2017

VUE倒计时组件

<template>
    <span v-cloak class='orange'></span>
</template>
<script>
    export default{
        data(){
            return {
//                time: '',
                now: 0
            };
        },
        props: ['createTime'],
        methods: {
            formate(time){
                if (time <= 0) {
                    this.$emit('timeOver')
                    return "已过期"
                }
                else if (time>0){
                    let hour = parseInt(time / 3600);
                    let min = parseInt((time - hour * 3600) / 60);
                    let sec = parseInt(time - hour * 3600 - min * 60)
                    return '还有' + hour + '小时' + min + '分钟' + sec + '秒过期';
                }
            }
        },
        mounted(){
            let self = this;
            setInterval(function () {
                self.now = new Date().getTime();
            }, 1000);
        },
        computed: {
            time(){
                let leftTime = parseInt(this.createTime) + (3*60 * 60) - parseInt(this.now/1000);
                return this.formate(leftTime);
            }
        }
    }
</script>
<style>
    .orange {
        color: orange;
    }
</style>

分享一个之前项目中写的倒计时组件,可以用在订单支付倒计时或是订单有效期等相关区域