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>