使用form-create動態生成vue組件,支持json格式

happyhuangjinjin 發布于2019-08-23 14:48 / 3692人閱讀

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

[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("創建時間","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 生成器動態生成一個正在加載的 iview 按鈕組件

Json

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

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

修改

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

通過rule修改組件生成規則

rule[0].props.loading = false;

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

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

maker.template

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

生成

Maker

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

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

Json

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

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

修改

可以通過一下兩種方式動態修改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將數據動態生成json js動態生成格式數據類型 vue組件 vue組件開發

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

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

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

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

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

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

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

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

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

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

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

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

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