使用Vue渲染可配置表單--記一次問卷平臺項目

mcterry 發布于2019-08-20 15:49 / 3104人閱讀

摘要：相當于可以編輯問卷并提供問卷展示，數據統計的這么一個平臺。極大的節省了需要進行表單樣式修改的時間，同時，讓動態渲染表單成為一件可能且容易的事情。表單動態渲染剛好在項目之前，有過一次動態配置表單的嘗試通過字段自動生成表單及驗證。

近幾天來了個緊急項目，想要做一個內部版本的問卷星。相當于可以編輯問卷并提供問卷展示，數據統計的這么一個平臺。整個項目耗時不長，本著積淀和積累的原則，將過程中的思路和收獲進行一下沉淀。由于公司原因，代碼尚未開源。

不過沉淀了個動態配置表單的嘗試： github，用于后臺快速開發表單等需求，搭配element-ui進行使用，同時可通過后臺進行配置生成表單等。

功能和效果

問卷編輯功能大概需要一下幾點：

根據不同題型添加問題

區分問題的必選性

問題排序，刪除，復制功能

選擇題的選項編輯，排序，刪除功能

問卷渲染

生成問卷二維碼

效果

or
預覽

技術方案 Vue + VueRouter + ElementUI

使用element進行后臺以及問卷表單渲染是再合適不過的了。極大的節省了需要進行表單樣式修改的時間，同時，讓動態渲染表單成為一件可能且容易的事情。

表單動態渲染

剛好在項目之前，有過一次動態配置表單的嘗試： github 通過字段自動生成表單及驗證。但此時的數據格式相當于在后臺已經確定好的，針對可變切頻繁變動的表單結構，確定數據結構如下：

數據結構

data: {
  title: 問卷名稱
  desc: 問卷描述
  questionList: [
    {
      type: 問題類型,
      label: 問題描述,
      required: 必選性,
      options: [ //選項
        {
          label: 選項內容,
          value: 選項值
        }
        ...
      ] 
    }
    ...
  ]
}

表單渲染

最簡單的 v-if 模式來滿足我們的需求，之前有想過使用is進行渲染，但是不同表單配置項相差很大，很難進行通用。因此采用類似以下這種方式，配置詳情可見element官網。

很簡單就可以將表單根據配置渲染出來啦：

實現過程

思路理清楚了，就可以動手實踐啦！

添加問題

首先，我需要各個問題的基本配置模板，以便于每次直接向questionList中直接添加相應的內容，為了方便存儲及使用，將其放在store中,當

const state = {
  baseSet: {
    radio: {
      type: "radio",
      label: "單選題",
      required: true,
      options: [...]
    },
    checkbox: ...
    input: ...
  }
}

//添加問題時，直接push進數組即可
const mutations = [
  //添加問題
  ADDQUESTIONLIST(state, data) {
    state.qss.questionList.push(data);
  }
]

//添加問題方法
addQuestion(type) {
  this.addQuestionList(this. baseSet[type]);
},

注意

使用getter獲取到我們對應的baseSet對象時，此對象為引用類型，并且，對象的屬性，如options也同樣為引用類型。我們若不進行處理，則會出現，創建兩個相同類型的問題時，對其中某一問題選項進行修改，另一個選項也會進行修改。因此我們需要對base對象進行簡單的拷貝（只進行到數組內容即可）

export const clone = function(obj) {
  var newObj = {};

  for (let key in obj) {
    var target = obj[key];

    if (Object.prototype.toString.call(target) === "[object Object]") {
      newObj[key] = clone(target);
    } else {
      if (Object.prototype.toString.call(target) === "[object Array]") {
        newObj[key] = target.slice(0);
      } else {
        newObj[key] = target;
      }
    }
  }

  return newObj;
}

addQuestion(type) {
  this.addQuestionList(clone(this. baseSet[type]));
},

排序/刪除/復制

這三點基本就是簡單的數組操作啦，此時的問題數據依舊是引用類型，直接對引用數組進行操作即可。簡單的上移，下移排序，使用splice即可實現。其實這三點都是用splice實現的哈。

deleteQuestion(index) {
  this.data.questionList.splice(index, 1);
},

