js引用

layui.use(['jquery','step'], function(){    var $ = layui.jquery;    var step = layui.step;    step.render({        elem: '.layui-step',        // title: ["第一步","第二步","第三步","第四步"],        description: ["aaa","bbb","ccc","ddd"],        currentStep: 1,        // canIconClick: true,        isOpenStepLevel: true    });    $(".goFirst").on("click",function() {        step.goFirst();    })    $(".prev").on("click",function() {        step.prev();    })    $(".next").on("click",function() {        step.next();    })    $(".goLast").on("click",function() {        step.goLast();    })    $(".goStep").on("click",function() {        step.goStep(2);    })    $(".disabled").on("click",function() {        step.disabled(3);    })    $(".abled").on("click",function() {        step.abled(3);    })});

說(shuō)明

1、每一個(gè) .layui-step-content-item代表一個(gè)tab頁(yè)面，高度默認(rèn)最小值為滿屏

2、按扭區(qū)默認(rèn)懸浮固定在右下角，可自行設(shè)置，內(nèi)部的按鈕個(gè)數(shù)可以自定義

3、按鈕禁用與解禁的位置（i）必須在當(dāng)前步數(shù)之后，即禁用時(shí)，該位置應(yīng)尚未走到

step.render()參數(shù)說(shuō)明

1、elem：外層容器

2、title：步驟條下方文字說(shuō)明，類型為數(shù)組，可省略，默認(rèn)["第一步","第二步","第三步","。。。"]

3、currentStep：初始時(shí)是第幾步，可省略，默認(rèn)第一步

4、canIconClick：上方步驟條是否可以點(diǎn)擊，可省略，默認(rèn)false

5、description：步驟條下方描述性文字，類型為數(shù)組，可省略

6、isOpenStepLevel：是否嚴(yán)格按照步驟條順序執(zhí)行，即未走過(guò)的步驟不可點(diǎn)，走過(guò)的可點(diǎn)，可省略，若開(kāi)啟則默認(rèn)canIconClick字段關(guān)閉

外部可以使用的函數(shù)說(shuō)明

1、render()：初始渲染界面

2、goStep(i)：跳到第幾步

3、goFirst()：跳到第1步

4、goLast()：跳到最后1步

5、prev()：跳到上一步

6、next()：跳到下一步

7、disabled(i)：禁用某一步

8、abled(i)：解除某一步的禁用

外部可使用的變量說(shuō)明

1、currentStep：獲取當(dāng)前是第幾步

以上是“如何使用layui實(shí)現(xiàn)步驟條面板”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！