自定義表單生成器form-create v2介紹

lufficc 發(fā)布于2019-08-23 18:16 / 2121人閱讀

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

介紹

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

文檔 | github

功能

自定義組件

可生成任何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()
    }
}

生成表單

export default {
  data () {
    return {
     //表單實(shí)例對(duì)象 $f
     fApi:{},
     //表單生成規(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:"{{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接收一下屬性

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("計(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)

完整示例

GPU云服務(wù)器云服務(wù)器表單自定義自定義表單自定義表單工具自定義表單軟件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104956.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lufficc

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【黑五】namecheap：域名、虛擬主機(jī)、SSL證書(shū)優(yōu)惠

閱讀 3138·2021-11-24 11:14
CKA考試心得

閱讀 3662·2021-11-22 15:22
Java和c隨機(jī)數(shù)(Random)

閱讀 3291·2021-09-27 13:36
搬瓦工：DC2機(jī)房CN2 VPS匯總，電信雙程cn2 gt，聯(lián)通/移動(dòng)雙程直連

閱讀 799·2021-08-31 14:29
pointer-events

閱讀 1385·2019-08-30 15:55
CSS之IFC

閱讀 1857·2019-08-29 17:29
vue-cli項(xiàng)目?jī)?yōu)化，縮短首屏加載時(shí)間

閱讀 1196·2019-08-29 16:24
關(guān)于移動(dòng)端適配，你必須要知道的

閱讀 2530·2019-08-26 13:48

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

自定義表單生成器form-create v2介紹

相關(guān)文章

**使用form-create輕松生成高品質(zhì)的form表單[附原理圖]**

動(dòng)態(tài)生成form表單,不再為表單煩惱

**使用form-create動(dòng)態(tài)生成vue組件,支持json格式**

PHP快速生成現(xiàn)代化form表單，就是好用

發(fā)表評(píng)論

0條評(píng)論

lufficc

男|高級(jí)講師

TA的文章

【黑五】namecheap：域名、虛擬主機(jī)、SSL證書(shū)優(yōu)惠

CKA考試心得

Java和c隨機(jī)數(shù)(Random)

搬瓦工：DC2機(jī)房CN2 VPS匯總，電信雙程cn2 gt，聯(lián)通/移動(dòng)雙程直連

pointer-events

CSS之IFC

vue-cli項(xiàng)目?jī)?yōu)化，縮短首屏加載時(shí)間

關(guān)于移動(dòng)端適配，你必須要知道的

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

自定義表單生成器form-create v2介紹

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！