用Vue製作多步驟表單

--

在填寫表單時,像是問卷調查,有時候內容太過冗長,頁面看不到底不知道還有多少欄位需要填寫,這時候就可以使用「多步驟表單」來呈現了,在畫面,也可以告素使用者總共有幾個步驟需要填寫,視覺上也會比較美觀,以下用三個步驟作為範例

Step1:建立HTML

先將三個步驟要呈現的內容先切出來,包含欄位及按鈕

html區塊
畫面顯示

Step2:用VUE,設定步驟顯示內容

設定vue程式,在data設定目前步驟為step設定為1

script設定預設步驟

將html的為”step-box”的class 設定v-if,step = 1、step = 2、step = 3,當step = “?”,就會顯示該區塊內容,其他區塊就會隱藏

<h3> 為紅框處的數字,會提示在第幾步驟

html寫法

Step3:用VUE,設定按鈕功能

再來就是在methods設定按鈕(上一步、下一步、送出按鈕)的方法,送出後,會跳出一個alert,提示送出成功

script加入步驟寫法
html加入步驟寫法

這樣就完成了多步驟表單,以上是我的作法,如果有任何的建議或疑問,歡迎下方留言告訴我唷~

詳細程式碼:CodePen

--

--

原來可以這樣做
原來可以這樣做

Written by 原來可以這樣做

對於學習不同領域的知識充滿熱情,將所學到的知識轉換成文字,提供讀者有價值的內容,希望讀者可以透過文章,快速掌握各種工具的應用

No responses yet