![image](https://developer.qcloudimg.com/http-save/yehe-1209475/f6f756574ea6e281befa2aaf83130ee0.png)

## 前言

你好，我是喵喵侠，是一名前端开发。
 最近接的一个项目，合同里白纸黑字写着要有一个“用户操作指引”功能。说实话，这功能以前我还真没太深入搞过，毕竟自家产品大多靠直觉就能用。但既然合同规定了，那就得安排。
 刚开始我上网搜了一圈方案，市面上比较成熟的库主要有 Intro.js​、Shepherd.js​ 和 Driver.js​。

## 技术选型

在决定用哪个库之前，我简单对比了一下：

- Intro.js：老牌劲旅，功能很全，文档也详细。但它的商业许可证（License）比较严格，如果是商业项目，需要特别确认是否合规。
- Shepherd.js：高度可定制，基于 Floating UI，定位非常精准。但缺点是配置项略微繁琐，对于只想快速实现简单引导的场景来说，有点“大炮打蚊子”。
- Driver.js：这是我最终的选择。原因很简单：更新勤快（GitHub 活跃，刚发了 v1.0 版本），而且默认皮肤就挺好看，不用我再去写一堆 CSS 覆盖样式。对于想快速交付、又不想折腾样式的我来说，非常合适。

## 快速上手

Driver.js 的 API 设计直观，基本就是“定义步骤”然后“开始”。如果你是 Vue/React 等工程化项目，推荐通过包管理器安装。

#### 1. 安装依赖

```bash
npm install driver.js
# 或者
pnpm add driver.js
```

#### 2. 引入库文件

在需要使用的组件里引入核心逻辑和样式文件。如果你是全局使用，建议在 main.js 或布局组件中引入。

```javascript
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
```

## 功能概览

Driver.js 的核心配置主要分为两部分：全局配置（初始化时设定）和步骤配置（每一步的具体行为）。

#### 1. 初始化配置

我们可以配置一些全局通用的属性，比如遮罩的透明度、动画效果以及按钮的文案。

```javascript
const driverObj = driver({
  showProgress: true,  // 底部显示进度条（1/3）
  animate: true,       // 启用动画，让高亮框移动更丝滑
  opacity: 0.75,       // 背景遮罩透明度，0 是全透明，1 是全黑
  doneBtnText: '完成', // 最后一个按钮的文案
  nextBtnText: '下一步',
  prevBtnText: '上一步',
  allowClose: false,   // 禁止点击遮罩关闭，适合强制引导
  // 引导结束或被手动关闭时的回调
  onDestroyed: () => {
    console.log('引导结束，可以在这里调用接口保存状态');
  }
});
```

#### 2. 气泡方向控制

在定义步骤时，popover.side 属性决定了气泡弹出的方向。这在复杂的页面布局中非常重要，因为我们要避免气泡挡住重要的操作区域。

```javascript
const steps = [
  {
    element: '#sidebar',
    popover: {
      title: '侧边菜单',
      description: '这里包含所有的功能模块入口。',
      side: 'right', // 气泡显示在元素的右侧
      align: 'start' // 对齐方式：start (顶部对齐), center (居中), end (底部对齐)
    }
  },
  {
    element: '#footer',
    popover: {
      title: '底部信息',
      description: '版权信息和联系方式在这里。',
      side: 'top',   // 气泡显示在元素的上方
      align: 'center'
    }
  }
];
```

支持的方向有：left, right, top, bottom。配合 align 属性，你可以把气泡精准地放在任何你想要的位置。

#### 3. 样式定制

虽然默认样式已经够用了，但产品经理总会有“把这个按钮改成品牌色”的需求。Driver.js 生成的 DOM 都在 body 根目录下，我们可以通过全局 CSS 来覆盖它。

你可以在项目的全局样式文件（如 global.css 或 App.vue 的 <style>）中添加以下代码：

```css
/* 修改引导气泡的背景和圆角 */
.driver-popover.driverjs-theme {
  background-color: #ffffff;
  border-radius: 8px;
  color: #333;
}

/* 修改标题样式 */
.driver-popover-title {
  font-size: 18px;
  font-weight: bold;
  color: #2563eb; /* 品牌蓝 */
}

/* 修改“下一步”按钮的样式 */
.driver-popover-next-btn {
  background-color: #2563eb !important; /* 强制覆盖默认黑色 */
  color: #ffffff !important;
  border-radius: 4px;
  padding: 8px 16px;
  text-shadow: none; /* 去掉默认的文字阴影 */
}

/* 修改“上一步”按钮的样式 */
.driver-popover-prev-btn {
  border: 1px solid #e5e7eb;
  color: #666 !important;
}
```

## 实战演示

光说不练假把式。为了让大家能直接体验，我写了一个纯 HTML 版本的 Demo。
 这里使用了 Vue 3 的 CDN 版本，配合 jsdelivr​ 引入资源。你可以直接复制下面的代码，保存为 index.html​，双击在浏览器打开就能看到效果。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Driver.js + Vue 3 演示</title>
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
  <style>
    body { font-family: 'Inter', system-ui, sans-serif; padding: 20px; background: #f9fafb; }
    .container { max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; border-bottom: 1px solid #e5e7eb; padding-bottom: 20px; }
    .logo { font-size: 20px; font-weight: 700; color: #2563eb; }
    .user { display: flex; align-items: center; gap: 8px; cursor: pointer; }
    .avatar { width: 32px; height: 32px; background: #e5e7eb; border-radius: 50%; }
    .btn { background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background 0.2s; }
    .btn:hover { background: #1d4ed8; }
    .content { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .card { border: 1px solid #e5e7eb; padding: 20px; border-radius: 8px; }
    h3 { margin-top: 0; font-size: 16px; }
    p { color: #6b7280; font-size: 14px; }

    /* --- 自定义 Driver.js 样式 --- */
    .driver-popover-next-btn {
      background-color: #2563eb !important; /* 覆盖默认的黑色按钮 */
      color: white !important;
    }
    .driver-popover-progress-text {
      color: #9ca3af !important;
    }
  </style>
</head>
<body>
  
  <div id="app" class="container">
    <div class="header">
      <div id="step-logo" class="logo">喵喵后台</div>
      <div id="step-user" class="user">
        <span>管理员</span>
        <div class="avatar"></div>
      </div>
    </div>

    <div style="margin-bottom: 24px;">
      <button id="step-btn" class="btn" @click="startGuide">重新开始引导</button>
    </div>

    <div class="content">
      <div class="card">
        <h3>数据概览</h3>
        <p>核心指标的实时监控数据...</p>
      </div>
      <div class="card">
        <h3>消息通知</h3>
        <p>最新的系统告警通知...</p>
      </div>
    </div>
  </div>

  
  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>

  <script>
    const { createApp, onMounted, nextTick } = Vue;

    createApp({
      setup() {
        // 定义步骤配置
        const steps = [
          {
            element: '#step-logo',
            popover: {
              title: '欢迎体验',
              description: '这是我们全新的后台管理系统。',
              side: 'bottom', // 气泡出现在下方
              align: 'start'  // 左对齐
            }
          },
          {
            element: '#step-btn',
            popover: {
              title: '重新引导',
              description: '如果在操作过程中迷路了，可以点击这里重看教程。',
              side: 'right',  // 气泡出现在右侧
              align: 'center' // 居中对齐
            }
          },
          {
            element: '#step-user',
            popover: {
              title: '个人中心',
              description: '点击这里可以切换账号或退出的登录。',
              side: 'left',   // 气泡出现在左侧
              align: 'center'
            }
          }
        ];

        const driverObj = window.driver.js.driver({
          showProgress: true,
          animate: true,
          doneBtnText: '开始体验',
          nextBtnText: '下一步',
          prevBtnText: '上一步',
          steps: steps
        });

        const startGuide = () => {
          driverObj.drive();
        };

        onMounted(() => {
          // 页面渲染完成后，等待下一个 DOM 更新周期再启动
          nextTick(() => {
            driverObj.drive();
          });
        });

        return {
          startGuide
        };
      }
    }).mount('#app');
  </script>
</body>
</html>
```

## 总结

driver.js 是一个非常轻量且优雅的库，几行代码就能实现丝滑的引导效果。
 它的配置虽然简单，但也能满足大部分的定制需求。对于位置调整，活用 side​ 和 align​ 就能搞定；对于样式修改，直接 CSS 覆盖是最快的方法。
 不过还是那句老话，引导步骤尽量控制在 3-5 步以内，过多的步骤会消耗用户的耐心，导致直接跳过。

你好，我是喵喵侠，是一名前端开发。 最近接的一个项目，合同里白纸黑字写着要有一个“用户操作指引”功能。说实话，这功能以前我还真没太深入搞过，毕竟自家产品大多靠直觉就能用。但既然合同规定了，那就得安排。 刚开始我上网搜了一圈方案，市面上比较成熟的库主要有 Intro.js​、Shepherd.js​ 和 Driver.js​。

手把手教你用 Driver.js 搞定“新手引导”

前端

前端开发实战：使用Driver.js快速实现用户操作指引功能。对比Intro.js和Shepherd.js，Driver.js凭借活跃更新、简洁API和美观默认样式胜出。文章详解安装配置、气泡方向控制和样式定制技巧，提供Vue3+Driver.js完整Demo代码，助你轻松实现3-5步的丝滑用户引导体验。

包管理器

GitHub

2026新春采购季

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

手把手教你用 Driver.js 搞定“新手引导”-腾讯云开发者社区-腾讯云

手把手教你用 Driver.js 搞定“新手引导”

手把手教你用 Driver.js 搞定“新手引导”

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