проверить степпер с таймером - PullRequest
0 голосов
/ 19 марта 2019

Я делаю приложение vue и у меня там есть vuetify stepper.Я хочу изменить шаг к следующему на 1 мин.Это мой код:

<template>
  <v-stepper v-model="e1">
    <v-stepper-header>
      <v-stepper-step :complete="e1 > 1" step="1">Name of step 1</v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step :complete="e1 > 2" step="2">Name of step 2</v-stepper-step>

      <v-divider></v-divider>

      <v-stepper-step step="3">Name of step 3</v-stepper-step>
    </v-stepper-header>

    <v-stepper-items>
      <v-stepper-content step="1">
        <v-card class="mb-5" height="400px">
          <span>{{ minutes }}</span>
          <span>:</span>
          <span>{{ seconds }}</span>
          <v-btn class="info" @click="startTimer">start</v-btn>
        </v-card>

        <v-btn color="primary" @click="e1 = 2">Continue</v-btn>

        <v-btn flat>Cancel</v-btn>
      </v-stepper-content>

      <v-stepper-content step="2">
        <v-card class="mb-5" height="400px"></v-card>

        <v-btn color="primary" @click="e1 = 3">Continue</v-btn>

        <v-btn flat>Cancel</v-btn>
      </v-stepper-content>

      <v-stepper-content step="3">
        <v-card class="mb-5" height="400px"></v-card>

        <v-btn color="primary" @click="e1 = 1">Continue</v-btn>

        <v-btn flat>Cancel</v-btn>
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>

<script>
export default {
  data() {
    return {
      e1: 0,
      timer: null,
      totalTime: 1 * 60,
      resetButton: false
    };
  },
  methods: {
    startTimer: function() {
      this.timer = setInterval(() => this.countdown(), 1000);
    },
    resetTimer: function() {
      this.totalTime = 1 * 60;
      clearInterval(this.timer);
      this.timer = null;
    },
    padTime: function(time) {
      return (time < 10 ? "0" : "") + time;
    },
    countdown: function() {
      if (this.totalTime >= 1) {
        this.totalTime--;
      } else {
        this.totalTime = 0;
        this.resetTimer();
      }
    },
  },
  computed: {
    minutes: function() {
      const minutes = Math.floor(this.totalTime / 60);
      return this.padTime(minutes);
    },
    seconds: function() {
      const seconds = this.totalTime - this.minutes * 60;
      return this.padTime(seconds);
    }
  }
};
</script>

Я добавил сюда таймер, но он запускается нажатием кнопки «Пуск».Чего я хочу добиться: таймер запускается автоматически и переходит к следующему шагу через 1 минуту, затем таймер запускается снова и переходит к следующему через 1 минуту и ​​т. Д. *

1 Ответ

0 голосов
/ 19 марта 2019

Звоните startTimer в установленном.

mounted () {
  this.startTimer()
}
...