基于el_slider封装时间进度条组件

效果如下

父组件使用

<template>
  <div>
    <div class="fatherLineTime">
      <TimeLine :timerProps="value1" />
    </div>
  </div>
</template>

<script>
import TimeLine from '@/components/TimeLine'

export default {
  components: {
    TimeLine,
  },
  data () {
    return {
      value1: "00:01:00",
    }
  },
}
</script>

<style lang="scss" scoped>
.fatherLineTime {
  width: 100%;
  height: 100px;
  position: absolute;
  margin-top: 80vh;
  display: flex;
  justify-content: center
}
</style>

子组件封装代码如下

<template>
  <div>
    <div class="lineTime">
      <span class="startTime">{{ startTime.startHour | timeFormat }}:{{ startTime.startMinute | timeFormat }}:{{
          startTime.startSecond | timeFormat
      }}</span>

      <el-slider v-model="sumTime" :max="maxSlider" class="slider" :show-tooltip="false"
        @change="handleClickTimeLineFn">
      </el-slider>

      <span class="endTime">{{ endTime.endHour | timeFormat }}:{{ endTime.endMinute | timeFormat }}:{{
          endTime.endSecond | timeFormat
      }}</span>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    timerProps: String,
    require: true
  },
  data () {
    return {
      timer: null,
      customer: null,
      startTime: {
        startHour: 0,
        startMinute: 0,
        startSecond: 0,
      },
      endTime: {
        endHour: Number(this.timerProps.split(":")[0]),
        endMinute: Number(this.timerProps.split(":")[1]),
        endSecond: Number(this.timerProps.split(":")[2]),
      },

      sumTime: null,
      maxSlider: null,
    }
  },

  watch: {
  },
  computed: {
    timeFather () {
      return this.timerProps.split(":")
    },
    timeLength () {
      const HH = Number(this.timerProps.split(":")[0] * 3600)
      const SS = Number(this.timerProps.split(":")[1] * 60)
      const MM = Number(this.timerProps.split(":")[2])
      return HH + SS + MM
    }
  },
  methods: {
    //鼠标滑动时间进度条事件 handleClickTimeLineFn  获取点击的时间
    handleClickTimeLineFn (value) {
      // //清除定时器
      window.clearInterval(this.timer);
      this.timer = null;
      window.clearInterval(this.customer);
      this.customer = null;

      const { h, m, s } = this.getTimes(value)
      this.startTime.startHour = h
      this.startTime.startMinute = m
      this.startTime.startSecond = s

      const endSumTime = this.timeLength - value
      const { h: remainderHour, m: remainderMinute, s: remainderSecond } = this.getTimes(endSumTime)
      this.endTime.endHour = remainderHour
      this.endTime.endMinute = remainderMinute
      this.endTime.endSecond = remainderSecond
      this.timer = window.setInterval(this.startTimerLine, 1000);
      this.customer = window.setInterval(this.startCustomer, 1000);

      if (this.endTime.endHour == 0 && this.endTime.endMinute == 0 && this.endTime.endSecond == 0) {
        // //清除定时器
        window.clearInterval(this.timer);
        this.timer = null;
        window.clearInterval(this.customer);
        this.customer = null;
      }


    },

    //开启定时器，开始计时时间条组件
    startTimerLine () {
      if (this.timer == null) {
        window.clearInterval(this.timer)
      }
      this.startTime.startSecond += 1;
      if (this.startTime.startSecond >= 60) {
        this.startTime.startSecond = 0
        this.startTime.startMinute = this.startTime.startMinute + 1;
      };
      if (this.startTime.startMinute >= 60) {
        this.startTime.startMinute = 0;
        this.startTime.startHour = this.startTime.startHour + 1
      }



      if (this.startTime.startSecond == Number(this.timeFather[2]) && this.startTime.startMinute == Number(this.timeFather[1]) && this.startTime.startHour == Number(this.timeFather[0])) {
        window.clearInterval(this.timer)
        this.timer = null
      }

      this.sumTime = Number(this.startTime.startHour) * 3600 + Number(this.startTime.startMinute) * 60 + Number(this.startTime.startSecond)


    },


    //秒数格式提取时分秒
    getTimes (t) {
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      return { h, m, s }
    },


    //开启倒计时，倒计时组件
    startCustomer () {
      if (this.endTime.endSecond == 0) {
        this.endTime.endSecond = 60
        this.endTime.endMinute -= 1
      }
      this.endTime.endSecond -= 1

      if (this.endTime.endHour != 0 && this.endTime.endMinute <= 0) {
        this.endTime.endMinute = 59
        this.endTime.endHour -= 1
      }


      if (this.endTime.endSecond == 0 && this.endTime.endMinute == 0 && this.endTime.endHour <= 0) {
        window.clearInterval(this.customer)
        this.customer = null
      }



    }
  },
  filters: {
    timeFormat: function (value) {
      if (value < 10) {
        return "0" + value;
      }
      return value;
    },
  },
  mounted () {
    console.log(this.timeLength, "长度启动")
  },
  created () {
    this.maxSlider = this.timeLength
    this.timer = window.setInterval(this.startTimerLine, 1000);
    this.customer = window.setInterval(this.startCustomer, 1000);
  },
}
</script>

<style lang="scss" scoped>
.lineTime {
  width: 800px;
  height: 45px;
  background-color: rgba(70, 166, 255, 0.5);
  // background-color: rgba(56, 56, 55, 0.5);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.slider {
  width: 630px;
}
</style>