copyQuestion(index) {
  let list = this.data.questionList;
  //復制時，同樣需要對引用對象進行深拷貝
  list.splice(index, 1, list[index], clone(list[index]));
},

moveQuestion(index, direct) {
  let list = this.data.questionList;

  if(direct === "up") {
    if(index < 1) {
      this.$toast("已經是第一項！");
      return;
    }

    list.splice(index - 1, 2, list[index], list[index - 1]);
  } else {
    if(index >= list.length - 1) {
      this.$toast("已經是最后一項！");
      return;
    }

    list.splice(index, 2, list[index + 1], list[index]);
  }
}

生成二維碼

使用qrcode.js,感謝大佬們為小輩們造出這么多好用的輪子，讓我們站在巨人的肩膀上前行！

其他點 對于Vuex,使用computed獲取getters or state,如何配合v-model使用？

我們都知道，針對Vue2.0后，使用computed獲取getters or state，而針對計算屬性，我們是無法進行寫操作的，像這樣

computed: {
  ...mapState({
    qss: state => state.qss,
    base: state => state.base
  })
},

//以下代碼是無效的
this.qss = 2;

因此，我們更無法將qss屬性直接綁定在v-model上，很是苦惱。同事的一般處理方式是在data中書寫相同的屬性，在路由進入時對其進行初始化，當其修改時再寫回store。這樣寫起來未免有點麻煩且不妥當。那么，該如何解決呢？

其實很簡單，可以交給父組件呀。

我們常常會聽到一個詞，單向數據流，大概意思就是讓數據單一方向流動，我們只對數據源進行修改，再讓數據從數據源依次流動到子組件進行UI渲染。

其實就像我們使用ajax獲取數據時，統一交給父組件一樣，我們將統一獲取到的數據，使用props進行向下分發即可,使用vuex亦是如此。子組件值進行對應值的修改。而針對props，v-model可以很方便的對其進行修改了。當然這些只是我的一點理解，如果有異議，可以一起討論哈。

云服務器 GPU云服務器記一次在阿里云搭建服務器記一次阿里云服務器集體中毒 vue條件渲染 vue表單控件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82509.html

Vue.js實現一個簡易問卷平臺(項目中遇到的問題總結)

摘要：項目地址源碼地址預覽地址沒有做響應式，請在電腦上打開使用了我自制的日歷組件初學時做的，有些糙任務描述參考設計圖實現一個簡易版的問卷管理系統，有如下功能問卷管理列表有一個頭部可以顯示，不需要實現登錄等操作問卷管理列表頁面默認為首頁有一個表格項目地址源碼地址預覽地址（沒有做響應式，請在電腦上打開）使用了我自制的日歷組件（初學vue時做的，有些糙）calendar-input 任...

Scott 2019-08-29 12:22 評論0 收藏0
Vue.js實現一個簡易問卷平臺(項目中遇到的問題總結)

摘要：項目地址源碼地址預覽地址沒有做響應式，請在電腦上打開使用了我自制的日歷組件初學時做的，有些糙任務描述參考設計圖實現一個簡易版的問卷管理系統，有如下功能問卷管理列表有一個頭部可以顯示，不需要實現登錄等操作問卷管理列表頁面默認為首頁有一個表格項目地址源碼地址預覽地址（沒有做響應式，請在電腦上打開）使用了我自制的日歷組件（初學vue時做的，有些糙）calendar-input 任...

kbyyd24 2019-08-20 15:40 評論0 收藏0
記一次Vue項目優化及思路

摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。接下來我...

keithxiaoy 2019-08-02 16:12 評論0 收藏0
記一次Vue項目優化及思路

摘要：記錄一個前端項目優化的路程，效果如上圖。第二步優化結果再次運行查看項目打包情況可以看到項目體積已經優化到，中也看不到的蹤影了。本文主要想提供一些優化思路及手段，即如何定位通過，查看頁面加載時間問題，然后再解決這些問題。 showImg(https://segmentfault.com/img/bVbq282?w=381&h=384); 記錄一個前端項目優化的路程，效果如上圖。接下來我...

nanchen2251 2019-08-23 16:49 評論0 收藏0