form-create如何動態產生vue元件？ （程式碼範例）

這篇文章帶給大家的內容是關於form-create如何動態產生vue元件？ （程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

範例

 

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(&#39;<i-button :loading="loading">{{text}}<i-button>&#39;,new Vue({
    data:{
      loading:true,
      text:&#39;正在加载中...&#39;
    }
  }))
]

上面的程式碼是透過 maker 產生器動態產生一個正在載入的 iview 按鈕元件

Json

let rule = [
  {
    type:'template',
    template:&#39;<i-button :loading="loading">{{text}}<i-button>&#39;,
    vm:new Vue({
      data:{
        loading:true,
        text:&#39;正在加载中&#39;
      }
    })
  }
]
$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;

以上是form-create如何動態產生vue元件？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！