vue自定義表單生成器,可根據json引數動態生成表單

xaboy發表於2019-07-19
VueJSON

介紹

form-create 是一個可以通過 JSON 生成具有動態渲染、資料收集、驗證和提交功能的表單生成器。並且支援生成任何 Vue 元件。結合內建17種常用表單元件和自定義元件，再複雜的表單都可以輕鬆搞定。

文件 | github

演示專案: 開源的高品質微信商城

功能

  • 自定義元件

    • 可生成任何Vue元件
    • 自帶資料驗證
    • 輕鬆轉換為表單元件

  • 通過 JSON 生成表單

  • 通過 Maker 生成表單

  • 強大的API，可快速操作表單

  • 雙向資料繫結

  • 事件擴充套件

  • 區域性更新

  • 資料驗證

  • 柵格佈局

  • 內建元件17種常用表單元件

對比 1.x

  • 速度更快

  • 體積更小

  • 更強大的全域性配置

  • 自定義元件更容易擴充套件

  • 更容易支援第三方 UI 庫

  • 更少的 bug

示例

通過 JSON 建立表單 通過 JSON 建立表單

通過 API 操作表單 通過 API 操作表單

@form-create包說明

名稱說明
@form-create/iview iview 版表單生成器
@form-create/element-ui element-ui 版表單生成器
@form-create/core form-create 核心包
@form-create/utils form-create 工具包
@form-create/data 省市區多級聯動資料

使用

以element-ui版本為例介紹如何在專案中使用 form-create

安裝

npm i @form-create/element-ui

 

掛載

全域性註冊

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 {
     //表單例項物件
     $f:{},
     //表單生成規則
     rule:[
       {
          type:'input',
          field:'goods_name',
          title:'商品名稱'
        },
        {
          type:'datePicker',
          field:'created_at',
          title:'建立時間'
        }
     ]
    };
  },
  methods:{
      onSubmit(formData){
          //TODO 提交表單
      }
  }
};

 

效果

form-create 效果圖

例項物件 $f

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

  • $f.hidden：隱藏指定元件
  • $f.validate：驗證表單
  • $f.setValue：修改表單元件的值
  • $f.append：追加表單元件

自定義元件

生成

通過標籤生成

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

 

通過模板生成

{
    type:'template',
    name:'btn'
    template:'<el-button :loading="loading">{{text}}<el-button>',
    vm: new Vue({
      data:{
        loading:true,
        text:'載入中'
      }
    })
}

 

轉換為表單元件

自定義元件轉換為表單元件後，可通過$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作元件，達到和內建元件相同的效果

預定義

props

在自定義元件內部通過props接收一下屬性

  • value 表單的值
  • disabled 元件的禁用狀態

例如:

vm = Vue({
  props:{
   value:String,
   disabled:Boolean      
  }
})

 

input 事件

通過input事件更新元件內部的值

當元件值發生變化後,通過 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')

 

示例

自定義計數器按鈕元件,獲取按鈕點選數.該元件的功能和內建元件相同

formCreate.maker.template('<el-button @click="onClick" long :disabled="disabled">計數器-{{num}}</el-button>', new Vue({
  props:{
    //預定義
    disabled:Boolean,
    value:Number,
  },
  data: function () {
    return {
        num: this.value,
    }
  },
  watch:{
    value(n){
        this.num = n;
    }
  },
  methods: {
    onClick: function () {
        this.num++;
        //更新元件內部的值
        this.$emit('input',this.num);
    },
  },
}), 'tmp', '自定義 title').value(100).props('disabled',false)

 

完整示例

form-create示例.png

相關文章