layui element怎么实现步骤条组件（step横向步骤展示）-Layui教程-PHP中文网

layui未内置步骤条组件，但可通过自定义HTML结构（.layui-step容器+data-status状态属性）、layui图标及CSS实现横向步骤条，支持动态JS状态更新。

layui element怎么实现步骤条组件（step横向步骤展示）

layui 本身没有内置的“步骤条（Step）”组件，但可以通过 layui 的基础样式 + HTML 结构 + 少量自定义 CSS 快速实现横向步骤条效果。Element UI 是另一个独立的 Vue 组件库，和 layui 无关，不能直接在 layui 项目中使用 Element 的 step 组件。

用 layui 实现横向步骤条（纯 HTML + CSS + layui 图标）

核心思路：利用 layui 的 .layui-step（需手动定义）或基于 .layui-nav / .layui-tab-title 的语义化结构，配合图标（ ✔ 成功、 ● 当前、 ○ 未开始）和状态类控制视觉效果。

推荐写法（轻量、兼容 layui 2.x）：

用 <div class="layui-step"> 包裹步骤项 <li>每个步骤用 <code><div class="layui-step-item"> 表示 <li>用 <code>data-status="wait|process|finish" 控制状态，再通过 CSS 匹配
图标用 layui 字体图标（iconfont），无需额外引入

HTML 结构示例

复制即用（支持 3–5 步）：

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

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

下载

<div class="layui-step" id="demoStep">
  <div class="layui-step-item" data-status="finish">
    <i class="layui-icon">&#xe605;</i>
    <div class="layui-step-text">填写信息</div>
  </div>
  <div class="layui-step-item" data-status="process">
    <i class="layui-icon">&#xe629;</i>
    <div class="layui-step-text">验证身份</div>
  </div>
  <div class="layui-step-item" data-status="wait">
    <i class="layui-icon">&#xe62a;</i>
    <div class="layui-step-text">完成提交</div>
  </div>
</div>

配套 CSS 样式（建议加在页面 style 或全局 CSS 中）

保证横向排列、连线、间距和状态样式：

.layui-step {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 20px;
  margin: 30px 0;
}
.layui-step::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #e6e6e6;
  z-index: 1;
}
.layui-step-item {
  text-align: center;
  position: relative;
  z-index: 2;
  width: 80px;
}
.layui-step-item .layui-icon {
  display: block;
  width: 48px;
  height: 48px;
  line-height: 48px;
  margin: 0 auto 10px;
  font-size: 20px;
  border-radius: 50%;
  color: #fff;
}
.layui-step-item[data-status="finish"] .layui-icon {
  background-color: #5FB878;
}
.layui-step-item[data-status="process"] .layui-icon {
  background-color: #1E9FFF;
}
.layui-step-item[data-status="wait"] .layui-icon {
  background-color: #eee;
  color: #999;
}
.layui-step-text {
  font-size: 14px;
  color: #666;
}
.layui-step-item[data-status="finish"] .layui-step-text,
.layui-step-item[data-status="process"] .layui-step-text {
  color: #333;
}

动态更新步骤状态（JS 控制）

例如用户点击“下一步”，调用函数切换状态：

function updateStep(index) {
  var items = document.querySelectorAll('.layui-step-item');
  items.forEach((item, i) => {
    item.setAttribute('data-status', 
      i < index ? 'finish' : 
      i === index ? 'process' : 'wait'
    );
  });
}
// 示例：跳到第 2 步（索引从 0 开始）
updateStep(1); // → 填写信息(finish)、验证身份(process)、完成提交(wait)

不复杂但容易忽略：确保图标字体正常加载（layui 2.8+ 默认已内置），且容器有足够宽度避免换行；移动端建议加 @media 适配为垂直堆叠（可选）。