在填寫表單時,像是問卷調查,有時候內容太過冗長,頁面看不到底不知道還有多少欄位需要填寫,這時候就可以使用「多步驟表單」來呈現了,在畫面,也可以告素使用者總共有幾個步驟需要填寫,視覺上也會比較美觀,以下用三個步驟作為範例
Step1:建立HTML
先將三個步驟要呈現的內容先切出來,包含欄位及按鈕
Step2:用VUE,設定步驟顯示內容
設定vue程式,在data設定目前步驟為step設定為1
將html的為”step-box”的class 設定v-if,step = 1、step = 2、step = 3,當step = “?”,就會顯示該區塊內容,其他區塊就會隱藏
<h3> 為紅框處的數字,會提示在第幾步驟
Step3:用VUE,設定按鈕功能
再來就是在methods設定按鈕(上一步、下一步、送出按鈕)的方法,送出後,會跳出一個alert,提示送出成功
這樣就完成了多步驟表單,以上是我的作法,如果有任何的建議或疑問,歡迎下方留言告訴我唷~
詳細程式碼:CodePen