vue 实现一个持续时间定时器组件

最新推荐文章于 2024-07-18 08:31:26 发布

.伊泽瑞尔

最新推荐文章于 2024-07-18 08:31:26 发布

阅读量734

点赞数 9

分类专栏：前端 vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_35517283/article/details/136068952

版权

前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

vue 实现一个定时器组件

效果图

在这里插入图片描述

子组件

新建一个timer.vue文件

<template>
  <span :class="{red: string >= 600}">{{ string | formatDurationS }}</span>
</template>
<script>

export default {
  name: 'timer',
  props: {
    startTimer: {
      type: [String, Number],
      default: 0
    },
    currentTimer: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      string: '--:--:--', // '00:00:00',
      step: 0,
      intervalName: ''
    }
  },
  watch: {
    currentTimer: {
      handler: function(nev, oldv) {
        if (this.intervalName) {
          clearInterval(this.intervalName)
        }
        this.step = this.startTimer
        let _str = Math.round((this.currentTimer - this.startTimer) / 1000)
        this.string = _str < 0 ? 0 : _str
        this.intervalName = setInterval(() => {
          this.string++
        }, 1000)
      },
      immediate: true
    }
  },
  beforeDestroy() {
    clearInterval(this.intervalName)
    this.intervalName = null
  }
}

</script>
<style scoped lang="less">
.red {
  color: #F03E3E;
}
</style>

父组件

导入子组件并注册

<TIMER ref="timerFun" :currentTimer="timeStamp" :startTimer="item.actionTime"></TIMER>


import TIMER from '@/components/timer.vue'

timeStamp: Date.now(),

components: {
  TIMER
}