vue driver.jsページステップブート
Driver.js基本用法
<template>
<div class="app-container">
<aside>
{{ $t('guide.description') }}
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
</aside>
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
{{ $t('guide.button') }}
</el-button>
</div>
</template>
<script>
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from './steps'
export default {
name: 'Guide',
data() {
return {
driver: null
}
},
mounted() {
// this.driver = new Driver({
// doneBtnText: " ", //
// stageBackground: "#ffffff",
// nextBtnText: " ", //
// prevBtnText: " ", //
// closeBtnText: " " //
// onHighlightStarted:(Element)=> {},//
// onHighlighted:(Element)=> {},//
// onDeselected:(Element)=> {},//
// onReset:(Element)=> {},//
// onNext:(Element)=> {},//
// onPrevious :( Element)=> {},//
// });
this.driver = new Driver()
},
methods: {
guide() {
this.driver.defineSteps(steps)
this.driver.start()
}
}
}
</script>
const steps = [
{
element: '#hamburger-container',
popover: {
title: 'Hamburger',
description: 'Open && Close sidebar',
position: 'bottom'
}
},
{
element: '#breadcrumb-container',
popover: {
title: 'Breadcrumb',
description: 'Indicate the current page location',
position: 'bottom'
}
},
{
element: '#header-search',
popover: {
title: 'Page Search',
description: 'Page search, quick navigation',
position: 'left'
}
},
{
element: '#screenfull',
popover: {
title: 'Screenfull',
description: 'Set the page into fullscreen',
position: 'left'
}
},
{
element: '#size-select',
popover: {
title: 'Switch Size',
description: 'Switch the system size',
position: 'left'
}
},
{
element: '#tags-view-container',
popover: {
title: 'Tags view',
description: 'The history of the page you visited',
position: 'bottom'
},
padding: 0
}
]
export default steps