1.0.0 • Published 2 years ago
lui-steps v1.0.0
步骤进度条
兼容
ie 10+
使用
<link rel="stylesheet" href="./step.css" />
<script src="./step.js"></script>
// init
let steps = new Step({
value: 0, // 进度值
dom: document.getElementById('dom'), // render dom
steps: ['打包卷宗', '卷宗推送', '等待第三方系统接口响应', '归档成功'], // list参数
});
// 赋值
steps.setValue(0);
demo
<!--
* @createDate: 2022-05-05 09:52:48
* @Author: zclee
* @LastEditTime: 2022-05-05 10:22:11
* @LastEditors: zclee
* @FilePath: \webpack\l-ui\cdn demo\index.html
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="./step.css" />
</head>
<style>
html,
body {
height: 100%;
margin: 0;
color: #909395;
}
</style>
<body>
<div id="dom"></div>
<div id="btns"></div>
<script src="./step.js"></script>
<script>
var steps = new Step({
value: 0, // 进度值
dom: document.getElementById('dom'), // render dom
steps: ['打包卷宗', '卷宗推送', '等待第三方系统接口响应', '归档成功'], // list参数
});
var btns = document.getElementById('btns');
function addbtn(text, event) {
var btn = document.createElement('button');
btn.innerHTML = text;
btn.onclick = event.bind(btn);
btns.appendChild(btn);
}
addbtn('init', function () {
steps.setValue(0);
});
addbtn('+20', function () {
steps.setValue(steps.value + 20);
});
addbtn('start - 0', function startTimer() {
steps.setValue(0);
var timer = setInterval(function () {
var value = steps.value + 1;
steps.setValue(value);
this.innerHTML = 'start - ' + value;
if (steps.value >= 100) {
clearInterval(timer);
timer = null;
}
}, 100);
});
</script>
</body>
</html>
1.0.0
2 years ago