schema form editor

schema-form-maker

schema-form-maker 是一個基於vue 編寫的視覺化表單編輯器。

文件詳見wiki 相關章節安裝依賴| 運行編輯器| 建立表單| 匯出schema | 渲染表單

安裝依賴

使用原生npm 進行安裝，暫時不支援cnpm

 npm install

(詳情參考安裝)

運行編輯器

完成安裝後，執行

 npm run dev

執行表單編輯器，啟動完成後開啟http://localhost:8080/存取。

(詳情參考運行)

建構表單

表單編輯器左中右共分為三個區域：

組件欄

視野的最左側是【元件列】，可利用拖曳將其中的元件加入中間【搭建區】的表單中。

搭建區

視圖的中間是【搭建區】，這裡展示了目前正在編輯的表單。
點選選取其中的某一表單項目後，可在右側的【設定選單】，並對其進行編輯。
在編輯過程中可以隨時按下ctrl + s或cmd + s進行儲存。

(詳情參考表單搭建-搭建區)

配置選單

視圖的最右側是【設定選單】，可對【搭建區】已選取的表單項目進行編輯。

匯出schema

完成表單的搭建後，在搭建區的最下方，點選【結構】按鈕便可在彈出的對話方塊中檢視表單的schema。
在schema 對話方塊的右上角，有【複製】和【下載】兩個按鈕，可用來匯出schema。

渲染表單

匯出schema 後，可以在自己的專案中使用schema-form-render 元件，將表單重新渲染出來。

範例程式碼：

< template >
  ...
    <!-- DeviceSchema 为渲染表单需要的 schema -->
    <!-- device 为表单数据 -->
    < SchemaFormRender
      :schema = " DeviceSchema "
      :data = " device "
    />
    < el-button @click = " updateDevice " >
      提交
    </ el-button >
  ...
</ template >
< script >
...
export default {
  ...
  methods : {
    async updateDevice () {
      // 用户操作表单后 this.device 的数据会实时更新
      // 这里可以直接通过 this.device 访问到表单中的数据
      await axios . put ( ` http://api.com/device/ ${ this . device . id } ` , this . device );
      this . $message . success ( '保存成功' );
    }
  }
}
</ script >