layui进度条(layui进度条自定义显示内容)

在开发项目时，我们常常需要使用layui的进度条来展示任务完成度等信息。然而默认的进度条样式和内容显示可能无法满足需求。为了解决这个问题，我们可以通过修改layui的源代码或者使用layui提供的配置项来自定义进度条的显示内容。

1. 使用layui内置属性实现

layui本身提供了一些简单的属性可以对进度条进行初步定制，例如percent（设置百分比）、lay-filter（用于绑定事件）。但是这些还远远不够，如果想要更加复杂的内容显示，就需要进一步操作。

html</p>

<div id="progressBar" class="layui-progress layui-progress-big">
  <div class="layui-progress-bar"></div>
</div>


  var percent = 50; // 假设当前进度为50%
  document.querySelector('.layui-progress-bar').setAttribute('lay-percent', percent + '%');
  document.querySelector('.layui-progress-bar').innerHTML = "已完成：" + percent + "%";


<p>

以上代码实现了简单的自定义内容显示，但仅限于文本替换，并没有涉及到更复杂的样式或结构调整。

2. 深度自定义 - 修改dom结构

如果我们想要更深度地自定义进度条内部的内容，比如添加图标、改变字体颜色等，则需要直接操作DOM元素。

html</p>

<div id="progressBar" class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" style="width: 50%">
    <i class="layui-icon layui-icon-ok" style="color:green"></i>
    <span style="color:red">已完成：50%</span>
  </div>
</div>

<p>

这种方式虽然能够达到很好的效果，但是会破坏layui原有的样式一致性，并且当layui版本更新时可能会出现问题。

3. 利用css与js结合实现高级效果

为了既保持layui原有风格又实现自定义内容显示，我们可以采用CSS与JS相结合的方法。

定义好基本结构：

html</p>

<div id="progressBar" class="layui-progress layui-progress-big">
  <div class="layui-progress-bar" id="bar">
  </div>
</div>

<p>

然后通过JavaScript动态设置进度值并插入自定义内容：

javascript
function updateProgress(percent) {
  var bar = document.getElementById('bar');
  bar.setAttribute('lay-percent', percent + '%');
  bar.style.width = percent + '%';</p>

<p>if (percent >= 80) {
    bar.innerHTML = '<i class="layui-icon layui-icon-ok" style="color:green"></i>' +
                    '<span style="color:green">已完成：' + percent + '%</span>';
  } else if (percent < 80 && percent > 20) {
    bar.innerHTML = '<i class="layui-icon layui-icon-loading-1" style="color:orange"></i>' +
                    '<span style="color:orange">进行中：' + percent + '%</span>';
  } else {
    bar.innerHTML = '<i class="layui-icon layui-icon-refresh-3" style="color:red"></i>' +
                    '<span style="color:red">开始：' + percent + '%</span>';
  }
}

最后再根据实际业务逻辑调用updateProgress()函数更新进度条状态。这样既能保证layui组件的基本特性，又能灵活地自定义进度条内部的内容显示。

// 来源：https://www.nzw6.com