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

資訊專欄INFORMATION COLUMN

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

happyhuangjinjin / 3708人閱讀

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

[github] | [說明文檔]

示例 

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

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

生成

Maker

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

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

Json

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

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

修改

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

通過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 生成器動(dòng)態(tài)生成一個(gè)正在加載的 iview 按鈕組件

Json

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

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

修改

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

通過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;

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

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

相關(guān)文章

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

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

    phodal 評論0 收藏0

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

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

    lufficc 評論0 收藏0

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

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

    kamushin233 評論0 收藏0

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

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

    notebin 評論0 收藏0

  • 手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇)

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

    Channe 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<