Driverjs-前端引导页组件

https://www.npmjs.com/package/driver.js
安装：

yarn add driver.js -S

<template>
  <div style="padding-left: 100px;padding-top: 100px;">
    <div id="guide-menu">
      11111111111
    </div>
    <div class="collapse-box">
      2222222222
    </div>
    <div class="user-content">
      3333333333
    </div>
    <div id="guide-breadcrumb">
      44444444444
    </div>
    <div id="tagsView">
      55555555555
    </div>
  </div>
</template>

<script>
  import Driver from "driver.js";
  import "driver.js/dist/driver.min.css";
  import {steps} from '@/utils/guide.js'

  export default {
    name: 'imgZoom',
    data() {
      return {
        driver: null
      }
    },
    mounted() {
      this.driver = new Driver({
        className: "scoped-class", // className to wrap driver.js popover
        animate: true, // Animate while changing highlighted element
        opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
        padding: 10, // Distance of element from around the edges
        allowClose: true, // Whether clicking on overlay should close or not
        overlayClickNext: false, // Should it move to next step on overlay click
        doneBtnText: "完成", // Text on the final button
        closeBtnText: "关闭", // Text on the close button for this step
        nextBtnText: "下一步", // Next button text for this step
        prevBtnText: "上一步" // Previous button text for this step
        // Called when moving to next step on any step
      })
      this.driver.defineSteps(steps)
      this.driver.start()
    },
  }

</script>

<style scoped>
#guide-menu,.collapse-box,.user-content,#guide-breadcrumb,#tagsView {
  width: 80%;
  height: 100px;
}
</style>

guild.js

export const steps = [
  {
    element: "#guide-menu", // 对应需要显示的id获取class
    popover: {
      title: "菜单导航",
      description: "点击菜单可切换右侧菜单内容",
      position: "right"
    }
  },
  {
    element: ".collapse-box",
    popover: {
      title: "汉堡包",
      description: "点击收缩和展开菜单导航",
      position: "bottom"
    },
    padding: 5
  },
  {
    element: "#guide-breadcrumb",
    popover: {
      title: "面包屑导航",
      description: "用于显示 当前导航菜单的位置",
      position: "bottom"
    }
  },
  {
    element: ".user-content",
    popover: {
      title: "个人中心",
      description: "点击可操作",
      position: "left"
    }
  },
  {
    element: "#tagsView",
    popover: {
      title: "最近打开任务",
      description: "最近打开任务菜单，点击可快速切换",
      position: "bottom"
    }
  }
]