Vue.js로 타이머 구성 요소 만들기

왜냐하면 저는 개인적인 취미로 만든 앱을 통해 타이머 기능을 얻고 싶어요.
Vue.js로 구성 요소를 만들었습니다.

※ 10배 속도로 재생.

코드

Timer.vue

<template>
  <div id="timer">
    <div class="timer">
      <div class="time">
        {{ formatTime }}
      </div>
      <button v-on:click="start" v-if="!timerOn">Start</button>
      <button v-on:click="stop" v-if="timerOn">Stop</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'timer',
  data() {
    return {
      min: 59,
      sec: 59,
      timerOn: false,
      timerObj: null,
    }
  },
  methods: {
    count: function() {
      if (this.sec <= 0 && this.min >= 1) {
        this.min --;
        this.sec = 59;
      } else if(this.sec <= 0 && this.min <= 0) {
        this.complete();
      } else {
        this.sec --;
      }
    },

    start: function() {
      let self = this;
      this.timerObj = setInterval(function() {self.count()}, 1000)
      this.timerOn = true; //timerがONであることを状態として保持
    },

    stop: function() {
      clearInterval(this.timerObj);
      this.timerOn = false; //timerがOFFであることを状態として保持
    },

    complete: function() {
      clearInterval(this.timerObj)
    }
  },
  computed: {
    formatTime: function() {
      let timeStrings = [
        this.min.toString(),
        this.sec.toString()
      ].map(function(str) {
        if (str.length < 2) {
          return "0" + str
        } else {
          return str
        }
      })
      return timeStrings[0] + ":" + timeStrings[1]
    }
  }
}
</script>

<style scoped>
#timer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.time {
  font-size: 100px;
}
</style>

해설

데이터 섹션

Timer.vue

...

<script>
  data() {
    return {
      min: 59,
      sec: 59,
      timerOn: false,
      timerObj: null,
    }
  }

...
</script>

min→분수(Integer)
sec→초(Integer)
timerOn: 타이머의 ON/OFF (Boolean) ※ Start/Stop 버튼 표시 전환에 사용
timer를 중지할 setTimeout을 저장합니다.

method 부분

Timer.vue

<script>
... 

  methods: {
    // count関数 = setIntervalにより毎秒呼ばれる関数
    // ①0秒以下 && 1分を切っていない → 分数を-1、秒を59にリセット
    // ②0秒以下 && 0分台 → 終了
    // ③それ以外 → 秒数を-1
    count: function() {
      if (this.sec <= 0 && this.min >= 1) {
        this.min --;
        this.sec = 59;
      } else if(this.sec <= 0 && this.min <= 0) {
        this.complete();
      } else {
        this.sec --;
      }
    },

    start: function() {
      let self = this;
      this.timerObj = setInterval(function() {self.count()}, 1000)
      this.timerOn = true
    },

    stop: function() {
      clearInterval(this.timerObj);
      this.timerOn = false
    },

    complete: function() {
      clearInterval(this.timerObj)
    }
  },

...
</script>

컴퓨터 부분

Timer.vue

<script>
...

computed: {
    formatTime: function() {
      let timeStrings = [
        this.min.toString(),
        this.sec.toString()
      ].map(function(str) {
        if (str.length < 2) {
          return "0" + str
        } else {
          return str
        }
      })
      return timeStrings[0] + ":" + timeStrings[1]
    }

...
</script>

분수, 초를 한 자릿수로 표시할 때 01을 표시하려면string을 사용하십시오.

template 섹션

Timer.vue

<template>
  <div id="timer">
    <div class="timer">
      <div class="time">
        {{ formatTime }}
      </div>
      <!-- タイマーのON/OFFによってボタンを切り替える -->
      <button v-on:click="start" v-if="!timerOn">Start</button>
      <button v-on:click="stop" v-if="timerOn">Stop</button>
    </div>
  </div>
</template>