driverjs vue typescript vuetify
Preview
Install
npm install driver.js -D
Useage in vue component
<template>
<div class="text-center headline">
<div class="ma-8">
<v-btn @click.prevent.stop="guide">open guide</v-btn>
</div>
<div>
<v-btn id="b1">BUTTON</v-btn>
<br />
<br />
<div class="d1" style="width:200px; border:1px solid red;">DIV</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
@Component({
components: {}
})
export default class Introduction extends Vue {
private driver: any = null
private mounted() {
this.driver = new Driver()
console.info(this.driver)
}
private guide() {
const steps = [
{
element: '#b1',
popover: {
title: 'Button',
description: 'This is a Vuetify UI button component',
position: 'bottom'
}
},
{
element: '.d1',
popover: {
title: 'Div',
description: 'This is a div element',
position: 'right'
}
}
]
this.driver.defineSteps(steps)
this.driver.start()
}
}
</script>
Tips
Event modifier must be used for button click event, otherwise driverjs will not work
<v-btn @click.prevent.stop="guide">open guide</v-btn>
