vue实现倒计时只需要两步

Hi各位，我是树林子，一个工作两年的程序员。

问如何用vue实现一个倒计时处理？总共分两步。

效果图：

第一步，封装一个倒计时组件，主要思想是通过父组件传参给子组件后，Watch做监听时间处理，来达到动态改变数字的状态。

子组件：countDown.vue 直接粘！

<template>
    <span :endText="endText" :endTime="endTime">
        <slot>{{ content }}</slot>
    </span>
</template>

<script>
export default {
  data() {
    return {
      content: '',
    }
  },
  props: {//接收父组件的数据
    endTime: {type: String, default: ''},
    endText: {type: String, default: ''},
  },
  watch: {//监听时间的变化
    endTime() {
      this.countdowm(this.endTime)
    }
  },
  methods: {
    countdowm(timestamp) {
      let self = this;
      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}天${hour}小时${min}分${sec}秒`;
          format = `距离开标日期，还剩${day}天${hour}小时${min}分`;
        }
        if (day <= 0 && hour > 0) {
          format = `距离开标日期，还剩${hour}小时${min}分`;
          // format = `${hour}小时${min}分${sec}秒`;
        }
        if (day <= 0 && hour <= 0) {
          // format = `${min}分${sec}秒`;
          format = `距离开标日期，还剩${min}分`;
        }
        self.content = format;
      } else {
        self.content = self.endText;
      }
    }
  }
}
</script>

第二步，引用写好的组件，传值。

实际开发过程中，会应用到两种情况，一种是回调反显数值，在初始化时调用方法，对时间进行毫秒梳理；另一种是双向绑定，需要对时间进行特殊处理后，实时监听得到一个倒计时，在此处我直接给了一个默认值，同学们可以根据自己的需求来进行相对应的代码改造哈！

父组件

<template>
  <Alert style="color: red">
//在模板种定义好调用的位置,我这里面事蓝色底，红色字
         <countDown :endText="endText " :endTime="endTime"/>
   </Alert>
</template>

//记得引用进来
import countDown from './countDown'

export default {
  components: {
   //倒计时组件引用
    countDown
  },
  data() {
    return {
      //这里面的的endTime也可以写在methods中调用
      endTime: new Date().getTime() / 1000 + '' ,
      //此处的时间可以反显时处理，或许双向绑定修改
      //  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法
      //默认文字，当时间传到子组件时，会判断是否具体约定时间是否有剩余
      endText: '已过开标日期',
        }
    }
}

---

平时会更一些日常工作中遇到的问题，以此来记录自己的成长。

下期见面！Bye！