前端vue倒计时组件【模块化开发】

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。

🔋 小目标: 成为 会设计、会开发的 “万能钥匙”

📝文章内容

✍ 一、组件代码

<!--活动倒计时组件-->
<style lang="less" scoped>
.CountDown{
  width: 280px;
  height: 20px;
  display: flex;
  border-top-left-radius: 10px;
  border: 1px solid red;


  .CountDown_p1{
    width: 120px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color:red;
    color: floralwhite;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 16px;
    font-weight: bold;
  }
  .CountDown_p2{
    width: 190px;
    height: 20px;
    line-height: 20px;
    color: red;
    font-size: 14px;
    margin-left: 14px;
  }
}
</style>
<template>
  <div class="CountDown">
    <p class="CountDown_p1">活动倒计时：</p>
    <p class="CountDown_p2">{{time}}</p>
  </div>
</template>
<script>
export default{
  data () {
    return {
      time : '',
      flag : false
    }
  },
  mounted () {
    //setInterval 开启定时器
    let time = setInterval(() => {
      if (this.flag == true) {
        //clearInterval()方法能够取消setInterval()方法设置的定时器
        clearInterval(time);
      }
      this.countDown();
    }, 500);
  },
  props : {
    endTime : {
      type: String
    }
  },
  methods : {
    //倒计时函数
    countDown () {
      //剩余时间
      const endTime = new Date(this.endTime);
      //系统时间
      const nowTime = new Date();

      let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);

      let d = parseInt(leftTime / (24 * 60 * 60));//天数
      let h = this.formate(parseInt(leftTime / (60 * 60) % 24));//时间
      let m = this.formate(parseInt(leftTime / 60 % 60));//分钟
      let s = this.formate(parseInt(leftTime % 60));//秒

      if(leftTime <= 0){
        this.flag = true;
        this.$emit('time-end');
        this.time = '活动已结束';
      }else{
        // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
        this.time = `${d} 天 ${h} 小时 ${m} 分 ${s} 秒`;
      }
    },

    formate(time) {
      if (time >= 10) {
        return time;
      } else {
        return `0${time}`;
      }
    }
  }
}
</script>

✍ 二、页面使用

<template>
  <div>
    <countdown :endTime='endTime'></countdown>
  </div>
</template>
<script>
import countdown from './components/CountDown'   //  引入倒计时组件
export  default {
  components:{
    countdown
  },
  data(){
    return{
      //剩余时间
      endTime : '2022-07-1 11:59:00'
    }
  }

}
</script>