vue自定義表單生成器form-create使用詳解

更新時(shí)間：2019年07月19日 08:52:03 作者：返回主頁(yè) xaboy

這篇文章主要介紹了vue自定義表單生成器,可根據(jù)json參數(shù)動(dòng)態(tài)生成表單,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

介紹

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ì)微信商城

功能

自定義組件
- 可生成任何Vue組件
- 自帶數(shù)據(jù)驗(yàn)證
- 輕松轉(zhuǎn)換為表單組件
通過(guò) JSON 生成表單
通過(guò) Maker 生成表單
強(qiáng)大的API，可快速操作表單
雙向數(shù)據(jù)綁定
事件擴(kuò)展
局部更新
數(shù)據(jù)驗(yàn)證
柵格布局
內(nèi)置組件17種常用表單組件

對(duì)比 1.x

速度更快
體積更小
更強(qiáng)大的全局配置
自定義組件更容易擴(kuò)展
更容易支持第三方 UI 庫(kù)
更少的 bug

示例

通過(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()
  }
}

生成表單

<template>
  <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create>
</template>
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 快速操作表單，例如：

$f.hidden：隱藏指定組件
$f.validate：驗(yàn)證表單
$f.setValue：修改表單組件的值
$f.append：追加表單組件

自定義組件

生成

通過(guò)標(biāo)簽生成

{
  type:'el-button',
  name: 'btn',
  props:{
    type:'primary',
    field:'btn',
    loading:true
  },
  children:['加載中']
}

通過(guò)模板生成

{
  type:'template',
  name:'btn'
  template:'<el-button :loading="loading">{{text}}<el-button>',
  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接收一下屬性

value 表單的值
disabled 組件的禁用狀態(tài)

例如:

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('<el-button @click="onClick" long :disabled="disabled">計(jì)數(shù)器-{{num}}</el-button>', 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)

完整示例