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

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

效果：

# Using npm
npm install driver.js

# Using pnpm
pnpm install driver.js

# Using yarn
yarn add driver.js

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

//这个地方需要注意的是，安装driver的版本不同，node-modules包里面生成的css名称不同，可能是driver.min.css或driver.css，此处，你要检查你生成的包名称是什么，然后引入正确的css名称

import Driver from "driver.js";
import "driver.js/dist/driver.min.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，其引导页面完整代码

<template>
<div class="app-container">
  <div class="help">
    <el-button type="success" plain @click.prevent.stop="guide">帮助</el-button>
  </div>
  <div class="one" id="A">
    <h1>第一步</h1>
    <div>来喽</div>
  </div>
  <div class="two" id="B">
    <h1>第二步</h1>
    <div>来喽</div>
  </div>
  <div class="three" id="C">
    <h1>第三步</h1>
    <div>来喽</div>
  </div>
  <div class="four" id="D">
    <h1>第四步</h1>
    <div>结束</div>
  </div>
</div>
</template>

<script>
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import steps from "./steps";
export default {
  name: "index",
  methods:{
    guide() {
      this.$nextTick(function () {
        this.driver = new Driver({
          doneBtnText: '完成', // 结束按钮的文字
          animate: true, // 动画
          stageBackground: '#ffffff', // 突出显示元素的背景颜色
          nextBtnText: '下一步', // 下一步按钮的文字
          prevBtnText: '上一步', // 上一步按钮的文字
          closeBtnText: '关闭' // 关闭按钮的文字
        })
        this.driver.defineSteps(steps)
        this.driver.start()
      })
    },
  }
}
</script>

<style scoped>
.help {
  display: flex;
  justify-content: right;
}
.one {
  width: 100px;
}
.two {
  margin: 0 auto;
  width: 100px;
}
.three{
  width: 100px;
  margin: 0 0 0 1500px;
}
</style>

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