gistfile1.txt

<template>
  <div class="box-timer">
    <div class="container timer align-items-center justify-content-between ">
      <div class="margin-right-10">
        <span class="time-style" id="time" v-html="time"></span>
      </div>
    </div>

    <button type="button" class="btn btn-success" @click="start()" >
      Iniciar
    </button>
    <button type="button" class="btn btn-danger" @click="stopTimer()" >Finalizar 
    </button>

  </div>
</template>

<script>
  export default {
    name: 'cronometro',
    data () {
      return {
        state: null,
        startTime: Date.now(),
        currentTime: Date.now(),
        interval: null
      }
    },
    mounted: function () {
          this.$data.state = 'started'
          this.currentTime = Date.now()
          this.interval = setInterval(this.updateCurrentTime, 1 * 1000)
    },
    computed: {
      time: function () {
        return this.hours + ':' + this.minutes + ':' + this.seconds
      },
      milliseconds: function () {
        return this.currentTime - this.$data.startTime
      },
      hours: function () {
        var lapsed = this.milliseconds
        var hrs = Math.floor((lapsed / 1000 / 60 / 60))
        return hrs >= 10 ? hrs : '0' + hrs
      },
      minutes: function () {
        var lapsed = this.milliseconds
        var min = Math.floor((lapsed / 1000 / 60) % 60)
        return min >= 10 ? min : '0' + min
      },
      seconds: function () {
        var lapsed = this.milliseconds
        var sec = Math.ceil((lapsed / 1000) % 60)
        return sec >= 10 ? sec : '0' + sec
      }
    },
    methods: {
      start: function () {
        this.$data.state = 'started'
        this.startTime = Date.now()
        this.currentTime = Date.now()
        this.interval = setInterval(this.updateCurrentTime, 1000)
      },
      reset: function () {
        this.$data.state = 'started'
        this.$data.startTime = Date.now()
        this.$data.currentTime = Date.now()
      },
      pause: function () {
        this.$confirm('Finalizar', 'Finalizar atendimento', {
          confirmButtonText: 'Finalizar',
          cancelButtonText: 'Cancelar',
          type: 'warning'
        }).then(() => {
          this.$data.state = 'started'
          this.startTime = Date.now()
          this.currentTime = Date.now()
          this.interval = setInterval(this.updateCurrentTime, 1000)
        }).catch(() => {
          this.$data.state = 'started'
          this.startTime = Date.now()
          this.currentTime = Date.now()
          this.interval = setInterval(this.updateCurrentTime, 1000)
        })
      },
      resume: function () {
        this.$data.state = 'started'
      },
      updateCurrentTime: function () {
        if (this.$data.state === 'started') {
          this.currentTime = Date.now()
        }
      },
      stopTimer () {
        clearInterval(this.interval)
        this.pause()
      }
    }
  }

</script>