微改版的Vue倒计时插件

组件源代码

<template>  <div>    <p v-if="msTime.show">      <span v-if="tipShow">{{tipText}}</span>      <span v-if="!tipShow">{{tipTextEnd}}</span>      <span v-if="msTime.day>0"><span>{{msTime.day}}</span>{{dayTxt}}</span>      <span>{{msTime.hour}}</span>{{hourTxt}}      <span>{{msTime.minutes}}</span>{{minutesTxt}}      <span>{{msTime.seconds}}</span>{{secondsTxt}}    </p>    <p v-if="!msTime.show">{{endText}}</p>  </div></template><script>export default {  name: 'MyCountDown',  replace: true,  data () {    return {      tipShow: true,      msTime: { // 倒计时数值        show: false, // 倒计时状态        day: '', // 天        hour: '', // 小时        minutes: '', // 分钟        seconds: '' // 秒      },      star: '', // 活动开始时间      end: '', // 活动结束时间      current: '' // 当前时间    }  },  watch: {    currentTime: function (val, oldval) {      this.gogogo()    }  },  props: {    // 距离开始提示文字    tipText: {      type: String,      default: '距离开始'    },    // 距离结束提示文字    tipTextEnd: {      type: String,      default: '距离结束'    },    // 时间控件ID    id: {      type: String,      default: '1'    },    // 当前时间    currentTime: {      type: Number    },    // 活动开始时间    startTime: {      type: Number    },    // 活动结束时间    endTime: {      type: Number    },    // 倒计时结束显示文本    endText: {      type: String,      default: '已结束'    },    // 自定义显示文字:天    dayTxt: {      type: String,      default: ':'    },    // 自定义显示文字:时    hourTxt: {      type: String,      default: ':'    },    // 自定义显示文字:分    minutesTxt: {      type: String,      default: ':'    },    secondsTxt: {      type: String,      default: ':'    },    // 是否开启秒表倒计，未完成    secondsFixed: {      type: Boolean,      default: false    }  },  mounted () {    console.log(this)    this.gogogo()  },  methods: {    gogogo: function () {      // 判断是秒还是毫秒      this.startTime.toString().length === 10 ? this.star = this.startTime * 1000 : this.star = this.startTime      this.endTime.toString().length === 10 ? this.end = this.endTime * 1000 : this.end = this.endTime      if (this.currentTime) {        this.currentTime.toString().length === 10 ? this.current = this.currentTime * 1000 : this.current = this.currentTime      } else {        this.current = (new Date()).getTime()      }      if (this.end < this.current) {        /**         * 结束时间小于当前时间 活动已结束         */        this.msTime.show = false        this.end_message()      } else if (this.current < this.star) {        /**         * 当前时间小于开始时间 活动尚未开始         */        this.$set(this, 'tipShow', true)        setTimeout(() => {          this.runTime(this.star, this.current, this.start_message)        }, 1)        // eslint-disable-next-line no-mixed-operators      } else if (this.end > this.current && this.star < this.current || this.star === this.current) {        /**         * 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时         */        this.$set(this, 'tipShow', false)        this.msTime.show = true        this.$emit('start_callback', this.msTime.show)        setTimeout(() => {          this.runTime(this.end, this.star, this.end_message, true)        }, 1)      }    },    runTime (startTime, endTime, callFun, type) {      let msTime = this.msTime      let timeDistance = startTime - endTime      if (timeDistance > 0) {        this.msTime.show = true        msTime.day = Math.floor(timeDistance / 86400000)        timeDistance -= msTime.day * 86400000        msTime.hour = Math.floor(timeDistance / 3600000)        timeDistance -= msTime.hour * 3600000        msTime.minutes = Math.floor(timeDistance / 60000)        timeDistance -= msTime.minutes * 60000        // 是否开启秒表倒计,未完成        //                    this.secondsFixed ? msTime.seconds = new Number(timeDistance / 1000).toFixed(2) : msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);        msTime.seconds = Math.floor(timeDistance / 1000).toFixed(0)        timeDistance -= msTime.seconds * 1000        if (msTime.hour < 10) {          msTime.hour = '0' + msTime.hour        }        if (msTime.minutes < 10) {          msTime.minutes = '0' + msTime.minutes        }        if (msTime.seconds < 10) {          msTime.seconds = '0' + msTime.seconds        }        let _s = Date.now()        let _e = Date.now()        let diffPerFunc = _e - _s        setTimeout(() => {          if (type) {            this.runTime(this.end, endTime += 1000, callFun, true)          } else {            this.runTime(this.star, endTime += 1000, callFun)          }        }, 1000 - diffPerFunc)      } else {        callFun()      }    },    start_message () {      this.$set(this, 'tipShow', false)      this.$emit('start_callback', this.msTime.show)      setTimeout(() => {        this.runTime(this.end, this.star, this.end_message, true)      }, 1)    },    end_message () {      this.msTime.show = false      if (this.currentTime <= 0) {        return      }      this.$emit('end_callback', this.msTime.show)    }  }}</script>

引入组件，使用：

<my-count-down v-on:start_callback="countDownS_cb(1)"               v-on:end_callback="countDownE_cb(1)"               :current-time="currentTime" :start-time="startTime" :end-time="endTime"               :tip-text="'距离考试开始'" :tip-text-end="'距离考试结束还有'" :end-text="'考试结束'" :dayTxt="'天'" :hourTxt="'时'" :minutesTxt="'分'" :secondsTxt="'秒'"></my-count-down>

    // 倒计时    countDownS_cb: function (x) {      this.$notify({        title: '考试提示',        message: '考试开始',        type: 'warning',        duration: 2000      })    },    // 考试结束    countDownE_cb: function (x) {      this.$notify({        title: '考试提示',        message: '考试结束',        type: 'warn',        duration: 2000      })    }