带计时器的 vuetify 步进器

Posted 2023-02-23

【中文标题】带计时器的 vuetify 步进器

【英文标题】：vuetify stepper with timer

【发布时间】：2019-08-10 08:03:25

【问题描述】：

我制作了一个 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" >
          <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" ></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" ></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】：

在mounted中调用startTimer。

mounted () 
  this.startTimer()