vue倒计时mixin封装

思路：

1.这个封装是我用mixin来封装的，技能不强，目前只想到这种方式

2.方法是我最开始写jquery用js来封装的，vue需要但是不好放入到指定元素中，我就选择了每次返回 天-时-分-秒

3.先封装这个方法，定义一个变量 选择两个日期 相减 想加 或者 想用到当前时间 都改改源码就可以实现了，然后获取到一个时间戳 ，只要时间戳不小于等于0，那么便计算 等于 多少 天时分秒 ，

在小于9的时候 都需要再前面给它拼接一个 0 ，不然就只会显示以为数字，这样不好，到这样我们需要拿到每秒的数据，我目前只想到return这个办法

4. 函数里面return 函数就不执行了，这样就不行，所以我就在data里面定义了一个对象，在里面加了个开关，定时器每执行一个 就关闭开关，然后在计算属性里面 判断这个开关如果是关闭状态，那么就再次执行这个函数，否则就等于这个对象，这样就可以拿到每秒的数据了

5.如果多页面要使用，就只能在要使用的页面里面传入改对象，如果要一个页面多用，就只能定义多个对象和计算属性了

6.目前我想到最好的方法，如果有大佬有更好的请留言，谢谢！

data里面：

timeDate: {

                startTime: '2021/12/10 00:00:00',

                endTime: '2022/01/30 00:00:00',

                children:{

                    day:'00',

                    hour:'00',

                    minute:'00',

                    second:'00',

                },

                state: true,

                timer: null,

}

methods里面：

dateReduce(obj){

            let times =

                new Date(obj.endTime).getTime() / 1000 -

                new Date(obj.startTime).getTime() / 1000;

            if(!obj.timer){

                obj.state = false;

                obj.timer = setInterval(() => {

                    if (times >= 0) {

                        obj.children.day = Math.floor(times / (60 * 60 * 24));

                        obj.children.hour = Math.floor(times / (60 * 60)) - obj.children.day * 24;

                        obj.children.minute = Math.floor(times / 60) - obj.children.day * 24 * 60 - obj.children.hour * 60;

                        obj.children.second = Math.floor(times) - obj.children.day * 24 * 60 * 60 - obj.children.hour * 60 * 60 - obj.children.minute * 60;

                       

                        if (obj.children.day <= 9)    obj.children.day    = "0" + obj.children.day;

                        if (obj.children.hour <= 9)   obj.children.hour   = "0" + obj.children.hour;

                        if (obj.children.minute <= 9) obj.children.minute = "0" + obj.children.minute;

                        if (obj.children.second <= 9) obj.children.second = "0" + obj.children.second;

       

                        times--;

                    } else {

                        clearInterval(obj.timer);

                        obj.timer = null;

                        obj.state = true;

                    }

                   

                }, 1000);

            }

            return {

                startTime: obj.startTime,

                endTime: obj.endTime,

                children:{

                    day: obj.children.day,

                    hour:obj.children.hour,

                    minute:obj.children.minute,

                    second:obj.children.second,

                },

                state: obj.state,

                timer: obj.timer,

            };

           

        },

computed里面:

dateTime() {

            if (!this.timeDate.state) {

                return this.dateReduce(this.timeDate);

            } else {

                return this.timeDate;

            }

        },

使用：

this.dateReduce(this.dateTime);   //日期倒计时