介紹

基于Vue,ElementUI開發(fā)的一款表單設(shè)計(jì)器，提高表單開發(fā)效率的利器，讓開發(fā)者從枯燥的表單代碼編寫中解放出來(lái)

工具地址：http://form.making.link

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

image

特性

• 可視化配置頁(yè)面
• 提供柵格布局，并采用flex實(shí)現(xiàn)對(duì)齊
• 一鍵預(yù)覽配置的效果
• 一鍵生成配置json數(shù)據(jù)
• 一鍵生成代碼，立即可運(yùn)行
• 提供自定義組件滿足用戶自定義需求
• 提供遠(yuǎn)端數(shù)據(jù)接口，方便用戶需要異步獲取數(shù)據(jù)加載
• 提供功能強(qiáng)大的高級(jí)組件
• 支持表單驗(yàn)證
• 快速獲取表單數(shù)據(jù)

CDN

<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫(kù) -->
<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>

功能介紹

通過(guò) 在線地址生成的JSON，用于表單渲染

image

下面就是加載對(duì)應(yīng)的數(shù)據(jù)用于展示，假設(shè)你已經(jīng)正確加載組件

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

new Vue({
    ...
    data () {
        return {
            jsonData: {}, // 表單配置中生成的json數(shù)據(jù)
            values: {}, // 表單需要顯示的表單數(shù)據(jù)
            remoteFuncs: {
                // 組件配置時(shí)配置的遠(yuǎn)端方法,保持和配置時(shí)輸入的名稱一致
                func_test (resolve) {
                  // 模擬接口請(qǐng)求
                  setTimeout(() => {
                    const options = [
                      {id: '1', name: '1111'},
                      {id: '2', name: '2222'},
                      {id: '3', name: '3333'}
                    ]
                    
                    // 獲取到的值和標(biāo)簽可以通過(guò)配置頁(yè)遠(yuǎn)端配置
                    // 值:id  標(biāo)簽：name
        
                    resolve(options) // 將后端獲取的數(shù)據(jù)放入回調(diào)函數(shù)中
                  }, 2000)
                },
                func_test2....
            }
        }
    },
    methods: {
        ...{
            // 調(diào)用此方法驗(yàn)證表單數(shù)據(jù)和獲取表單數(shù)據(jù)
            this.$refs.generateForm.getData().then(data => {
                // 數(shù)據(jù)校驗(yàn)成功
                // data 為獲取的表單數(shù)據(jù)
            }).catch(e => {
                // 數(shù)據(jù)校驗(yàn)失敗
            })
        }
    }
})