vue中封装一个倒计时

<template>
    <div class="countDownBox">
        <div class="row resetStyle">
            <div class="col col-xs-6 resetStyle height58">
                <p style="line-height:29px;text-align:left;text-indent:20px;">Conference</p>
                <p style="line-height:29px;text-align:left;text-indent:20px;">starts in</p>
            </div>
            <div class="col col-xs-6 resetStyle height58">
                <span class="bigFont"  style="font-size:50px;font-weight:bold;color:#ff8e44;">{{time.D}}</span>
                <span style="color:#ff8e44;">&nbsp;days</span>
            </div>
        </div>
        <div class="row resetStyle">
            <div class="col col-xs-4 resetStyle height58">
                <span class="bigFont">{{time.h}}</span>&nbsp;hrs
            </div>
            <div class="col col-xs-4 resetStyle height58">
                <span class="bigFont">{{time.m}}</span>&nbsp;mins
            </div>
            <div class="col col-xs-4 resetStyle height58">
                <span class="bigFont">{{time.s}}</span>&nbsp;secs
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isEnd:false,//倒计时是否结束
            endTime:'2022-09-21 00:00:00',//应为接口获取到的结束时间
            time:{D:"0",h:"0",m:"0",s:"0"},//时间
        }
    },
    created(){
        var self=this;
        self.setEndTime();
    },
    mounted(){

    },
    methods:{
        setEndTime(){
            var that = this;
　　　　　　　that.endTime=that.endTime.replace(/\-/g, "/"); //加这一行代码是为了兼容safari浏览器 因为safari浏览器根据字符串转换日期的时候支持"2016/05/31 08:00"这种格式 不支持"2016-05-31 08:00"这种格式

var interval = setInterval(function timestampToTime(){
                var date = (new Date(that.endTime)) - (new Date()); //计算剩余的毫秒数
                if(date <= 0){
                    that.isEnd = true;
                    clearInterval(interval)
                }else{
                    that.time.D = parseInt(date / 1000 / 60 / 60 / 24 , 10);
                    that.time.h = parseInt(date / 1000 / 60 / 60 % 24 , 10);
                    if(that.time.h < 10){
                        that.time.h = "0" +　that.time.h
                    }
                    that.time.m = parseInt(date / 1000 / 60 % 60, 10);//计算剩余的分钟
                    if(that.time.m < 10){
                        that.time.m = "0" +　that.time.m
                    } 
                    that.time.s = parseInt(date / 1000 % 60, 10);//计算剩余的秒数 
                    if(that.time.s < 10){
                        that.time.s = "0" +　that.time.s
                    }
                    that.time=Object.assign({},that.time)
                    return that.time;    
                }
            },1000);
        },
    }
}
</script>


<style scoped>
    .countDownBox{
        width:290px;
        height:116px;
        float: right;
        margin-top:74px;
    }
    @media screen and (max-width: 990px) {
        .countDownBox{
            display: none;
        }
    }
    @media screen and (min-width: 900px) {

    }
    .resetStyle{
        margin:0;
        padding:0;
    }
    .height58{
        height:58px;
        line-height:58px;
        text-align: center;
        color:#34704c;
        font-size:16px;
        font-family: 'Courier New', Courier, monospace;
        font-weight:600;
    }
    .bigFont{
        font-size:40px;
    }
</style>