# stepprogress

**Repository Path**: honestno1/stepprogress

## Basic Information

- **Project Name**: stepprogress
- **Description**: 基于layui实现的步骤进度条
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 4
- **Created**: 2023-08-21
- **Last Updated**: 2025-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: progreess, STEP, 进度条, layui, layui组件

## README

# stepprogress

## 介绍
基于layui实现的简单步骤进度条，提供api操作进度步骤进度条前进、后退、移动到指定位置等。


## 例子截图
![输入图片说明](sample.png)

## 安装教程
下载stepprogress目录及目录内的js、css文件，放在web工程的js相关文件static目录即可。

## 示例代码
下面是对应 例子截图 的代码。详细请参考sample文件。
```
layui.config({
    base:'./stepprogress/'
}).use(['stepprogress', 'layer'], function(){
	var stepprogress = layui.stepprogress;
	var $ = layui.$;
	var layer = layui.layer;
	
	renderStepProgress();
	
	// 绑定进度变化事件
	stepprogress.on('change(stepProgressBar)', function(options){
		console.log(options);
	});
	
	// 渲染步骤进度条
	function renderStepProgress() {
		let stepItems = [{
			title: '开始',
			code: '01'
		},{
			title: '做成基础数据',
			code: '02'
		},{
			title: '手工调整',
			code: '03'
		},{
			title: '生成报表',
			code: '90'
		}];
		stepprogress.render({
			elem: '#stepProgressBar',
			stepItems: stepItems,
			position: 0
		});
	}
});

```
## API

| API                                    | 描述                   |
| -------------------------------------- | ---------------------- |
| var stepprogress = layui.stepprogress; | 获得 stepprogress 模块 |
| stepprogress.render(options)           | 渲染进度条             |
| stepprogress.reload(id, options)       | 进度条重载             |
| stepprogress.next(id)                  | 下一步                 |
| stepprogress.pre(id)                   | 上一步                 |
| stepprogress.getPosition(id)           | 取得当前位置           |
| stepprogress.getOptions(id)            | 取得实例的options      |
| stepprogress.getCurrentStepItem(id)    | 取得当前stepItem对象   |

### 渲染
stepprogress.render(options);

- 参数 options : 基础属性配置项。#详见属性

### 属性
<table border="1" cellspacing="0" cellpadding="0">
    <thead>
        <th>属性</th><th>描述</th><th>类型</th><th>默认值</th>
    </thead>
    <tbody>
        <tr>
            <td>elem</td>
            <td>绑定元素选择器或 DOM 对象</td>
            <td>string/DOM</td>
			<td>-</td>
        </tr>
        <tr>
            <td>width</td>
            <td>宽度，百分比或999px</td>
            <td>string</td>
            <td>100%</td>
        </tr>
        <tr>
            <td>position</td>
            <td>初始化位置，位置从0开始</td>
            <td>number</td>
            <td>0</td>
        </tr>
	</tbody>
</table>

## 事件
stepprogress.on('event(filter)', callback);
- 参数 event(filter) 是事件的特定结构。 event 为事件名，支持的事件见下表。filter 为元素属性 lay-filter 对应的值。
- 参数 callback 为事件执行时的回调函数，参数为render时指定的基础属性options。

| event  | 描述           |
| ------ | -------------- |
| change | 位置移动时触发 |

## 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request