使用方法：（具體使用請參考 https://gitee.com/declanlc/step-all-device）
1、引入樣式
拉取項目后，里面包含一個(gè)`step-lc`文件夾，其中包含兩個(gè)文件，`step.js`和`step.css`，`step.css`可以放在你項目的任何靜態(tài)文件夾，然后要在使用分步表單的頁(yè)面引入這個(gè)`step.css`樣式即可，只要保證路徑正確，例如下面的：

# index.html
# 無(wú)論在哪個(gè)頁(yè)面使用分步表單
# 需要引入以下兩個(gè)樣式如：
<link href="./layui/css/layui.css" rel="stylesheet"/>
<link href="./step-lc/step.css" rel="stylesheet">
# 可以將 step.css 放入任何目錄，只要地址引用正確即可

2、引入腳本
假如你的項目當中，`.js`文件全部放在`/static/js/`文件夾下面，此時(shí)第一步將拉取的`step-lc`目錄放到復制到里面，即`/static/js/step-lc`，然后在需要用到分步表單的頁(yè)面寫(xiě)上如下：

<script>
layui.config({
    base:'./'
}).extend({
    step: 'step-lc/step'
}).use(['step'], () => {
    let step = layui.step
    step.run({
        // 參數配置...
    })
})
</script>

3、參數說(shuō)明
a. elem: 一個(gè)DOM的id
b: stepWidth: 分步表單進(jìn)度提示容器寬度，可以接受一個(gè)大小的寬度，如'18rem'、'500px'、500
c: contentWidth: 分步表單內容的寬度，可以接受一個(gè)大小的寬度，如'18rem'、'500px'、500
d: contentHeight: 分步表單內容的高度, 如'18rem'、'500px'、500
e: nodes: 分步表單的進(jìn)度內容提示，如：[{tip: '協(xié)議',},{tip: '信息',},{tip: '結果',}]
f: contents: 分步表單的內容，每個(gè)數組項是一個(gè)對象，這個(gè)對象包含兩個(gè)字段，_tpl和ctx，_tpl是內容的模板，ctx是這個(gè)模板里面要用到的各種方法和變量，具體用法參照示例的index.html

4、重要方法
a. prev: 可以手動(dòng)調用 step.prev() 切換到上一屏
b. next: 可以手動(dòng)調用 step.next() 切換到下一屏
c. getCurrent: 可以調用 step.getCurrent() 獲取當前所在屏的序號
d. freshHeight: 組件本身是基于 carousel 封裝的，因為 carousel 默認高度是 280px 且只能設置固定值，當填寫(xiě)表單時(shí)，表單可能因為要提示消息而動(dòng)態(tài)變高，在填寫(xiě)完時(shí)調用此方法 step.freshHeight() 就可以達到高度自適應的目的

PC端：




Iphone SE: