基於Vue,ElementUI開發的一款表單設計器

介紹

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

工具地址：http://tools.xiaoyaoji.cn/form

GitHub地址：https://github.com/GavinZhuLei/vue-form-making

特性

• 可視化配置頁面
• 提供柵格佈局，並採用flex實現對齊
• 一鍵預覽配置的效果
• 一鍵生成配置json數據
• 一鍵生成代碼，當即可運行
• 提供自定義組件知足用戶自定義需求
• 提供遠端數據接口，方便用戶須要異步獲取數據加載
• 提供功能強大的高級組件
• 支持表單驗證
• 快速獲取表單數據

CDN

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

Install

npm install form-making -S

Quick Start

import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(FormMaking)

// or
import {
  GenerateForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.component(GenerateForm.name, GenerateForm)

Template

<fm-generate-form></fm-generate-form>

功能介紹

經過 在線地址生成的JSON，用於表單渲染

下面就是加載對應的數據用於展現，假設你已經正確加載組件

<fm-generate-form 
    :data="jsonData" 
    :remote="remoteFuncs" 
    :value="values"
    ref="generateForm">
</fm-generate-form>

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 => {
                // 數據校驗失敗
            })
        }
    }
})