前端vue实现新手引导页（亲测可用）

driverjs官网链接

安装

我这里安装的版本是"driver.js": "0.9.5",

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

示例代码：

 这里的id类名要和配置项的element相同

  <div id="size-select">某某某某</div>
   <el-button @click.prevent.stop="guide">打开引导</el-button>

import Driver from "driver.js"; // import driver.js
import "driver.js/dist/driver.min.css"; // import driver.js css
import steps from "./steps";

mounted() {
    this.driver = new Driver();
  },
  
methods: {
   //添加按钮去触发此事件
   guide() {
      this.driver.defineSteps(steps);
      this.driver.start();
    }
  }

配置项 

steps数组的顺序就是引号页面的流程的顺序

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