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，其引导页面完整代码

<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>

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