vue 倒計時組件（可利用element ui 的 Slider 滑塊組件選擇倒計時的時間）

首先需要在vue項目中安裝element UI

npm i element-ui -S

在 main.js 中寫入以下內容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

 Vue.use(ElementUI);

父頁面：

    <div class="item">
      <div class="open_con">
        <el-button
          icon="el-icon-switch-button"
          circle
          :plain="plain"
          type="primary"
          @click="OPens()"
        ></el-button>
      </div>
      <div class="slider">
        <el-slider v-model="value" :format-tooltip="formatTooltip"></el-slider>
      </div>
    </div>

<script>

import countDown from "./count-down"; //引入倒計時組件

export default {

  name: "Caeds",

  components: { countDown },

  data() {

    return {

      value: 0,

      plain: true, // 開關按鈕 true 是關閉，false是打開

      stop: 0,

      time: "0:00:00"

    };

  },

  mounted() {},

  methods: {

    formatTooltip(val) {

      if (val < 60) {

        if (val < 10) {

          this.time = "0:0" + val + ":00";

          return "0:0" + val + ":00";

        } else {

          this.time = "0:" + val + ":00";

          return "0:" + val + ":00";

        }

      } else {

        if (val < 70) {

          this.time = "1:0" + (val - 60) + ":00";

          return "1:0" + (val - 60) + ":00";

        } else {

          this.time = "1:" + (val - 60) + ":00";

          return "1:" + (val - 60) + ":00";

        }

      }

    },

    // 

    callBack(val) {

      console.log(val);

      this.value = val;

      // 倒計時結束 關閉按鈕

      if (val == 0) {

        this.stop = 0;

        this.plain = true;

      }

    },

    OPens() {

        if (this.value != 0) {

          if (!this.plain && this.stop == 1) {

            this.stop = 2;

            console.log("stop");

            this.$refs.countdown.timepause();

          }

          if (this.plain && this.stop == 2) {

            this.stop = 1;

            console.log("open");

            this.$refs.countdown.timeresume();

          }

          if (this.stop == 0) {

            this.stop = 1;

          }

        }

        this.plain = !this.plain;

    },

  }

};

</script>

子頁面count-down.vue：

<template>
  <span>
    <slot>{{content}}</slot>
  </span>
</template>
<script>
export default {
  name: "CountDown",
  data() {
    return {
      timer: null,
      date: null,
      savedtime: 0, //時間
      hour: null,
      min: null,
      sec: null,
      content: this.endText //顯示
    };
  },
  props: {
    // 倒計時時間 (分鍾)
    endTime: {
      type: Number,
      default: ""
    },
    endText: {
      type: String,
      default: "0:00:00"
    }
  },
  mounted() {
    // 時間換成毫秒傳遞
    this.timeStart(this.endTime * 60000);
  },
  methods: {
    // 起始時間
    timeStart(endTime) {
      this.date = new Date();
      var date1 = new Date().getTime(); // 獲取當前時間戳
      // 當前時間戳+3600s（一小時，其他時間通過計算時間戳進行相應加減），重新設置 Date 對象
      this.date.setTime(date1 + endTime);
      this.date = this.date.getTime();
      // 傳遞結束時的時間戳
      this.countdowm(this.date);
    },
    // 繼續倒計時
    timeresume() {
      this.timeStart(this.savedtime);
    },
    // 暫停時間
    timepause() {
      clearInterval(this.timer);
      this.savedtime =
        this.hour * 60 * 60 * 1000 + this.min * 60 * 1000 + this.sec * 1000;
    },
    // 開始倒計時
    countdowm(timestamp) {
      let self = this;
      self.timer = setInterval(function() {
        let nowTime = new Date();
        let endTime = new Date(timestamp * 1);
        let t = endTime.getTime() - nowTime.getTime();
          // 判斷剩余時間是否 >0
        if (t > 0) {
          self.hour = Math.floor((t / 3600000) % 24);
          self.min = Math.floor((t / 60000) % 60);
          self.sec = Math.floor((t / 1000) % 60);
          self.$emit("callBack", 1 + self.min + self.hour * 60); // 每減少一分鍾父頁面滑塊的值就減 1
          let min = self.min < 10 ? "0" + self.min : self.min;
          let sec = self.sec < 10 ? "0" + self.sec : self.sec;
          let format = `${self.hour}:${min}:${sec}`;
          self.content = format;
        } else {
          // 倒計時結束
          self.$emit("callBack", 0);
          clearInterval(self.timer);
          self.content = "0:00:00";
        }
      }, 1000);
    }
  }
};
</script>