Vue3 结合 Driver.js 实现新手指引
最近有写一个新手指引的功能，今天和大家分享一下实现过程。对于没有提供操作文档的系统，通常需要通过引导用户操作来熟悉系统的功能。
一、Driver.js 简介
Driver.js 是一个强大的库，能够帮助我们实现页面上的新手指引。它通过高亮页面中的特定元素，并为每个步骤提供文字提示，从而引导用户完成某个操作流程。
Driver.js 官方文档：Driver.js 文档
二、安装 Driver.js
我们可以通过以下命令安装 Driver.js：
使用 npm 安装
npm install driver.js
使用 pnpm 安装
pnpm install driver.js
使用 yarn 安装
yarn add driver.js
三、引入 Driver.js 样式
在 main.js 中引入 Driver.js 所需的样式文件：
import 'driver.js/dist/driver.css';
四、创建页面结构并实现引导流程
1. 创建页面并定义结构
我们创建一个简单的页面，页面中包含若干按钮和一个新增按钮。用户进入页面后，系统会引导他们完成一些操作，最后高亮“新增”按钮，用户点击后会弹出一个弹窗，点击“保存并退出”时伪造一条数据并继续进行卡片操作指引。
2. 引入 Driver.js
在组件中引入 driver.js 并实例化：
import Driver from 'driver.js';
const driverObj = new Driver();
3. 实现局部高亮效果
我们可以给需要高亮的元素绑定一个 id，并使用 driverObj.highlight() 方法来高亮指定区域：
driverObj.highlight({
element: '#your-element-id',
popover: {
title: '标题',
description: '描述信息',
position: 'right',
},
});
4. 实现完整流程指引
接下来，我们为页面上的四个按钮绑定 id，并配置步骤数组 steps 来定义每一步的操作指引：
const steps = [
{
element: '#step1',
popover: {
title: '第一步',
description: '这是第一步的描述',
position: 'bottom',
},
},
{
element: '#step2',
popover: {
title: '第二步',
description: '这是第二步的描述',
position: 'right',
},
},
// 添加更多步骤...
];
driverObj.defineSteps(steps);
driverObj.start();
5. 修改按钮文字
我们可以通过以下配置修改指引流程中“上一步”、“下一步”等按钮的文字：
const driver = new Driver({
nextBtnText: '下一步',
prevBtnText: '上一步',
doneBtnText: '完成',
});
6. 编写弹窗组件
我们在新增按钮点击时触发弹窗，并通过 defineEmits 触发父组件中的事件逻辑：
const emit = defineEmits(['change']);
const handleChange = () => {
list.value = [
{
id: 1,
name: '新数据',
},
];
};
7. 判断是否继续高亮
为了避免多次打开弹窗后不再高亮相同区域，我们可以使用一个变量来控制流程是否继续：
const num = ref(0);
if (num.value === 1) {
driverObj.reset();
} else {
driverObj.highlight('#step3');
}
8. 禁止点击空白区域取消流程
为了避免用户误操作关闭流程，可以通过设置 allowClose: false 来禁止点击空白区域关闭引导流程：
const driver = new Driver({
allowClose: false,
});
9. 关闭弹窗后继续指引
当用户点击“新增”按钮弹出弹窗时，关闭弹窗后继续执行指引流程：
const closeModal = () => {
driverObj.reset(); // 关闭当前高亮
driverObj.highlight('#step4'); // 继续下一步
};
五、总结
通过 Driver.js 我们可以非常方便地为用户提供新手指引，并且可以根据不同的业务场景灵活定制指引流程。以上只是一个简单的实现，大家可以根据自己的需求进行更多的优化。
