Vue自行封装常用组件-倒计时

倒计时组件，比较复杂一点，大神勿调侃，精确到毫秒，因为项目中多次出现倒计时，所以拿出来分享下

使用方法：
1.在父组件中引入"uni-countdown"
//import uniCountdown from "./uni-countdown";

2.在父组件中注册 uniCountdown
//components:{uniCountdown},

3.放在父组件中使用
//<uni-countdown></uni-countdown> 参数代码太多直接看文件里面的吧

4.调用uniCountdown组件
//this.StatusLock = true

注：index.vue为父组件，后者为子组件，效果图先上，可以先看是否是自己想要的组件，再选择使用

index.vue

<template>
  <div>
    <div class="TimingBox" v-show="StatusLock">
      <div>
        <p class="texttitle">您的粉丝为您创造{{Amount}}元奖励</p>
        <p class="text">倒计时结束您将永远失去他们</p>
        <div class="ContentOfTheTiming">
          <div style="font-size:.6rem;" class="flex center">
            <uni-countdown
              bordercolor="#FFAA00"
              background="url('/wxviews/img/组10.png') center center"
              fontSize=".7rem"
              splitorColor="#fa0"
              :show-day="false"
              :hour="cdHours"
              :minute="cdMins"
              :second="cdSecs"
              :ms="cdMs"
            ></uni-countdown>
          </div>
        </div>
        <p class="become_a_Member">点击“立即解锁”获得该奖励</p>
        <div class="bigBoxBtn flex center" @click="TheBuyButton()">
          <div class="TheBuyButton">立即获得</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import uniCountdown from "../components/uni-countdown";

export default {
  data() {
    return {
      // 时
      cdHours: 0,
      // 分
      cdMins: 0,
      // 秒
      cdSecs: 0,
      // 毫秒
      cdMs: 60,

      Statuslock: false,
      productDetail: {},
      Amount: null
    };
  },
  components:{
      uniCountdown
  },
  created() {
    //在钩子里面先请求接口拿到时间
    this.CountDown();
  },
  methods: {
    CountDown() {
      //请求方式，看你们自己想用啥 就用啥 
      Request.post(
        "api/Post_GetCommissionOrderCountdown",
        {
          MemLoginId: localStorage.getItem("MemLoginId")
        },
        res => {
          
          this.productDetail = res;
          this.Amount = res.Amount;
          //执行showTime()
          const countDownArr = this.showTime(
            null,
            // 拿到结束时间 EndTime
            this.productDetail.EndTime
          ).split("-");
          //Status ? 1 : 0 
          if (res.Status === 0) {
            // 控制显示或隐藏 StatusLock
            this.StatusLock = false;
            return;
          }
          if ((this.cdHours = 0 && this.cdMins == 0 && this.cdSecs == 0)) {
            this.StatusLock = false;
            return;
          }
          if (this.cdHours > 0 || this.cdMins > 0 || this.cdSecs > 0) {
            this.StatusLock = true;
            this.cdHours = countDownArr[0] * 24 + countDownArr[1];
            this.cdMins = countDownArr[2];
            this.cdSecs = countDownArr[3];
            return;
          }
          if (res.Status === 1) {
            this.StatusLock = true;
            this.cdHours = countDownArr[0] * 24 + countDownArr[1];
            this.cdMins = countDownArr[2];
            this.cdSecs = countDownArr[3];
            return;
          }
        },
        err => {}
      );
    },
    TheBuyButton(){
        alert('暂时还没有开放此功能')
    },
    showTime(startTimeStr, endTimeStr) {
      var startTime = startTimeStr
        ? new Date(startTimeStr.replace(/-/g, "/"))
        : new Date();
      var endTime = new Date(endTimeStr.replace(/-/g, "/"));
      var totalSecs = (endTime - startTime) / 1000;
      var days = Math.floor(totalSecs / 3600 / 24);
      var hours = Math.floor((totalSecs - days * 24 * 3600) / 3600);
      var mins = Math.floor((totalSecs - days * 24 * 3600 - hours * 3600) / 60);
      var secs = Math.floor(
        totalSecs - days * 24 * 3600 - hours * 3600 - mins * 60
      );
      if ((days + "").slice(0, 1) != "-") {
        return days + "-" + hours + "-" + mins + "-" + secs;
      } else {
        return 0 + "-" + 0 + "-" + 0 + "-" + 0;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.TheBuyButton {
  width: 4rem;
  height: 1.2rem;
  background: linear-gradient(
    90deg,
    rgba(254, 239, 54, 1) 0%,
    rgba(246, 197, 25, 1) 100%
  );
  box-shadow: 0px 0px 3px 0px rgba(115, 91, 6, 1);
  border-radius: 0.6rem;
  margin: 0 auto;
  position: relative;
  color: #735b06;
  font-size: 0.6rem;
  line-height: 1.2rem;
}
.TimingBox {
  width: 100%;
  background: #fff;
  height: 6.7rem;
}
.ContentOfTheTiming {
  width: 100%;
  height: 1rem;
  margin: 0 0 0.2rem 0;
}
.become_a_Member {
  color: #fff;
  font-size: 0.5rem;
}
.djs > div {
  width: 13.8rem;
  height: 6rem;
  margin: 0 auto;
  background-color: #fff;
  background: url("") no-repeat;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.bigBoxBtn {
  width: 4.3rem;
  height: 1.5rem;
  background: linear-gradient(
    90deg,
    rgba(254, 239, 54, 1) 0%,
    rgba(246, 197, 25, 1) 100%
  );
  box-shadow: 0px 1px 3px 0px rgba(115, 91, 6, 0.67);
  border-radius: 0.7rem;
  position: relative;
  margin: 0 auto;
  bottom: -0.2rem;
}
.center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
</style>

uni-countdown.vue

<template>
  <div class="uni-countdown">
    <div
      v-if="showDay"
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize}"
      class="uni-countdown__number">{{ d }}</div>
    <div
      v-if="showDay"
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">天</div>
    <div
    
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ h1 }}</p><hr class="hrxt"></div>
        <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ h2 }}</p><hr class="hrxt"></div>
    <div
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</div>
    <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ i1 }}</p><hr class="hrxt"></div>
             <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ i2 }}</p><hr class="hrxt"></div>
    <div
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</div>
    <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ s1 }}</p><hr class="hrxt"></div>
        <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ s2 }}</p><hr class="hrxt"></div>
    <div
     <div
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">{{ showColon ? ':' : '秒' }}</div>
    <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ ms1 }}</p><hr class="hrxt"></div>
        <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ ms2 }}</p><hr class="hrxt"></div>
    <div
      v-if="!showColon"
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">秒</div>
  </div>
