Using form create to dynamically generate vue components

Using form create to dynamically generate vue custom components and nested form components

[github] | [description document]

maker.create

Build custom components by building a virtual DOM

generate

Maker

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

 

The above code dynamically generates a loading iview button component through the maker generator

Json

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

 

The above code is to dynamically generate an iview button component through json

modify

There are two ways to dynamically modify the configuration items of a component

Modifying component generation rules through rule

rule[0].props.loading = false;

Get the generation rules of components through the $f.component() method and modify them

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

 

Example

let rule = [
  {
    type:'row',
    children:[
      {
        type:'i-col',
        props:{
          span:12
        },
        children:[
          formCreate.maker.input('Trade name','goods_name','iphone'),
          formCreate.maker.number('Commodity plus','goods_price',8688)
        ]
      },
      {
        type:'i-col',
        props:{
          span:12
        },
        children:[
          formCreate.maker.dateTime('Creation time','create_at'),
          formCreate.maker.radio('Whether to display','is_show').options([
            {value:1,label:'display'},
            {value:0,label:'No display'}
          ])
        ]
      }
    ]
  }
]

 

maker.template

Generate custom components through templates. The maker.createTmp method is the alias of this method

generate

Maker

let rule = [
  formCreate.maker.template('<i-button :loading="loading">{{text}}<i-button>',new Vue({
    data:{
      loading:true,
      text:'Loading...'
    }
  }))
]

The above code dynamically generates a loading iview button component through the maker generator

Json

let rule = [
  {
    type:'template',
    template:'<i-button :loading="loading">{{text}}<i-button>',
    vm:new Vue({
      data:{
        loading:true,
        text:'Loading'
      }
    })
  }
]
$f = formCreate.create(rule);

 

The above code is to dynamically generate an iview button component through Json mode

modify

There are two ways to dynamically modify the values within a vm component

Get vm of custom component through rule and modify

rule[0].vm.text = 'Loading completed';
rule[0].vm.loading = false;

Get vm of custom component through $f.component() method and modify

$f.component().btn.vm.text = 'Loading completed';
$f.component().btn.vm.loading = false;

 

 

Tags: Javascript JSON Vue github

Posted on Tue, 03 Dec 2019 00:34:59 -0500 by polywog