is possible to set delay going to next step?

[pulsardev]

is possible to set delay going to next step?

[goldengecko]

Thanks for the pointer - I have made it a bit more generic so that it automatically pushes a route when you need to, and then waits for it to load.

    <v-tour name="introTour"
      :steps="introSteps">
      <template slot-scope="tour">
        <transition name="fade">
          <v-step v-if="tour.currentStep === index"
            v-for="(step, index) of tour.steps"
            :key="index"
            :step="step"
            :previous-step="tour.previousStep"
            :next-step="tour.nextStep"
            :stop="tour.stop"
            :is-first="tour.isFirst"
            :is-last="tour.isLast"
            :labels="tour.labels">
            <div slot="actions">
              <div class="v-step__buttons">
                <button @click.prevent="tour.stop"
                  v-if="!tour.isLast">{{ labels.buttonSkip }}</button>
                <button @click.prevent="introGoPrev(tour)"
                  v-if="!tour.isFirst">{{ labels.buttonPrevious }}</button>
                <button @click.prevent="introGoNext(tour)"
                  v-if="!tour.isLast">{{ labels.buttonNext }}</button>
                <button @click.prevent="tour.stop"
                  v-if="tour.isLast">{{ labels.buttonStop }}</button>
              </div>
            </div>
          </v-step>
        </transition>
      </template>
    </v-tour>

And then in the data I specify the steps where it needs to go to a specific route:

      introSteps: [
        {
          target: '#intro-step-0',
          header: { title:'This is a header' },
          content: 'Test of tour',
        },
        {
          route: '/services',
          target: '#intro-step-1',
          content: 'Here we are',
        },
      ],

And pick it up in my methods:

    introGoNext(tour) {
      if (tour.steps[tour.currentStep + 1].route) {
        this.$router.push(tour.steps[tour.currentStep + 1].route)
        this.$nextTick(() => {
          tour.nextStep()
        })
      } else {
        tour.nextStep()
      }
    },
    introGoPrev(tour) {
      if (tour.steps[tour.currentStep - 1].route) {
        this.$router.push(tour.steps[tour.currentStep - 1].route)
        this.$nextTick(() => {
          tour.previousStep()
        })
      } else {
        tour.previousStep()
      }
    },

Hope this is useful

[Outpox]

Hi guys, have you given a look to the startTimeout property ?
Check the doc for an example.
Edit: You maybe meant a delay between each step? If so take a look at the custom callbacks in the doc. I believe you should be able to use a setTimeout() to fulfil your need. Let me know if you need more help.

[gavJackson]

+1

I also need this feature.

[gavJackson]

Hi, thanks for getting back to us, yeah I want to have a delay between each step so using a custom call back sounds like it could help although its not clear from the docs how to delay/defer the next step while the custom call back runs, but this is exactly what I would need. Maybe something like this:

myCustomNextStepCallback (currentStep) {
   this.$tours['myTour'].pause()
  
   // do something async 
   setTimeout ( () => this.$tours['myTour'].resume(), 1000);
 }

Although if nothing exists like this already a better approach would be to allow us to define more options in the param object of a step (like hopscotch which has many more options - which I recommend you also consider providing things like offsets )

{
	target: '#autoCompleteResults li:first-child',
	content: '....',
	params: {
		placement: 'bottom',
		delay: 2000
	}
},

UPDATE: I did manage to figure this out via a custom template but its a lot of code to just add a delay:

<v-tour name="myTour" :steps="steps" :callbacks="myCallbacks">
	<template slot-scope="tour">
		<transition name="fade">
			<v-step
					v-if="tour.currentStep === index"
					v-for="(step, index) of tour.steps"
					:key="index"
					:step="step"
					:previous-step="tour.previousStep"
					:next-step="tour.nextStep"
					:stop="tour.stop"
					:isFirst="tour.isFirst"
					:isLast="tour.isLast"
			>
				<template v-if="tour.currentStep === 1">
					<div slot="actions">
						<button @click="tour.previousStep"
								class="btn btn-primary">Previous step
						</button>
						<button @click="doSecondStep(tour)"
								class="btn btn-primary">Next step
						</button>
					</div>
				</template>
			</v-step>
		</transition>
	</template>
</v-tour>

..
..
..
..


	doSecondStep(tour) {
		this.onSecondStep()

		setTimeout ( () => tour.nextStep(), 2000);

	}

[glorat]

It seems @pbascunana made a PR at #122

Just to comment that I solved the a problem in a different way... each of my steps has an event hook (e.g. DOM element clicked/appears) which auto-moves to that next step. Aside from solving the display issue, it also means you move to the next step automatically if the user triggered the page change themselves.

[mmorainville]

Hi all,

Actually @buwilliams has made a PR to add a before hook that handles asynchronous actions using Promises.
This is way more flexible than adding a param in the step with a fixed delay, that's why we've decided to merge his PR (#84) rather than the one from @pbascunana (but thanks anyway for the contribution!).

[mmorainville]

The PR has been merged and released in v1.5.0.