介紹
創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)東陽(yáng),十多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108
form-create 是一個(gè)可以通過(guò) JSON 生成具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、驗(yàn)證和提交功能的表單生成器。并且支持生成任何 Vue 組件。結(jié)合內(nèi)置17種常用表單組件和自定義組件，再?gòu)?fù)雜的表單都可以輕松搞定。
文檔 | github
演示項(xiàng)目: 開(kāi)源的高品質(zhì)微信商城
功能
對(duì)比 1.x
示例
通過(guò) JSON 創(chuàng)建表單
通過(guò) 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
可以通過(guò) $f 快速操作表單，例如：
自定義組件
生成
通過(guò)標(biāo)簽生成
{
type:'el-button',
name: 'btn',
props:{
type:'primary',
field:'btn',
loading:true
},
children:['加載中']
}通過(guò)模板生成
{
type:'template',
name:'btn'
template:'{{text}}',
vm: new Vue({
data:{
loading:true,
text:'加載中'
}
})
} 轉(zhuǎn)換為表單組件
自定義組件轉(zhuǎn)換為表單組件后，可通過(guò)$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作組件，達(dá)到和內(nèi)置組件相同的效果
預(yù)定義
props
在自定義組件內(nèi)部通過(guò)props接收一下屬性
例如:
vm = Vue({
props:{
value:String,
disabled:Boolean
}
})input 事件
通過(guò)input事件更新組件內(nèi)部的值
當(dāng)組件值發(fā)生變化后,通過(guò) input 事件更新值.例如:
vm.$emit('input',newValue);掛載自定義組件
要生成的自定義組件必須通過(guò)Vue.component方法掛載到全局,或者通過(guò)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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
