vue使用driver.js完成页面引导的功能

需求：给客户做一个页面引导，教客户怎么做

效果：

driverjs官方文档 

一.安装driver.js 

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

二.在自己需要引导的页面上引入driver.js 

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

三.在外部建一个steps.js

const steps = [
  {
    element: '#A',
    popover: {
      title: '帮助',
      description: '第一步指引',
      position: 'bottom'
    }
  },
  {
    element: '#B',
    popover: {
      title: '帮助',
      description: '第二步指引',
      position: 'bottom'
    }
  },
  {
    element: '#C',
    popover: {
      title: '帮助',
      description: '第三步指引',
      position: 'bottom'
    },
  },
  {
    element: '#D',
    popover: {
      title: '帮助',
      description: '第四步指引',
      position: 'bottom'
    },
  },
]

export default steps

 四.引导页面里面引入steps.js，其引导页面完整代码

以上代码就能实现其页面引导的功能