vue 引入倒计时组件 vue2-countdown

附上官网：https://cgygd.github.io/vue2-countdown/

 

npm 下载

npm install vue2-countdown --save

引入和注册

//倒计时
import CountDown from "vue2-countdown";

components注册
components: {
    CountDown,
  },

div 应用

<count-down
                v-if="viewDialog" //写一个状态重新启动组件，重新构建 html 和 css,不写的后果就是 组件没更新数据，会导致沿用了上一次的数据
                v-on:start_callback="countDownS_cb(1)" // 监听开始倒计时
                v-on:end_callback="countDownE_cb(1)" //监听结束倒计时
                :currentTime="currentTime" //建议不传，或者传 开始时间
                :startTime="startTimes" //开始时间，传时间戳，拿当前的时间去格式化并除 1000，例如：1659087704
                :endTime="endTimes" // 结束时间，传时间戳，拿结尾的时间去格式化并除 1000，例如：1659087944
                :tipText="'距离考试开始还有'"
                :tipTextEnd="'距离考试结束还剩'"
                :endText="'考试时间到'"
                :dayTxt="'天'"
                :hourTxt="'小时'"
                :minutesTxt="'分钟'"
                :secondsTxt="'秒'"
              >
              </count-down>

 

data 数据

currentTime: 0,
      startTimes: 0,
      endTimes: 0,

 

methods 方法

countDownS_cb: function (x) { // 开始倒计时进行的回调
      console.log(x, "开始");
    },
    countDownE_cb: function (x) { //倒计时结束进行的回调
      // this.$message.error("考试时间到，试卷自动提交");
      console.log(x, "结束");
    },