倒计时vue组件

<!--
  *  倒计时
 -->
<template>
   <span class="contDown-tip">{{countdownTxt}}</span>
</template>
<script>
export default {
  name: "countDown",
  data() {
    return {
      countdownTxt: "", //倒计时展示
      countdownTime: ""
    };
  },
  props: {
    auditExpiredTime: {
      type: [String, Number],
      default: 0
    }
  },
  beforeDestroy() {
    this.clearCountDown()
  },
  mounted() {
    // this.countdownFun(this.auditExpiredTime);
  },
  watch:{
    auditExpiredTime: {
      handler: function (val, oldVal){
        this.clearCountDown()
        this.countdownFun(val)
      },
      immediate: true
    },
  },
  methods: {
    /** 倒计时时间计算 */
    countdownFun(endTime) {
      endTime = endTime || 0
      if (endTime) {
        let diffTime = Math.floor((endTime - new Date().getTime()) / 1000);
        if (diffTime > 0) {
          this.countdownTime = setInterval(() => {
            let diffM =
              Math.floor(diffTime / 60) > 9
                ? Math.floor(diffTime / 60)
                : `0${Math.floor(diffTime / 60)}`;
            let diffS =
              Math.floor(diffTime % 60) > 9
                ? Math.floor(diffTime % 60)
                : `0${Math.floor(diffTime % 60)}`;
            this.countdownTxt = `${diffM}:${diffS}`;
            diffTime--;
            if (diffTime <= 0) {
              this.clearCountDown()
              this.$emit("timeOver");
              return;
            }
          }, 1000);
        }
      }else {
        this.clearCountDown()
        this.countdownTxt = ``;
      }
    },
    clearCountDown(){
      if(this.countdownTime){
        clearTimeout(this.countdownTime);
        this.countdownTime = ""
      }
    }
  },
  computed: {}
};
</script>
<style lang="less" scoped>
.contDown-tip {
  display: inline-block;
  color: #1f5cb6;
  margin-left: 4px;
}
</style>

import countDown from "@/components/countDown";
//在.vue文件中引入并使用
<countDown   :auditExpiredTime="scope.row.auditExpiredTime"
              @timeOver="timeOver"
              v-if="scope.row.auditExpiredTime > 0 && scope.row.auditStatus === 0" />
 //超时以后  重新刷新list接口
    timeOver() {
      this.list();
    },