Driver.js——实现页面引导

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

前言

大家好，这里是前端杂货铺。

本篇文章我们来实现一个 页面向导功能（效果如下），大部分用于用户初次使用产品时的向导教程。

项目源码：Github（vite-driver-demo）[ 欢迎 Star ]

---

Driver.js 简介

要实现页面向导功能，我们可以借助一个轻量级的 JavaScript 库 —— Driver.js。它主要用于产品导览、亮点、上下文帮助等。

其主要作用如下：

• 导览用户：通过解释如何使用您的产品并回答常见问题来导览您的用户。
• 移除干扰：通过高亮功能，您可以移除干扰，让用户的注意力集中在重要的事情上。
• 上下文帮助：为您的用户提供上下文帮助，解释如何使用您的产品并回答常见问题。
• 功能推荐：高亮新功能，解释如何使用它们，并确保您的用户不会错过它们。
  

---

安装

可以运行以下任意一个命令来安装driver.js：

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

---

基本使用

下面在 vite + vue3 的项目中简单使用一下 driver.js。

首先，导入 driver.js 和 driver.css；之后创建 driver，里面放置一些要进行的步骤和配置（步骤可以通过 id 或 class 等方式），最后通过 driverObj.drive() 调用一下就完成了。

说明：通过 id 或 class 来定位元素；通过 side 来调整弹出框的显示位置。

<script setup lang="ts">
import { driver } from "driver.js";
import "driver.js/dist/driver.css";defineProps<{ msg: string }>()// 完成步骤及一些基本配置
const driverObj = driver({showProgress: true, // 显示进度allowClose: true, // 允许关闭doneBtnText: "结束", // 完成按钮文本nextBtnText: "下一步", // 下一步按钮文本prevBtnText: "上一步", // 上一步按钮文本steps: [{ element: '#logo', popover: { title: 'Logo', description: '标志: vite + vue', side: "left" } },{ element: '#blog', popover: { title: 'Blog', description: '名称：前端杂货铺', side: "right" } },{ element: '#card', popover: { title: 'Driver', description: '向导：向导按钮', side: "top" } },{ element: '#end', popover: { title: 'End', description: '结束：最后一步', side: "bottom" } }]
});
</script><template><h1 id="blog">{{ msg }}</h1><div class="card" id="card"><button type="button" @click=driverObj.drive();>开启向导</button></div><p id="end">Driver.js的使用很简单，End!</p>
</template><style scoped></style>

---

总结

Driver.js 是一个轻量级的 JavaScript 类库，主要用于产品导览等；在一些产品的向导方便使用的还是非常广泛的，我们有必要对它有个基本的了解和认识。

本文主要对 Driver.js 进行了基本的介绍，安装等，并实现了基本的 Demo，效果本文一开始演示的那样…

---

参考资料：

1. Driver.js 文档

---

---