Basic usage of 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: "done ", // The end button text
    // stageBackground: "# FFFFFF ", highlight the element's background color
    // nextBtnText: "next ", // Next button text
    // prevBtnText: "previous step ", // Previous step button text
    // closeBtnText: "close" // Close button text
    // onHighlightStarted :(Element) => {}, // called when the Element is about to be highlighted
    // onHighlighted :(Element) => {}, // called when the Element is fully highlighted
    // onDeselected :(Element) => {}, // called when the Element is deselected
    // onReset :(Element) => {}, // called when you want to clear the overlay
    // onNext :(Element) => {}, // called when moving to the next step in any step
    // onPrevious :(Element) => {}, // called when moving to the previous step in any step
    / /});
    this.driver = new Driver()
  },
  methods: {
    guide() {
      this.driver.defineSteps(steps)
      this.driver.start()
    }
  }
}
</script>
Copy the code
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
Copy the code