vue使用driver.js完成页面引导功能的示例详解

# Using npm
npm install driver.js
# Using pnpm
pnpm install driver.js
# Using yarn
yarn add driver.js

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

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

<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.css";
import steps from "./steps";
export default {
  name: "index",
  methods:{
    guide() {
      const driverObj = driver({
        doneBtnText: '完成', // 最后一个按钮的文本
        nextBtnText: '下一步', // 下一步
        prevBtnText: '上一步', // 上一步
        showProgress: true,//显示进度条
        steps: steps
      });
      driverObj.drive();
    },
  }
}
</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>