1.0.3 • Published 5 years ago
vue-driver.js v1.0.3
vue-driver.js
VueDriver is a Vue plugin for driver.js, a tool to help drive the users focus
Installation
> npm install vue-driver.js
Use
import Vue from "vue";
import VueDriver from "vue-driver.js";
Vue.use(VueDriver);
// The rest of your Vue code
...
Directives
driver-step
Adds v-driver-step
directive
it accepts an object that is structured like this:
{
popover: {
title: String,
description: String,
position: String,
showButtons: Boolean,
closeBtnText: String,
nextBtnText: String,
prevBtnText: String
},
index: Number,
onclick: Boolean
}
where the object types represent the type of the parameter
Note: if you specify the same index more than one step, it will choose whichever one binds last to have that position
Example
Without value
<div v-driver-step>
Hi, I'm some content!
</div>
With value
<div v-driver-step="{ popover: {title: 'Hey', description: 'Im a popover'} }">
Hi, I'm some content!
</div>
Mixins
vue-driver has two mixins as of now
$startTour( index: Number )
$startTour
is a component mixin that starts a tour, if you've supplied steps through the v-driver-step
attribute.
Note: You must stop event propigation on your button's click event. See here for an example
Example
Bad
<button @click="$startTour">start tour</button>
Good
<button @click.stop="$startTour">start tour</button>
$driver
The $driver
mixin exposes the current driver instance, so that you can use the driver.js api directly till i can write more useful mixins.