https://github.com/ianfabs/vue-driver
A Vue.js wrapper for Driver.js
https://github.com/ianfabs/vue-driver
javascript js tour tutorial vue web
Last synced: 10 months ago
JSON representation
A Vue.js wrapper for Driver.js
- Host: GitHub
- URL: https://github.com/ianfabs/vue-driver
- Owner: ianfabs
- Created: 2019-02-07T00:20:20.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-11T10:09:24.000Z (over 5 years ago)
- Last Synced: 2024-10-19T07:15:24.510Z (over 1 year ago)
- Topics: javascript, js, tour, tutorial, vue, web
- Language: CSS
- Size: 234 KB
- Stars: 9
- Watchers: 2
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```javascript
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:
```javascript
{
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
```html
Hi, I'm some content!
```
With value
```html
Hi, I'm some content!
```
## 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](https://github.com/kamranahmedse/driver.js/issues/113#issuecomment-403237746) for an example*
#### Example
Bad
```html
start tour
```
Good
```html
start tour
```
### $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.