driver.js仅负责前端引导，不处理后端用户创建；新用户引导核心是localstorage检测首次访问并触发分步高亮，需在dom就绪后（如mounted钩子）初始化，element必须为有效css选择器，避免因元素隐藏或未挂载导致失焦。
Driver.js 本身不支持“创建新用户”这类后端操作，它只负责前端 UI 引导高亮和步骤控制；所谓“新用户引导”，实际是前端判断用户是否首次访问（比如通过 localStorage 标记），再触发 Driver.js 的分步高亮。
如何用 driver.js 初始化并启动首次访问引导
关键不是“创建用户”，而是“检测首次访问 + 启动引导”。常见做法是页面加载时检查 localStorage.getItem('hasSeenIntro')，为 null 时启动引导，并在最后一步完成后设为 'true'。
- 必须在 DOM 完全就绪后初始化
driver实例，否则元素找不到会静默失败 - 推荐在
window.addEventListener('DOMContentLoaded', ...)或 Vue/React 的 mounted 钩子中调用 - 不要在
document.write或内联 script 中直接 new Driver()，容易因执行时机过早而找不到目标元素
怎么写正确的 defineSteps() 高亮配置
每个步骤的 element 必须是有效的 CSS 选择器字符串或 DOM 节点；popover 中的 title 和 description 支持 HTML，但需注意 XSS（若内容来自用户输入，务必转义）。
-
element值如'#signup-btn'、'.nav-link[data-step="2"]'，不能写成document.querySelector(...)直接传节点（旧版 driver 允许，v1+ 要求字符串） - 如果高亮区域偏移异常，优先检查目标元素是否设置了
position: fixed或transform，driver 默认用getBoundingClientRect()，可能受其影响 - 步骤间跳转依赖
nextBtnText/prevBtnText配置，不设则默认显示英文，中文项目建议显式指定
const driver = new Driver();
driver.defineSteps([
{
element: '#email-input',
popover: {
title: '输入邮箱',
description: '请输入常用邮箱，用于登录和找回密码',
position: 'right'
}
},
{
element: '#password-input',
popover: {
title: '设置密码',
description: '至少 8 位，含大小写字母和数字',
position: 'bottom'
}
}
]);
为什么点击下一步没反应？常见阻塞点
Driver.js 的 moveNext() 不会自动滚动到下一个元素，也不会校验当前步骤元素是否可见——如果目标元素被 display: none、visibility: hidden 或父级 overflow: hidden 截断，高亮框会出现在错误位置甚至消失，但控制台通常不报错。
- 用浏览器 DevTools 检查目标元素 computed styles，确认
display、visibility、opacity均有效 - Modal 或 Tab 切换类组件中，确保引导步骤在对应 tab 显示后再定义，避免提前绑定不可见元素
- React/Vue 中动态渲染的按钮（如异步加载后的
#submit-btn），需等组件真正挂载、元素真实存在后再调用driver.start()
如何让引导适配暗色模式或响应式布局
Driver.js 默认样式基于浅色背景，.driver-popover 类可覆盖，但要注意：CSS 变量（如 --driver-color-primary）仅在 v1.0+ 支持，老版本需直接覆写 class 规则。
- 响应式问题多出在
position: 'auto'行为不稳定，建议对小屏设备显式设为'bottom'或'top' - 暗色模式下，popover 文字颜色可能看不清，加 CSS：
.driver-popover { --driver-color-text: #e2e8f0; --driver-color-primary: #6366f1; } - 移动端触摸事件默认启用，但若页面有
touch-action: none的容器（如地图组件），需临时移除，否则无法点击下一步按钮
真正难的不是写几步高亮，而是让每一步都稳稳落在用户眼睛该看的地方——DOM 是否就绪、样式是否冲突、设备是否适配，这些细节不验证，引导就会在某个步骤突然“失焦”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
