vue 倒计时组件

<template>
  <span>
    <i v-text="msg"></i>
  </span>
</template>

<script>
  export default {
    name: "Timer",
    props: ['time'], // 接收 时间为秒
    data() {
      return {
        msg: '',
        timer: null,
        myTime: null,
      }
    },
    components: {},
    mounted() {
      this.myTime = this.time;
      this.start();
    },
    methods: {
      start() {
        if (this.myTime == 0) {
          this.msg = '00:00';
          this.$emit('callback')
          clearTimeout(this.timer)
          this.timer = null;
        } else {
          this.msg = this.getText(this.myTime);
          this.myTime--;
          this.timer = setTimeout(() => {
            this.start();
          }, 1000)
        }
      },
      zero: function (n) { // 补0
        var n = parseInt(n, 10);
        if (n > 0) {
          if (n <= 9) {
            n = "0" + n;
          }
          return String(n);
        } else {
          return "00";
        }
      },
      getText(time) {
        let year, month, day, hour, mini, sec;
        if (time > 0) {
          sec = this.zero(time % 60);
          mini = Math.floor((time / 60)) > 0 ? this.zero(Math.floor((time / 60)) % 60) : "00";
          hour = Math.floor((time / 3600)) > 0 ? this.zero(Math.floor((time / 3600)) % 24) : "00";
          day = Math.floor((time / 86400)) > 0 ? this.zero(Math.floor((time / 86400)) % 30) : "00";
          //月份，以实际平均每月秒数计算
          month = Math.floor((time / 2629744)) > 0 ? this.zero(Math.floor((time / 2629744)) % 12) : "00";
          //年份，按按回归年365天5时48分46秒算
          year = Math.floor((time / 31556926)) > 0 ? Math.floor((time / 31556926)) : "0";
          return `${mini}:${sec}`
        } else {
          return '00:00'
        }
      }
    }
  }
</script>

<style type="text/scss" scoped lang="">

</style>

<template>

    <div>

      <div>

        <timer :time="time1" @callback="getMark1"></timer>

      </div>

      <div>

        <timer :time="time2" @callback="getMark2"></timer>

      </div>

    </div>

</template>

<script>

  import timer from '@/components/Timer'

    export default {

        name: "Sign",

        data() {

            return {

              time1:121,  // 单位  秒

              time2: 30,

            }

        },

        components: {timer},

        mounted() {

        },

        methods: {

          getMark1 () {

            console.log('1111')

          },

          getMark2() {

            console.log('2222')

          }

        }

    }

</script>

<style scoped lang="">

</style>