來倒數吧

基本上來設一個js interval就好了，每秒都減一，當減到0就把interval清掉

views/Home.vue

start() {
  if (this.timeVal === 0) {
    return
  }

  // 每1000ms執行一次
  this.timeInterval = setInterval(this.countDown, 1000)
  this.isStart = true
},

countDown() {
  // 把時間減一
  this.timeVal = this.timeVal - 1
  if (this.timeVal === 0) {
    this.finish()
  }
},

finish() {
  this.stop()
},

stop() {
  // 清掉Interval
  clearInterval(this.timeInterval)

  this.isStart = false
},

reset() {
  this.timeVal = this.startTimeVal
},

來加個按鈕

  <div class="home">
    <div id="time_block">
      <b-container id="select_timer">
        <b-row>
          <b-col id="long_break" v-on:click="longBreak">
            <b-button variant="outline-success">Long Break</b-button>
          </b-col>
          <b-col id="shot_break" v-on:click="shotBreak">
            <b-button variant="outline-success">Short Break</b-button>
          </b-col>
          <b-col id="custom">
            <b-button variant="outline-success">Custom</b-button>
          </b-col>
        </b-row>
      </b-container>
      <div id="time">
        # 把秒數轉換成00:00
        {{ paddingzero(Math.floor(timeVal/60), 2) }}:{{ paddingzero(timeVal % 60, 2) }}
      </div>
      <b-button class="btn" v-on:click="start" v-if="!isStart" variant="outline-primary">Start</b-button>
      <b-button class="btn" v-on:click="stop" v-if="isStart" variant="outline-danger">Stop</b-button>
      <b-button class="btn" v-on:click="reset" v-if="!isStart">Reset</b-button>

      <b-popover ref="popover" target="custom" title="Minute">
        <b-form-input v-model="customMinute" placeholder="Minute"></b-form-input>
        <br>
        <b-icon class="h5 mb-2" icon="check" v-on:click="custom">OK</b-icon>
        <b-icon class="h5 mb-2" icon="x" v-on:click="popupClose">X</b-icon>
      </b-popover>
    </div>
  </div>

這樣就有一個會動的計時器

今天的commit

CSS的樣式在最後會統一做調整，先把功能都做出來就好～

謝謝大家~