Layui 官方无 guide 模块，所谓步骤指引均为开发者基于其样式自定义实现；可用 element 模块辅助、复用社区 steps 扩展或纯 HTML+CSS 实现，推荐轻量手写方案以保障稳定性和可维护性。Layui 本身没有内置名为
guide 的“步骤指引”模块，官方文档和源码中也不存在 layui.guide 或类似 API。所谓“基于 Layui 样式的步骤指引”，实际是开发者用原生 HTML + CSS（复用 Layui 的 class）+ 少量 JS 自行实现的 UI 效果，不是 Layui 官方提供的功能模块。
你看到的“步骤条”效果，基本都来自社区自定义方案，比如用 steps 扩展模块（非官方）、或直接手写结构套用 layui-step 类（Layui 2.6+ 中未定义该类，属误传/自定义命名）。
下面分几个真实可落地的点说明怎么做：
用 layui.element 模块渲染带状态的步骤容器
layui 的 element 模块支持进度条、标签页、折叠面板等，但不直接支持步骤条。你可以借用其样式规范，手动构造结构：
- 使用
layui-progress搭配文字节点模拟“已完成”进度，但仅适合线性、无交互的静态展示 - 用
layui-nav或layui-tab改造成步骤导航：给每个 tab 项加序号和状态 class，如layui-this表示当前步 - 关键点：Layui 的 CSS 并未导出
.layui-step或.layui-step-item，所有步骤类名需自行定义并复用其颜色变量（如color: #16b777）
复用社区 steps 扩展模块时的加载陷阱
很多博客提到的 steps.render() 是第三方封装模块（如 CSDN 示例中的 steps.js），不是 Layui 内置。它依赖 layui.config({ base: '...' }) 指向自定义模块路径，极易出错：
- 必须确保
steps.js文件放在配置的base目录下，且导出符合 Layui 模块规范（layui.define(...)） -
layui.use('steps', callback)中的'steps'是模块名，不是文件名；若文件叫my-steps.js，模块名仍需在文件内通过layui.define(['jquery'], function(exports){...})显式声明 - 常见报错
Cannot find module "steps"，90% 是路径没对齐，或忘记在steps.js里调用exports('steps', ...)
用纯 HTML + layui 样式类实现轻量步骤条
不需要任何 JS 模块，几行代码就能做出兼容性好、易维护的步骤条：
<div class="layui-step"> <div class="layui-step-item layui-step-finish"><span>1</span><em>填写信息</em></div> <div class="layui-step-item layui-step-current"><span>2</span><em>确认订单</em></div> <div class="layui-step-item"><span>3</span><em>支付完成</em></div> </div>
然后补一段 CSS（复用 Layui 颜色和间距）：
-
.layui-step用display: flex+justify-content: space-between -
.layui-step-item span用background: #16b777、color: #fff，.layui-step-finish span加border: 2px solid #16b777 - 箭头用伪元素
::after画，宽度固定，避免响应式错位
切换状态只需 JS 切换 class：el.classList.remove('layui-step-current'); el.classList.add('layui-step-finish');
为什么不要强行绑定 layer.tips 做步骤指引
有人试图用 layer.tips() 在每一步弹出说明，这会破坏流程连贯性：
-
layer.tips是悬浮提示，生命周期短（默认 3 秒），不适合引导用户完成多步操作 - 无法与表单校验、按钮点击等事件自然衔接；关闭后状态难同步
- 移动端 touch 事件支持弱，
mouseover失效，click又容易误触 - 真正需要的是“步骤容器 + 内容区显隐 + 状态标记”，不是浮层
ol 或 nav 包裹，否则无障碍访问和 SEO 会出问题。 