</template>
<script>
export default {
  name: 'UniCountdown',
  props: {
    showDay: {
      type: Boolean,
      default: true
    },
    showColon: {
      type: Boolean,
      default: true
    },
        background: {
            type: String,
            default: '#FFFFFF'
        },
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    borderColor: {
      type: String,
      default: '#000000'
    },
    backgroundImg: {
      type:String,
      default:""
    },
        fontSize: {
            type: String,
      default: '30px'
        },
    color: {
      type: String,
      default: '#fff'
    },
    splitorColor: {
      type: String,
      default: '#000000'
    },
    day: {
      type: Number,
      default: 0
    },
    hour: {
      type: Number,
      default: 0
    },
    minute: {
      type: Number,
      default: 0
    },
    second: {
      type: Number,
      default: 0
    },
    ms: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      timer: null,
      d: '00',
      h: '00',
            h1: '00',
            h2: '00',
      i: '00',
            i1: '00',
            i2: '00',
      s: '00',
            s1: '0',
      s2: '0',
      ms: '00',
            ms1: '0',
            ms2: '0',
      leftTime: 0,
      seconds: 0
    }
  },
  created: function (e) {
    this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second, this.ms)
    this.countDown()
    this.timer = setInterval(() => {
      this.seconds--
      if (this.seconds < 0) {
        this.timeUp()
        return
      }
      this.countDown()
    }, 1000/60)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    toSeconds (day, hours, minutes, seconds, ms) {
      return (day * 60 * 60 * 60 * 24) + (hours * 60 * 60 * 60) + (minutes * 60 * 60)  + (seconds * 60) + ms
    },
    timeUp () {
      clearInterval(this.timer)
      this.$emit('timeup')
    },
    countDown () {
      var seconds = this.seconds
      var [day, hour, minute, second, ms] = [0, 0, 0, 0, 0]
      if (seconds > 0) {
        day = Math.floor(seconds / (60 * 60 * 60 * 24))
        hour = Math.floor(seconds / (60 * 60 * 60)) - (day * 24)
        minute = Math.floor(seconds / 60 / 60) - (day * 24 * 60) - (hour * 60)
        second = Math.floor(seconds / 60) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
        ms = Math.floor(seconds) - (day * 24 * 60 * 60 * 60) - (hour * 60 * 60 * 60) - (minute * 60 * 60) - (second * 60)
      } else {
        this.timeUp()
      }
      if (day < 10) {
        day = '0' + day
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      if (second < 10) {
        second = '0' + second
      }
      if (ms < 10) {
        ms = '0' + ms
      }
      this.d = day
      this.h = hour
            this.h1 = hour.toString().slice(0,1)
            this.h2 = hour.toString().slice(1,2)
      this.i = minute
            this.i1 = minute.toString().slice(0,1)
            this.i2 = minute.toString().slice(1,2)
      this.s = second
            this.s1 = second.toString().slice(0,1)
      this.s2 = second.toString().slice(1,2)
      this.ms = ms
            this.ms1 = ms.toString().slice(0,1)
      this.ms2 = ms.toString().slice(1,2)
    }
  }
}
</script>
<style lang="scss">
    $countdown-height:.8rem;
  .uni-countdown__number{
     background-size: 100% 100%;
  background-repeat: no-repeat;
  }
    .uni-countdown {
        padding: .04rem 0;
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: center;

        &__splitor {
            justify-content: center;
            line-height: $countdown-height;
            padding: 0 .1rem;
      font-size: .6rem;
                        
        }

        &__number {
            line-height: $countdown-height;
            justify-content: center;
            height: $countdown-height;
            border-radius: .12rem;
            margin: 0 .1rem;
            font-size: .7rem;
            font-weight: 500;
      width: .7rem;
      height: 1rem;
      box-sizing: border-box;
      background-size: 100% 100%;
    background-repeat: no-repeat;
        }
    }

</style>
<style lang="less">
  .hrxt{
    position: relative;
    top: -.9rem;
    left: 0;
    width: .6rem;
    border:1px solid #e5e5e5;
  }
</style>