Layui 2.8版本中如何利用内置组件库实现简单的步骤条（Steps）-Layui教程-PHP中文网

layui 2.8 官方未提供 steps 组件，layui.step 不存在且调用会报错；可用 layui.tree 模拟或纯 html+css 实现步骤条，扩展模块兼容性差、风险高。

layui 2.8 官方并未提供原生 steps 组件，所谓“步骤条”是社区扩展模块（如第三方 step.js）或基于 layui.tree、layui.carousel 等模块自行拼装的方案；直接调用 layui.step 会报 cannot read property 'render' of undefined。

为什么 `layui.step` 不存在且不生效

Layui 2.8 的核心模块列表中没有 step：官方文档和源码均未声明该模块。你在 HTML 中写 <div id="steps"></div> 并在 JS 里调用 layui.step.render，控制台会立刻抛出 TypeError——这不是配置问题，而是模块根本没注册。

常见错误现象包括：

页面空白，无任何报错（因 layui.use(['step']) 失败后静默跳过）
layui.step 为 undefined，调用 .render() 报错
误以为是路径问题，反复检查 layui.config({ extend: { step: '...' } })，但扩展模块未被正确加载或未实现标准模块接口

用 `layui.tree` 模拟步骤条的实操方式

虽然没 steps，但 layui.tree 支持自定义节点图标、状态标记与点击反馈，适合改造成线性步骤条。关键点在于禁用折叠、隐藏箭头、用 CSS 控制连线与高亮。

实操建议：

设置 showCheckbox: false、accordion: true、click: function(obj){ /* 切换当前步骤 */ }
数据结构用平铺数组，每个节点 title 对应步骤名，id 作为步骤索引，加 spread: true 默认展开全部
通过 elem.find('.layui-tree-txt') 手动添加 layui-this 类控制当前步样式
连线需额外 CSS：给 .layui-tree-item:not(:last-child)::after 加垂直线伪元素
避免用 children 嵌套，否则会触发默认树形缩进逻辑，破坏线性布局

更轻量的纯 HTML + CSS 替代方案

如果你只需要静态展示或简单交互（比如只读、不可点击），完全没必要引入 JS 模块。Layui 的 CSS 已提供足够语义化的类名支持。

示例结构：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

<div class="layui-steps">
  <div class="layui-step-item layui-this">
    <div class="layui-step-num">1</div>
    <div class="layui-step-title">填写信息</div>
  </div>
  <div class="layui-step-item">
    <div class="layui-step-num">2</div>
    <div class="layui-step-title">确认订单</div>
  </div>
  <div class="layui-step-item">
    <div class="layui-step-num">3</div>
    <div class="layui-step-title">支付完成</div>
  </div>
</div>

配套 CSS（可直接加在 <style></style> 或自定义 CSS 文件中）：

.layui-steps { display: flex; justify-content: space-between; position: relative; }
.layui-steps::before { content: ''; position: absolute; top: 16px; left: 0; right: 0; height: 2px; background: #e6e6e6; z-index: 1; }
.layui-step-item { text-align: center; position: relative; z-index: 2; }
.layui-step-num { width: 32px; height: 32px; line-height: 32px; border-radius: 50%; background: #e6e6e6; color: #666; font-size: 14px; margin: 0 auto 8px; }
.layui-step-title { font-size: 14px; color: #666; }
.layui-step-item.layui-this .layui-step-num { background: #16baaa; color: #fff; }
.layui-step-item.layui-this .layui-step-title { color: #333; font-weight: bold; }

切换步骤只需 JS 操作 class：$('.layui-step-item').removeClass('layui-this'); $('.layui-step-item').eq(1).addClass('layui-this');

如果坚持要用扩展模块，注意三个致命坑

部分项目确实集成了社区版 step 模块（如你知识库中提到的 step.js），但它不是 Layui 官方维护，兼容性和稳定性无保障。

容易踩的坑：

layui.config({ extend: { step: '/path/to/step' } }) 中路径必须以 / 开头或为相对路径，不能是 CDN URL（Layui 不支持远程模块加载）
step.js 依赖 jquery，但 Layui 2.8 默认不暴露全局 $，需确保 layui.define(['jquery'], ...) 正确包裹，且 jQuery 在 layui.js 前已加载
模块内部若使用了 Layui 2.7 的旧 API（如 layui.jquery 而非 layui.$），在 2.8 下会失效