Driver.js 火了八年终于更新：Vue、React都能直接用的产品引导神器

Driver.js 火了八年终于更新Vue、React都能直接用的产品引导神器Driver.js没有炫技、没有复杂配置它只是把产品引导这一件事做到足够成熟。过去几年前端圈一直有一个很尴尬的问题产品越来越复杂功能越来越多。但用户第一次打开页面时却经常一脸懵于是很多团队开始做各种新手引导、功能介绍、首次使用教程、操作提示、产品Tour。结果呢开发一个引导流程往往要写几百行代码还要自己处理遮罩层、高亮元素、弹窗定位、滚动定位、步骤切换、键盘事件、动画效果。一个简单的新手引导最后硬生生写成一个小项目。直到很多开发者重新发现了一个老朋友Driver.js。它已经开源很多年如今Driver.js v1.6发布后再次成为很多团队做产品引导的首选方案。一、Driver.js是什么很多人第一次看到Driver.js都会觉得就是一个Tooltip库其实完全不是。官方定位非常明确Lightweight JavaScript library for product tours, highlights, and contextual help for your product.简单来说就是高亮 遮罩 步骤引导 交互教程全部一次搞定。整个页面都会自动聚焦目标区域、其它区域变暗、自动滚动到目标位置、显示说明文字、点击下一步继续。整个体验非常自然。二、为什么越来越多SaaS产品都在用它如果你仔细观察很多国外产品第一次登录都会出现这种引导效果这里创建项目 → 这里配置API → 这里查看数据 → 这里发布。过去你可能需要监听元素 → 计算位置 → 创建遮罩 → 绘制高亮 → 创建弹窗 → 处理动画 → 处理滚动。而Driver.js一个API就能完成整个产品Tour。2.1 核心特性零依赖不依赖任何第三方库纯原生JavaScript轻量级压缩后仅5KB框架无关可以在React、Vue、Angular、Svelte或纯HTML中使用高度可定制支持自定义样式、动画、行为无障碍支持内置键盘导航和ARIA属性响应式自动处理窗口大小变化和滚动2.2 v1.6新特性Driver.js v1.6带来了几个重要更新TypeScript重写完整的类型定义更好的IDE支持新的弹窗定位引擎基于Floating UI更精确的定位动画系统重构支持CSS过渡和自定义动画Hook系统可以在引导的各个生命周期插入自定义逻辑多语言支持内置i18n机制三、快速上手3.1 安装npminstalldriver.js# 或yarnadddriver.js# 或CDNscriptsrchttps://cdn.jsdelivr.net/npm/driver.js1.6/dist/driver.js.iife.js/scriptlinkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/driver.js1.6/dist/driver.css3.2 基础用法import{driver}fromdriver.js;importdriver.js/dist/driver.css;constdriverObjdriver({showProgress:true,steps:[{element:#search-bar,popover:{title:搜索功能,description:在这里可以搜索你需要的任何内容,side:bottom,align:start}},{element:#create-btn,popover:{title:创建项目,description:点击这里开始创建你的第一个项目,side:left}},{element:#sidebar,popover:{title:导航菜单,description:通过侧边栏可以快速切换不同功能模块,side:right}}]});// 启动引导driverObj.drive();3.3 React集成import { driver, type DriveStep } from driver.js; import driver.js/dist/driver.css; import { useEffect, useRef } from react; function App() { const driverObj useRef( driver({ showProgress: true, animate: true, steps: [ { element: #dashboard, popover: { title: 仪表盘, description: 这里展示你的关键业务指标, } }, { element: #chart-area, popover: { title: 数据图表, description: 可视化展示你的业务数据趋势, } } ] }) ); const startTour () { driverObj.current.drive(); }; return ( div button onClick{startTour}开始引导/button {/* 你的应用内容 */} /div ); }3.4 Vue 3集成template div button clickstartTour开始引导/button div iddashboard仪表盘/div div idchart-area图表区域/div /div /template script setup langts import { driver } from driver.js; import driver.js/dist/driver.css; const driverObj driver({ showProgress: true, steps: [ { element: #dashboard, popover: { title: 仪表盘, description: 这里展示你的关键业务指标, } }, { element: #chart-area, popover: { title: 数据图表, description: 可视化展示你的业务数据趋势, } } ] }); const startTour () { driverObj.drive(); }; /script四、高级用法4.1 自定义样式constdriverObjdriver({steps:[...],// 自定义弹窗样式popoverClass:my-custom-popover,// 自定义遮罩样式overlayColor:rgba(0, 0, 0, 0.6),// 自定义高亮样式stagePadding:10,stageRadius:8,// 自定义按钮doneBtnText:完成,closeBtnText:关闭,nextBtnText:下一步,prevBtnText:上一步,// 进度条showProgress:true,progressText:{{current}} / {{total}},});4.2 生命周期钩子constdriverObjdriver({steps:[...],onHighlightStarted:(element,step){console.log(开始高亮:,element);// 可以在这里触发自定义动画},onHighlighted:(element,step){console.log(高亮完成:,element);},onDeselected:(element,step){console.log(取消高亮:,element);},onNextClick:(element,step){// 在进入下一步之前执行// 返回false可以阻止进入下一步if(step.popover.title关键步骤){returnconfirm(确认已理解此步骤);}},onCloseClick:(){// 用户点击关闭按钮localStorage.setItem(tour-completed,true);},onDestroyed:(){console.log(引导已结束);}});4.3 条件步骤conststeps[{element:#basic-feature,popover:{title:基础功能,description:所有用户都能看到的功能介绍,}},{// 仅VIP用户可见的步骤element:#vip-feature,popover:{title:VIP专属功能,description:这是VIP用户才能使用的功能,},// 条件判断onHighlightStarted:(){constisVipcheckUserVipStatus();if(!isVip){driverObj.moveNext();// 跳过此步骤}}}];4.4 动态步骤// 根据用户角色动态生成引导步骤functiongenerateSteps(userRole){constbaseSteps[{element:#header,popover:{title:顶部导航,description:全局导航栏}}];if(userRoleadmin){baseSteps.push({element:#admin-panel,popover:{title:管理面板,description:系统管理功能}});}if(userRoleeditor){baseSteps.push({element:#editor-tools,popover:{title:编辑工具,description:内容编辑功能}});}returnbaseSteps;}constdriverObjdriver({steps:generateSteps(currentUser.role)});4.5 编程式控制constdriverObjdriver({steps:[...]});// 启动引导driverObj.drive();// 跳转到指定步骤driverObj.drive(2);// 从第2步开始// 手动控制driverObj.moveNext();// 下一步driverObj.movePrevious();// 上一步driverObj.moveTo(3);// 跳到第3步// 高亮指定元素driverObj.highlight({element:#target,popover:{title:临时提示,description:这是一个临时高亮}});// 获取当前状态conststatedriverObj.getState();console.log(state.activeIndex);// 当前步骤索引console.log(state.isActive);// 是否激活console.log(state.previousElement);// 上一个元素// 销毁driverObj.destroy();五、实战场景5.1 首次使用引导// 检查是否首次访问consthasSeenTourlocalStorage.getItem(has-seen-tour);if(!hasSeenTour){consttourDriverdriver({steps:[{element:#welcome-banner,popover:{title:欢迎使用,description:让我们花1分钟了解主要功能,side:bottom,}},// ... 更多步骤],onDestroyed:(){localStorage.setItem(has-seen-tour,true);}});// 延迟启动等待页面渲染完成setTimeout(()tourDriver.drive(),1000);}5.2 新功能介绍// 版本更新后展示新功能constcurrentVersion2.0.0;constlastSeenVersionlocalStorage.getItem(app-version);if(lastSeenVersion!currentVersion){constnewFeatureDriverdriver({steps:[{element:#new-feature-1,popover:{title: 新功能AI助手,description:现在你可以使用AI助手自动完成重复任务,}},{element:#new-feature-2,popover:{title: 新功能暗色模式,description:支持暗色模式保护你的眼睛,}}],onDestroyed:(){localStorage.setItem(app-version,currentVersion);}});newFeatureDriver.drive();}5.3 表单填写引导constformDriverdriver({steps:[{element:#name-input,popover:{title:姓名,description:请输入你的真实姓名用于合同签署,side:right,}},{element:#email-input,popover:{title:邮箱,description:我们会向此邮箱发送确认邮件,side:right,}},{element:#submit-btn,popover:{title:提交,description:确认信息无误后点击提交,side:top,}}]});六、与其他方案对比特性Driver.jsShepherd.jsIntro.js自研包大小5KB30KB45KB不定依赖无Popper.js无不定TypeScript✅✅❌不定框架无关✅✅✅❌自定义样式✅✅✅✅学习成本低中低高维护成本低低低高七、常见问题7.1 元素不存在时如何处理constdriverObjdriver({steps:[{element:#maybe-not-exist,popover:{title:可能不存在的元素},}],// 元素不存在时自动跳过allowClose:true,onHighlightStarted:(element){if(!element){driverObj.moveNext();}}});7.2 在Modal/Dialog中使用// 先打开ModalopenModal();// 等待Modal渲染完成后再启动引导setTimeout((){constmodalDriverdriver({steps:[{element:#modal-content,popover:{title:弹窗说明,description:这是弹窗中的功能介绍,}}]});modalDriver.drive();},500);7.3 移动端适配constdriverObjdriver({steps:[...],// 移动端配置stageRadius:4,popoverOffset:10,// 响应式弹窗位置onHighlightStarted:(element,step){if(window.innerWidth768){step.popover.sidebottom;// 移动端统一在下方显示}}});结语Driver.js用8年时间证明了小而美的价值。它没有试图成为一个万能工具而是专注于把产品引导这一件事做到极致。5KB的体积、零依赖、框架无关这些特性让它成为SaaS产品、后台管理系统、表单引导等场景的首选方案。如果你正在为产品的新手引导发愁Driver.js值得一试。