介紹

基於Vue,ElementUI開發的一款表單設計器，提高表單開發效率的利器，讓開發者從枯燥的表單程式碼編寫中解放出來

工具地址：

GitHub地址：

image

特性

• 視覺化配置頁面

• 提供柵格佈局，並採用flex實現對齊

• 一鍵預覽配置的效果

• 一鍵生成配置json資料

• 一鍵生成程式碼，立即可執行

• 提供自定義元件滿足使用者自定義需求

• 提供遠端資料介面，方便使用者需要非同步獲取資料載入

• 提供功能強大的高階元件

• 支援表單驗證

• 快速獲取表單資料

CDN

<!-- 引入樣式 --&gt<!-- 引入元件庫 --&gt

Install

npm install form-making -S

Quick Start

import FormMaking from 'form-making'import 'form-making/dist/FormMaking.css'Vue.use(FormMaking)// orimport {
  GenerateForm
} from 'form-making'import 'form-making/dist/FormMaking.css'Vue.component(GenerateForm.name, GenerateForm)

Template

功能介紹

透過 生成的JSON，用於表單渲染

image

下面就是載入對應的資料用於展示，假設你已經正確載入元件

new Vue({
    ...
    data () {        return {            jsonData: {}, // 表單配置中生成的json資料
            values: {}, // 表單需要顯示的表單資料
            remoteFuncs: {                // 元件配置時配置的遠端方法,保持和配置時輸入的名稱一致
                func_test (resolve) {                  // 模擬介面請求
                  setTimeout(() => {                    const options = [
                      {id: '1', name: '1111'},
                      {id: '2', name: '2222'},
                      {id: '3', name: '3333'}
                    ]                    
                    // 獲取到的值和標籤可以透過配置頁遠端配置
                    // 值:id  標籤：name
        
                    resolve(options) // 將後端獲取的資料放入回撥函式中
                  }, 2000)
                },
                func_test2....
            }
        }
    },    methods: {
        ...{            // 呼叫此方法驗證表單資料和獲取表單資料
            this.$refs.generateForm.getData().then(data => {                // 資料校驗成功
                // data 為獲取的表單資料
            }).catch(e => {                // 資料校驗失敗
            })
        }
    }
})

作者：GavinZhulei
連結：