LayUI 本身不内置页面引导功能，也没提供类似 intro.js 的 step-by-step 高亮遮罩能力；想在 LayUI 项目里实现「Intro.js 效果」的引导组件，必须手动集成 intro.js，不能靠 LayUI 原生模块封装出来。
直接说结论：LayUI 本身不内置页面引导功能，也没提供类似 intro.js 的 step-by-step 高亮遮罩能力；想在 LayUI 项目里实现「Intro.js 效果」的引导组件，必须手动集成 intro.js，不能靠 LayUI 原生模块封装出来。
为什么 LayUI 无法原生封装 intro.js 效果
LayUI 的核心是轻量级 UI 组件（表单、弹层、表格等），所有 DOM 操作和定位都基于自身渲染逻辑，而 intro.js 的关键能力——全屏遮罩 + 元素高亮 + 自动定位 tooltip + 步骤导航 —— 依赖对目标元素的 getBoundingClientRect() 计算、position: fixed 层叠、以及脱离 LayUI 渲染上下文的独立 DOM 插入。LayUI 的 layer 弹层不支持“只遮罩不遮挡高亮元素”，tooltip 也不支持绑定到任意 DOM 节点并自动避让。
强行用 layer.open({type: 1}) 模拟，会遇到这些硬伤：
- 无法精准高亮指定元素（layer 弹层只能覆盖，不能挖空）
- 无法跟随滚动自动重定位（layer 不监听 scroll/resize）
- 无法禁用背景交互的同时允许点击高亮区内的按钮（
disableInteraction: false场景下 layer 无对应开关） - 步骤切换需手动维护状态，没有
next()/exit()等生命周期钩子
正确做法：在 LayUI 项目中接入 intro.js
不是“封装 LayUI 组件”，而是“让 intro.js 和 LayUI 共存”。关键就三点：
-
样式隔离：引入
intro.js/introjs.css后，用 CSS 覆盖默认主题，避免和 LayUI 的.layui-btn、.layui-form-item冲突，例如重设.introjs-tooltip的字体、边框、阴影 -
DOM 兼容：确保要引导的元素有稳定 selector（如
id="guide-menu"或class="layui-nav-item"），避开 LayUI 动态生成的临时 class（如layui-this可能随激活变化） -
生命周期对齐：在 LayUI
layui.use(['element', 'layer'], ...)回调内初始化introJs()，不要在$(document).ready里调，否则可能因 LayUI 异步渲染导致元素未挂载
示例代码片段：
layui.use(['element', 'layer'], function () {
const element = layui.element;
const layer = layui.layer;
// 确保 LayUI 渲染完成后再启动引导
setTimeout(() => {
const intro = introJs();
intro.setOptions({
steps: [
{ element: '#guide-menu', title: '左侧菜单', intro: '点击进入不同功能模块' },
{ element: '.layui-form-item:eq(0)', title: '表单输入', intro: '这里填写您的基本信息' }
],
exitOnOverlayClick: false,
disableInteraction: true, // 关键：禁用背景交互，但高亮区仍可点击
overlayOpacity: 0.65,
highlightClass: 'layui-bg-blue' // 复用 LayUI 的背景类，保持视觉统一
}).start();
}, 300);
});
如何复用引导逻辑（伪“封装”）
所谓“通用组件”，实际是抽离配置和触发逻辑，而非写一个 LayUI define 模块：
- 把
steps数组单独拆成 JSON 文件或 JS 对象，按页面路径组织（如guide/home.js、guide/form.js） - 封装一个启动函数，接收 pageKey 和可选参数：
startGuide('home', { skipLabel: '跳过引导' }) - 用
localStorage记录用户是否已看过某页引导，避免重复触发：if (!localStorage.getItem('guide_home_shown')) { startGuide('home'); localStorage.setItem('guide_home_shown', '1'); } - 按钮触发时，别用
layer.btn，直接绑onclick="startGuide('form')"—— Layer 的按钮会干扰 intro.js 的事件捕获
最易被忽略的一点：LayUI 表单控件（如 select、checkbox）常被包裹在 layui-form 容器内，其真实 DOM 结构和你写的 HTML 不一致。intro.js 的 element 必须指向最终渲染出的节点，建议用浏览器调试器复制「实际高亮目标」的 selector，而不是抄源码里的 class 名。
