diff --git a/README.md b/README.md index 8d4d793..0ebfb4f 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,9 @@ The `target` property of each step can target a DOM element in any component of steps: [ { target: '#v-step-0', // We're using document.querySelector() under the hood + header: { + title: 'Get Started', + }, content: `Discover Vue Tour!` }, { @@ -69,7 +72,7 @@ The `target` property of each step can target a DOM element in any component of target: '[data-v-step="2"]', content: 'Try it, you\'ll love it!
You can put HTML in the steps and completely customize the DOM to suit your needs.', params: { - placement: 'top' + placement: 'top' // Any valid Popper.js placement. See https://popper.js.org/popper-documentation.html#Popper.placements } } ] diff --git a/src/components/VStep.vue b/src/components/VStep.vue index 599865e..ce1641f 100644 --- a/src/components/VStep.vue +++ b/src/components/VStep.vue @@ -15,10 +15,10 @@
- - - - + + + +
@@ -68,6 +68,9 @@ export default { labels: { type: Object }, + enabledButtons: { + type: Object + }, highlight: { type: Boolean }, @@ -86,6 +89,7 @@ export default { return { ...DEFAULT_STEP_OPTIONS, ...{ highlight: this.highlight }, // Use global tour highlight setting first + ...{ enabledButtons: this.enabledButtons }, ...this.step.params // Then use local step parameters if defined } } @@ -166,6 +170,9 @@ export default { }, 0) } } + }, + isButtonEnabled (name) { + return this.params.enabledButtons.hasOwnProperty(name) ? this.params.enabledButtons[name] : true } }, mounted () { diff --git a/src/components/VTour.vue b/src/components/VTour.vue index 455f62d..906749d 100644 --- a/src/components/VTour.vue +++ b/src/components/VTour.vue @@ -11,6 +11,7 @@ :is-first="isFirst" :is-last="isLast" :labels="customOptions.labels" + :enabled-buttons="customOptions.enabledButtons" :highlight="customOptions.highlight" > @@ -26,6 +27,7 @@ :is-first="isFirst" :is-last="isLast" :labels="customOptions.labels" + :enabled-buttons="customOptions.enabledButtons" :highlight="customOptions.highlight" :stop-on-fail="customOptions.stopOnTargetNotFound" @targetNotFound="$emit('targetNotFound', $event)" diff --git a/src/shared/constants.js b/src/shared/constants.js index 9421d61..1ab97dc 100644 --- a/src/shared/constants.js +++ b/src/shared/constants.js @@ -15,6 +15,12 @@ export const DEFAULT_OPTIONS = { buttonNext: 'Next', buttonStop: 'Finish' }, + enabledButtons: { + buttonSkip: true, + buttonPrevious: true, + buttonNext: true, + buttonStop: true + }, startTimeout: 0, useKeyboardNavigation: true } @@ -34,6 +40,7 @@ export const HIGHLIGHT = { export const DEFAULT_STEP_OPTIONS = { enableScrolling: true, highlight: DEFAULT_OPTIONS.highlight, // By default use the global tour setting + enabledButtons: DEFAULT_OPTIONS.enabledButtons, modifiers: { arrow: { element: '.v-step__arrow'