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

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

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

介紹

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

文檔 | github

功能

自定義組件

可生成任何Vue組件

自帶數(shù)據(jù)驗證

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

通過 JSON 生成表單

通過 Maker 生成表單

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

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

事件擴展

局部更新

數(shù)據(jù)驗證

柵格布局

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

對比 1.x

速度更快

體積更小

更強大的全局配置

自定義組件更容易擴展

更容易支持第三方 UI 庫

更少的 bug

示例

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

通過 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	省市區(qū)多級聯(lián)動數(shù)據(jù)

使用

以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()
    }
}

生成表單

export default {
  data () {
    return {
     //表單實例對象 $f
     fApi:{},
     //表單生成規(guī)則
     rule:[
       {
          type:"input",
          field:"goods_name",
          title:"商品名稱"
        },
        {
          type:"datePicker",
          field:"created_at",
          title:"創(chuàng)建時間"
        }
     ]
    };
  },
  methods:{
      onSubmit(formData){
          //TODO 提交表單
      }
  }
};

效果

實例對象 $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:"{{text}}",
    vm: new Vue({
      data:{
        loading:true,
        text:"加載中"
      }
    })
}

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

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

預定義

props

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

value 表單的值

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

例如:

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

input 事件

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

當組件值發(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")

示例

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

formCreate.maker.template("計數(shù)器-{{num}}", new Vue({
  props:{
    //預定義
    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)

完整示例

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104956.html

發(fā)表評論

登陸后可評論

0條評論

lufficc

男|高級講師

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

TA的文章

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

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

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

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

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

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

閱讀 1813·2019-08-29 17:29
vue-cli項目優(yōu)化，縮短首屏加載時間

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

發(fā)表評論

0條評論

lufficc

男|高級講師

TA的文章

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

CKA考試心得

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

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

pointer-events

CSS之IFC

vue-cli項目優(yōu)化，縮短首屏加載時間

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

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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