由於公司業務需求,做自定義滿意度問卷調查,在線上找插件不盡如人意(插入文件多,ui不好改);自家業務比較簡單;種種原因,於是花一點時間開發簡單的表單設計頁面。
於此記錄開發過程
首先看看預覽效果,傳送地址: http://fanfan18.gitee.io/customize-form-by-vue/
純vue開發,無jQuery,數據驅動頁面。
引入文件:iconfont 圖標文件,vue.min.js,彈框插件(提示選項不能少於兩項)
左側爲題型,右側是form表單,所有數據存儲在list中。
主要功能:
- 左側新增題型【單選題、多選題、打分題】
- 右上角新增題型-------插入當前題型,並且在當前下方插入
- 複製問題-------複製當前問題與當前數據填寫值,並且在當前下方插入
- 刪除問題-------刪除當前問題
- 新增問題選項
- 刪除問題選項(至少留兩項,彈框提示不能再刪了)
實現思路
- 創建list列表,約定題型數據結構;
- 頁面佈局規劃,編寫頁面數據渲染,通過v-if判斷type選擇渲染題型模式;
- 從簡單的新增開始,push一條新題型數據,頁面即會新增一條對應題型;
- 刪除數據,頁面觸發刪除事件,傳對應參數於方法內,執行splice 刪除對應數組的數據;
- 複製數據,由於數據結構爲對象類型,需要進行深拷貝,否則爲賦值內存地址,實則爲同一數據,統一修改;
- 選項的新增與刪除,爲嵌套操作,頁面觸發事件需傳(type,此條問題數據標識id,當前選項id),增刪方法依舊爲操作數組;