Driver.js——实现页面引导

news2024/12/30 1:41:13

个人简介

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

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

文章目录

- 前言
- Driver.js 简介
- 安装
- 基本使用
- 总结

前言

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

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

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

Driver.js 实现动画向导

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>