灵感来源于个网站，感谢个位大佬写的layui步骤条(分步表单)的教学(2024.2.3 15:58)
这里纯属个人理解，如有不足，请各位前端大佬进行评论批评(我是后端小白) 谅解一下！！！
一、模板
1、预览图
首先导入扩展 js和css 文件(可以直接引用官网里面的js，或者本地)
资源位置：【免费】step步骤表单(分步表单测试测试测试)资源-文库
后续如有需要，具体资源评论或者私信
2、layui-card-body
<div class="layui-card-body" id = "layui-card-body" style="padding-top: 40px; width: 100%; display: flex;height:auto">
<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="flex-grow: 1;" >
<div carousel-item style="">
<div class="m-10" id="step1-content"
style="margin-left: 5.6%;background:white">
<div style="margin-top: 2%;">
<p class="m-20" style="">aaaaaa</p>
<p class="m-20-p">bbbbbbbbbbb</p>
<p class="m-20" style="margin-top: 1.5%;">ccccc</p>
<p class="m-20-p">dddddddddddddd</p>
<ul style="margin-left: 20px">
<li>dddddddddddddd</li>
<li>dddddddddddddddddddddddddddd</li>
<li>dddddddddddddddddddddddddddd</li>
<li>dddddddddddddddddddddddddddd</li>
<li>dddddddddddddd</li>
<li>dddddddddddddddddddddddddddd</li>
<li>dddddddddddddd</li>
<li>dddddddddddddddddddddddddddd</li>
</ul>
<form class="layui-form" style="margin: 0 auto;width: 30%;padding-top: 40px;">
<div class="layui-form-item">
<div class="layui-input-block" style="margin-left: -14.4%;">
<button class="layui-btn" id="layui-btn-nextOne" lay-submit lay-filter="formStep"
style=";width: 35%;background-color: #155ede;border-radius: 4px">
ccc
</button>
<button class="layui-btn" lay-filter="formStep" onclick="printPage()"
style="margin-left: 3.5%;width: 35%;border-radius: 4px">
eee
</button>
</div>
</div>
</form>
</div>
</div>
<div class="m-10" id="step2-content"
style="margin-left: 5.6%;background:white">
</div>
<div class="m-10" id="step3-content"
style="margin-left: 5.6%;background:white">
</div>
<div class="m-10" id="step4-content"
style="margin-left: 5.6%;background:white">
</div>
</div>
</div>
</div>- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
3、步骤条配置
layui.config({
base: './step-lay/'
}).use(['form', 'step'], function () {
var $ = layui.$,
form = layui.form,
step = layui.step;
// 获取 URL 参数中的当前步骤索引值
var urlParams = new URLSearchParams(window.location.search);
var currentStep = parseInt(urlParams.get('step')) || 0;
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%',
stepWidth: '750px',
height: '500px',
stepItems: [
{title: '阅读须知'},
{title: '填写信息'},
{title: '上传材料'},
{title: '结果领取'},
{title: '申请成功'}
],
// 设置当前步骤
step: currentStep,
// 监听步骤切换事件
stepChange: function (currentStepIndex) {
// 更新 URL 参数中的当前步骤索引值
updateUrlParams(currentStepIndex);
}
});
form.on('submit(formStep)', function (data) {
step.next('#stepForm');
return false;
});
form.on('submit(formStep2)', function (data) {
step.next('#stepForm');
return false;
});
$('.pre').click(function () {
step.pre('#stepForm');
});
$('.next').click(function () {
step.next('#stepForm');
});
// 更新 URL 参数中的当前步骤索引值
function updateUrlParams(currentStepIndex) {
var url = new URL(window.location.href);
url.searchParams.set('step', currentStepIndex.toString());
var newUrl = url.toString();
window.history.replaceState({path: newUrl}, '', newUrl);
}
});- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
二、发现问题
1、颜色大小问题
因为一开始他自带的step颜色是绿色的，于是进行修改(这里只粘贴了具体有关的)
.step-item-head {
/*边框背景 颜色 和字体颜色,大小等*/
position: relative;
display: inline-block;
height: 28px;
width: 28px;
text-align: center;
vertical-align: top;
color: #999999;
border: 1px solid #999999;
border-radius: 50%;
background: #ffffff;
}
.step-item-head.step-item-head-active,
.step-item-head.step-item-head-done {
/*修改背景颜色*/
background: #1D84FF;
color: #ffffff;
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
2、上一步，下一步
因为是分布表单嘛，于是又添加了上一步，下一步。于是又写了一个step.js 文件
layui.define(['layer', 'carousel'], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var carousel = layui.carousel;
// 添加步骤条dom节点
var renderDom = function (elem, stepItems, postion) {
var stepDiv = '<div class="lay-step">';
for (var i = 0; i < stepItems.length; i++) {
stepDiv += '<div class="step-item">';
// 线
if (i < (stepItems.length - 1)) {
if (i < postion) {
stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
} else {
stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
}
}
// 数字
var number = stepItems[i].number;
if (!number) {
number = i + 1;
}
if (i == postion) {
stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
} else if (i < postion) {
stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
} else {
stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
}
// 标题和描述
var title = stepItems[i].title;
var desc = stepItems[i].desc;
if (title || desc) {
stepDiv += '<div class="step-item-main">';
if (title) {
stepDiv += '<div class="step-item-main-title">' + title + '</div>';
}
if (desc) {
stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
}
stepDiv += '</div>';
}
stepDiv += '</div>';
}
stepDiv += '</div>';
$(elem).prepend(stepDiv);
// 计算每一个条目的宽度
var bfb = 100 / stepItems.length;
$('.step-item').css('width', bfb + '%');
};
var step = {
// 渲染步骤条
render: function (param) {
param.indicator = 'none'; // 不显示指示器
param.arrow = 'always'; // 始终显示箭头
param.autoplay = false; // 关闭自动播放
if (!param.stepWidth) {
param.stepWidth = '400px';
}
// 渲染轮播图
carousel.render(param);
// 渲染步骤条
var stepItems = param.stepItems;
renderDom(param.elem, stepItems, 0);
$('.lay-step').css('width', param.stepWidth);
//监听轮播切换事件
carousel.on('change(' + param.filter + ')', function (obj) {
$(param.elem).find('.lay-step').remove();
renderDom(param.elem, stepItems, obj.index);
$('.lay-step').css('width', param.stepWidth);
});
// 隐藏左右箭头按钮
$(param.elem).find('.layui-carousel-arrow').css('display', 'none');
// 去掉轮播图的背景颜色
$(param.elem).css('background-color', 'transparent');
},
//下一步
next: function (elem) {
var currentIndex = $(elem).find('.layui-carousel-ind ul li.layui-this').index();
$(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
$(elem).find('.step-item-head').eq(currentIndex).addClass('step-item-head-done');
},
//上一步
pre: function (elem) {
var currentIndex = $(elem).find('.layui-carousel-ind ul li.layui-this').index();
$(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
$(elem).find('.step-item-head').eq(currentIndex).removeClass('step-item-head-done');
}
};
layui.link('../step/step-lay/step.css');
exports('step', step);
});- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
3、高度问题
3种方法
1、height：500px 固定step组件的高度，缺点：内容不能自适应
1、height：100% 固定父div的高度 缺点：内容不能自适应
3、动态修改里面的高度(方法并不是很好，目前还没有想到其他的方法)
在这配置里面我必须要配置高度500px 但是如果不配置 容器是不显示高度的
于是我尝试把高度改为100%，显示高度的前提是父div必须要有固定高度或者百分比。于是我就想在父类div并没有设置高度的情况下去动态的根据里面的内容来调整高度。(有些方法可能会冗余了，谅解。2024.2.5 15:31 距离放年假还有一天半)
1、这段代码首先移除之前设置的固定高度，然后获取实际内容的高度，并将父容器和步骤内容的高度设置为实际内容的高度。这样就可以根据实际内容的高度来动态调整步骤的高度。
var stepIndex = -1;
var currentStep = 0 ;
layui.config({
base: './step-lay/'
}).use(['form', 'step', 'jquery'], function() {
var $ = layui.jquery,
form = layui.form,
step = layui.step;
// 获取 URL 参数中的当前步骤索引值
var urlParams = new URLSearchParams(window.location.search);
currentStep = parseInt(urlParams.get('step')) || 0;
step.render({
elem: '#stepForm',
filter: 'stepForm',
width: '100%',
stepWidth: '92%',
height: '100%',
stepItems: [
{ title: '阅读须知', id: 'step1' },
{ title: '填写信息', id: 'step2' },
{ title: '上传材料', id: 'step3' },
{ title: '结果领取', id: 'step4' },
{ title: '申请成功', id: 'step5' }
],
// 设置当前步骤
step: currentStep
});
form.on('submit(formStep)', function(data) {
// step.goStep(2);
stepIndex++; // 先更新步骤索引值
step.next('#stepForm'); // 切换到下一步
adjustStepHeight(stepIndex); // 调整下一个步骤的高度
return false;
});
$('.pre').click(function() {
stepIndex--; // 先更新步骤索引值
step.pre('#stepForm'); // 切换到上一步
adjustStepHeight(stepIndex); // 调整上一个步骤的高度
});
// // 页面加载完成时调整步骤条高度
$(document).ready(function() {
stepIndex++;
adjustStepHeight(stepIndex);
});
});
function adjustStepHeight(stepIndex) {
stepIndex++;
console.log(stepIndex);
var parentContainer = document.getElementById('carousel-item');
var stepContent = document.getElementById('step' + stepIndex + '-content');
// 移除之前设置的固定高度
parentContainer.style.height = 'auto';
stepContent.style.height = 'auto';
// 获取实际内容的高度
var stepContentHeight = stepContent.scrollHeight;
// 设置父容器和步骤内容的高度为实际内容的高度
parentContainer.style.height = stepContentHeight + 'px';
stepContent.style.height = stepContentHeight + 'px';
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
2、调用方法：比如说我点击收缩图片的时候,直接调用adjustStepHeight 就能实现动态修改高度的问题。
//展开和收缩
function toggleContent(divId, toggleImage) {
var contentDiv = document.getElementById(divId);
if (contentDiv.style.display === 'none') {
contentDiv.style.display = 'block';
toggleImage.src = '../image/收缩.png';
} else {
contentDiv.style.display = 'none';
toggleImage.src = '../image/展开.png';
}
adjustStepHeight(stepIndex);
}- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
3、存在问题：他会弹出一个警告 (可能是影响性能，但是无伤大雅)
4、刷新问题
刷新之后他会直接跳转step1-content(2024.2.7 11:18)
一。这里存在问题可以直接查看出现问题二
1、于是我尝试本次存储 (分别在上一步，下一步，初始化添加存，取)
var stepIndex = -1;
var currentStep = 0 ;
layui.config({
base: './step-lay/'
}).use(['form', 'step', 'jquery'], function() {
var $ = layui.jquery,
form = layui.form,
step = layui.step;
// 获取 URL 参数中的当前步骤索引值
var urlParams = new URLSearchParams(window.location.search);
currentStep = parseInt(urlParams.get('step')) || 0;
// 从本地存储中获取之前保存的步骤索引值
var storedStepIndex = localStorage.getItem('currentStepIndex');
if (storedStepIndex !== null) {
stepIndex = parseInt(storedStepIndex);
currentStep = stepIndex; // 更新当前步骤索引值
}
var elem = '#stepForm';
step.render({
elem: elem,
filter: 'stepForm',
width: '100%',
stepWidth: '92%',
height: '100%',
stepItems: [
{ title: '阅读须知', id: 'step1' },
{ title: '填写信息', id: 'step2' },
{ title: '上传材料', id: 'step3' },
{ title: '结果领取', id: 'step4' },
{ title: '申请成功', id: 'step5' }
],
// 设置当前步骤
step: currentStep
});
form.on('submit(formStep)', function() {
stepIndex++; // 先更新步骤索引值
step.next('#stepForm'); // 切换到下一步
adjustStepHeight(stepIndex); // 调整下一个步骤的高度
// 保存当前步骤索引值到本地存储
localStorage.setItem('currentStepIndex', stepIndex);
return false;
});
$('.pre').click(function() {
stepIndex--; // 先更新步骤索引值
step.pre('#stepForm'); // 切换到上一步
adjustStepHeight(stepIndex); // 调整上一个步骤的高度
localStorage.setItem('currentStepIndex', stepIndex);
});
// // 页面加载完成时调整步骤条高度
$(document).ready(function() {
if (currentStep === 0) {
stepIndex++;
} else {
stepIndex = currentStep;
}
// 触发相应的事件，跳转到指定的步骤
if (currentStep > 0) {
stepIndex = currentStep;
step.goToStep(elem, 1);
}
adjustStepHeight(stepIndex);
});
});- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
2、step.js 添加 goToStep()方法
// 跳转到指定步骤
goToStep: function (elem, index) {
var currentIndex = $(elem).find('.layui-carousel-ind ul li.layui-this').index();
var stepCount = $(elem).find('.layui-carousel-ind ul li').length;
if (index < 0 || index >= stepCount) {
// 超出步骤范围，不执行跳转
return;
}
if (index > currentIndex) {
// 跳转到后续步骤
var diff = index - currentIndex;
for (var i = 0; i < diff; i++) {
$(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
}
} else if (index < currentIndex) {
// 跳转到前面步骤
var diff = currentIndex - index;
for (var i = 0; i < diff; i++) {
$(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
}
}
// 更新步骤头部样式
$(elem).find('.step-item-head').removeClass('step-item-head-done');
$(elem).find('.step-item-head').eq(index).addClass('step-item-head-done');
},- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
二、存在问题
这里面比如他在step3 上，内容是不显示的，我不知道是我代码的bug,还是这个框架的问题(后续如解决会更新！) 求求求，解决方法
三、个人总结
从23.12.2-3号吧，从那时候就一直弄这个分步表单，差不多弄了两个月，出现了很多问题，这里面layui框架step组件好像是不存在自适应高度的，给大家一起避避坑(存在的主要问题还是1、摸鱼(嘿嘿，不能怪我，太无聊了)2、存在问题不知道找谁去问，不熟悉代码，喜欢套框架，拿来直接能用。跟最开始element-ui 一样。后续会深入了解代码)后期的话我想弄一个群，大家可以一起分享问题和解决问题(主要是我想厚脸皮问问题.🤭)。
3321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
