介紹

form-create 是一個(gè)可以通過 JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結(jié)合內(nèi)置17種常用表單組件和自定義組件，再?gòu)?fù)雜的表單都可以輕松搞定。

文檔 | github

演示項(xiàng)目: 開源的高品質(zhì)微信商城

功能

自定義組件

可生成任何Vue組件

自帶數(shù)據(jù)驗(yàn)證

輕松轉(zhuǎn)換為表單組件

通過 JSON 生成表單

通過 Maker 生成表單

強(qiáng)大的API，可快速操作表單

雙向數(shù)據(jù)綁定

事件擴(kuò)展

局部更新

數(shù)據(jù)驗(yàn)證

柵格布局

內(nèi)置組件17種常用表單組件

對(duì)比 1.x

速度更快

體積更小

更強(qiáng)大的全局配置

自定義組件更容易擴(kuò)展

更容易支持第三方 UI 庫(kù)

更少的 bug

示例

通過 JSON 創(chuàng)建表單

通過 API 操作表單

@form-create包說(shuō)明

名稱

說(shuō)明

@form-create/iview

iview 版表單生成器

@form-create/element-ui

element-ui 版表單生成器

@form-create/core

form-create 核心包

@form-create/utils

form-create 工具包

@form-create/data

省市區(qū)多級(jí)聯(lián)動(dòng)數(shù)據(jù)

使用

以element-ui版本為例介紹如何在項(xiàng)目中使用 form-create

安裝

npm i @form-create/element-ui

掛載

全局注冊(cè)

import formCreate form '@form-create/element-ui';

Vue.use(formCreate);

局部掛載

import formCreate form '@form-create/element-ui';

export default {

components:{

formCreate:formCreaet.$form()

}

}

生成表單

export default {

data () {

return {

//表單實(shí)例對(duì)象

$f:{},

//表單生成規(guī)則

rule:[

{

type:'input',

field:'goods_name',

title:'商品名稱'

},

{

type:'datePicker',

field:'created_at',

title:'創(chuàng)建時(shí)間'

}

]

};

},

methods:{

onSubmit(formData){

//TODO 提交表單

}

}

};

效果

實(shí)例對(duì)象 $f

可以通過 $f 快速操作表單，例如：

$f.hidden：隱藏指定組件

$f.validate：驗(yàn)證表單

$f.setValue：修改表單組件的值

$f.append：追加表單組件

自定義組件

生成

通過標(biāo)簽生成

{

type:'el-button',

name: 'btn',

props:{

type:'primary',

field:'btn',

loading:true

},

children:['加載中']

}

通過模板生成

{

type:'template',

name:'btn'

template:'{{text}}',

vm: new Vue({

data:{

loading:true,

text:'加載中'

}

})

}

轉(zhuǎn)換為表單組件

自定義組件轉(zhuǎn)換為表單組件后，可通過$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作組件，達(dá)到和內(nèi)置組件相同的效果

預(yù)定義

props

在自定義組件內(nèi)部通過props接收一下屬性

value 表單的值

disabled 組件的禁用狀態(tài)

例如:

vm = Vue({

props:{

value:String,

disabled:Boolean

}

})

input 事件

通過input事件更新組件內(nèi)部的值

當(dāng)組件值發(fā)生變化后,通過 input 事件更新值.例如:

vm.$emit('input',newValue);

掛載自定義組件

要生成的自定義組件必須通過Vue.component方法掛載到全局,或者通過formCreate.component方法掛載

例如:

formCreate.component('TestComponent',component);

或者

Vue.component('TestComponent',component);

生成

表單組件必須定義field屬性

JSON

{

type:'TestComponent',

value:'test',

field:'testField',

title:'自定義組件'

}

Maker

formCreate.maker.create('TestComponent','testField','自定義組件').value('test')

示例

自定義計(jì)數(shù)器按鈕組件,獲取按鈕點(diǎn)擊數(shù).該組件的功能和內(nèi)置組件相同

formCreate.maker.template('計(jì)數(shù)器-{{num}}', new Vue({

props:{

//預(yù)定義

disabled:Boolean,

value:Number,

},

data: function () {

return {

num: this.value,

}

},

watch:{

value(n){

this.num = n;

}

},

methods: {

onClick: function () {

this.num++;

//更新組件內(nèi)部的值

this.$emit('input',this.num);

},

},

}), 'tmp', '自定義 title').value(100).props('disabled',false)

完整示例

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持。

總結(jié)

以上是生活随笔為你收集整理的createform用法_vue自定义表单生成器form-create使用详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。