layui step 步骤条（分步表单）的表单提交配置

帐篷帐篷，下雨不愁

已于 2024-11-14 15:04:42 修改

阅读量3.8k

点赞数 34

文章标签： layui 前端 javascript

于 2024-02-07 11:26:04 首次发布

本文链接：https://blog.csdn.net/m0_69423937/article/details/136008197

版权

一、模板

1、预览图

首先导入扩展 js和css 文件（可以直接引用官网里面的js，或者本地）

资源位置：【免费】step步骤表单（分步表单测试测试测试）资源-CSDN文库

后续如有需要，具体资源评论或者私信

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>

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、颜色大小问题

因为一开始他自带的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;
}

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);
});

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';
    }

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);
    }

3、存在问题：他会弹出一个警告 (可能是影响性能，但是无伤大雅)

[Violation] Forced reflow while executing JavaScript took 49ms

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);
        });
    });

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');
        },

二、存在问题

这里面比如他在step3 上，内容是不显示的，我不知道是我代码的bug,还是这个框架的问题（后续如解决会更新！）求求求，解决方法

三、个人总结

从23.12.2-3号吧，从那时候就一直弄这个分步表单，差不多弄了两个月，出现了很多问题，这里面layui框架step组件好像是不存在自适应高度的，给大家一起避避坑（存在的主要问题还是1、摸鱼（嘿嘿，不能怪我，太无聊了）2、存在问题不知道找谁去问，不熟悉代码，喜欢套框架，拿来直接能用。跟最开始element-ui 一样。后续会深入了解代码）后期的话我想弄一个群，大家可以一起分享问题和解决问题（主要是我想厚脸皮问问题.🤭）。