Vue TypeScript 项目引导页功能实现

npm install driver.js -D

<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>

<v-btn @click.prevent.stop="guide">open guide</v-btn>