亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

happyhuangjinjin / 3798人閱讀

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

[github] | [說(shuō)明文檔]

示例 

let rule = [
  {
    type:"row",
    children:[
      {
        type:"i-col",
        props:{
          span:12
        },
        children:[
          formCreate.maker.input("商品名稱(chēng)","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

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

生成

Maker

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

上面的代碼是通過(guò) 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);

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

修改

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

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

rule[0].props.loading = false;

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

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

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

生成

Maker

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

上面的代碼是通過(guò) 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);

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

修改

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

通過(guò)rule獲取自定義組件的vm并修改

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101160.html

相關(guān)文章

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

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

    phodal 評(píng)論0 收藏0

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

    摘要：介紹是一個(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ù)雜的表單都可以輕松搞定。 文檔 | git...

    lufficc 評(píng)論0 收藏0

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

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

    kamushin233 評(píng)論0 收藏0

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

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

    notebin 評(píng)論0 收藏0

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

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

    Channe 評(píng)論0 收藏0

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

0條評(píng)論

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