feat: add custom callback management

pulsardev · Mar 14, 2018 · 83481b1 · 83481b1
1 parent 7af9743
commit 83481b1
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/demo/src/components/MyTour.vue b/demo/src/components/MyTour.vue
@@ -4,7 +4,7 @@
     <button @click="nextStep" class="btn btn-lg">Next step</button>
     <button @click="showLastStep" class="btn btn-lg">Show last step</button>
 
-    <v-tour name="myTour" :steps="steps">
+    <v-tour name="myTour" :steps="steps" :on-next-step="myCustomNextStepCallback" :on-previous-step="myCustomPreviousStepCallback">
       <template slot-scope="tour">
         <transition name="fade">
           <v-step
@@ -70,6 +70,15 @@ export default {
     },
     showLastStep () {
       this.$tours['myTour'].currentStep = this.steps.length - 1
+    },
+    myCustomNextStepCallback () {
+      console.log('[Vue Tour] A custom callback called each time we go to the next step')
+      if (this.$tours['myTour'].currentStep === 2) {
+        console.log('[Vue Tour] A custom callback called from step 2 to step 3')
+      }
+    },
+    myCustomPreviousStepCallback () {
+      console.log('[Vue Tour] A custom callback called each time we go back on the previous step')
     }
   }
 }

diff --git a/src/components/VTour.vue b/src/components/VTour.vue
@@ -8,6 +8,8 @@
       :stop="stop"
       :isFirst="isFirst"
       :isLast="isLast"
+      :onNextStep="onNextStep"
+      :onPreviousStep="onPreviousStep"
     >
       <!--Default slot {{ currentStep }}-->
       <v-step
@@ -45,7 +47,9 @@ export default {
     options: {
       type: Object,
       default: () => { return DEFAULT_OPTIONS }
-    }
+    },
+    onNextStep: Function,
+    onPreviousStep: Function,
   },
   data () {
     return {
@@ -96,10 +100,16 @@ export default {
       }, this.customOptions.startTimeout)
     },
     previousStep () {
-      if (this.currentStep > 0) this.currentStep--
+      if (this.currentStep > 0) {
+        this.currentStep--
+        this.onPreviousStep()
+      }
     },
     nextStep () {
-      if (this.currentStep < this.numberOfSteps - 1 && this.currentStep !== -1) this.currentStep++
+      if (this.currentStep < this.numberOfSteps - 1 && this.currentStep !== -1) {
+        this.currentStep++
+        this.onNextStep()
+      }
     },
     stop () {
       this.currentStep = -1