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

happyhuangjinjin 發(fā)布于2019-08-23 14:48 / 3799人閱讀

摘要：說明文檔示例商品名稱商品加個創(chuàng)建時間是否顯示顯示不顯示通過建立一個虛擬的方式生成自定義組件生成上面的代碼是通過生成器動態(tài)生成一個正在加載的按鈕組件上面的代碼是通過方式動態(tài)生成一個按鈕組件修改可以通過一下兩種方式動態(tài)修改組件的配置項通

[github] | [說明文檔]

示例

let rule = [
  {
    type:"row",
    children:[
      {
        type:"i-col",
        props:{
          span:12
        },
        children:[
          formCreate.maker.input("商品名稱","goods_name","iphone"),
          formCreate.maker.number("商品加個","goods_price",8688)
        ]
      },
      {
        type:"i-col",
        props:{
          span:12
        },
        children:[
          formCreate.maker.dateTime("創(chuàng)建時間","create_at"),
          formCreate.maker.radio("是否顯示","is_show").options([
            {value:1,label:"顯示"},
            {value:0,label:"不顯示"}
          ])
        ]
      }
    ]
  }
]

maker.create

通過建立一個虛擬 DOM的方式生成自定義組件

生成

Maker

let rule = [
  formCreate.maker.create("i-button").props({
    type:"primary",
    field:"btn"
    loading:true
  })
]
$f = formCreate.create(rule);

上面的代碼是通過 maker 生成器動態(tài)生成一個正在加載的 iview 按鈕組件

Json

let rule = [
  {
    type:"i-button",
    field:"btn"
    props:{
        type:"primary",
        field:"btn",
        loading:true
    }
  }
]
$f = formCreate.create(rule);

上面的代碼是通過json方式動態(tài)生成一個iview 按鈕組件

修改

可以通過一下兩種方式動態(tài)修改組件的配置項

通過rule修改組件生成規(guī)則

rule[0].props.loading = false;

通過$f.component()方法獲取組件的生成規(guī)則并修改

$f.component().btn.props.loading = false;

maker.template

通過模板的方式生成自定義組件,maker.createTmp方法是該方法的別名

生成

Maker

let rule = [
  formCreate.maker.template("{{text}}",new Vue({
    data:{
      loading:true,
      text:"正在加載中..."
    }
  }))
]

上面的代碼是通過 maker 生成器動態(tài)生成一個正在加載的 iview 按鈕組件

Json

let rule = [
  {
    type:"template",
    template:"{{text}}",
    vm:new Vue({
      data:{
        loading:true,
        text:"正在加載中"
      }
    })
  }
]
$f = formCreate.create(rule);

上面的代碼是通過Json方式動態(tài)生成一個iview 按鈕組件

修改

可以通過一下兩種方式動態(tài)修改vm組件內部的值

通過rule獲取自定義組件的vm并修改

rule[0].vm.text = "加載完畢";
rule[0].vm.loading = false;

通過$f.component()方法獲取自定義組件的vm并修改

$f.component().btn.vm.text = "加載完畢";
$f.component().btn.vm.loading = false;

GPU云服務器云服務器 js將數(shù)據(jù)動態(tài)生成json js動態(tài)生成格式數(shù)據(jù)類型 vue組件 vue組件開發(fā)

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

轉載請注明本文地址：http://m.hztianpu.com/yun/101160.html

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

摘要：目的是節(jié)省開發(fā)人員在表單頁面上耗費的時間，從而更專注于功能開發(fā)。使用可快速便捷的生成日常開發(fā)中所需的各種表單?？赏ㄟ^后端返回生成規(guī)則，進行渲染。 form-create 具有動態(tài)渲染、數(shù)據(jù)收集、校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定、事件擴展以及自定義組件，可快速生成包含有省市區(qū)三級聯(lián)動、時間選擇、日期選擇等17種功能組件。已兼容iview2.和iview3.版本 Github...

phodal 2019-08-23 14:13 評論0 收藏0
自定義表單生成器form-create v2介紹

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

lufficc 2019-08-23 18:16 評論0 收藏0
動態(tài)生成form表單,不再為表單煩惱

摘要：具有數(shù)據(jù)收集校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴展，組件包含有復選框單選框輸入框下拉選擇框等表單元素以及省市區(qū)三級聯(lián)動時間選擇日期選擇顏色選擇滑塊評分框架樹型文件圖片上傳等功能組件。 form-create 具有數(shù)據(jù)收集、校驗和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴展，組件包含有復選框、單選框、輸入框、下拉選擇框等表單元素以及省市區(qū)三級聯(lián)動,時間選擇,日期選擇,...

kamushin233 2019-08-22 14:53 評論0 收藏0
PHP快速生成現(xiàn)代化form表單，就是好用

摘要：表單生成器，使用快速創(chuàng)建現(xiàn)代化的表單，包含復選框單選框輸入框下拉選擇框等元素以及省市區(qū)三級聯(lián)動時間選擇日期選擇顏色選擇文件圖片上傳等功能。 form-builder PHP表單生成器，使用PHP快速創(chuàng)建現(xiàn)代化的form表單，包含復選框、單選框、輸入框、下拉選擇框等元素以及,省市區(qū)三級聯(lián)動,時間選擇,日期選擇,顏色選擇,文件/圖片上傳等功能。 Github地址 | Composer地址 ...

notebin 2019-07-01 10:13 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇)

摘要：社區(qū)的認可目前已經(jīng)是相關最多的開源項目了，體現(xiàn)出了社區(qū)對其的認可。監(jiān)聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0