Custom component

form-create supports the generation of any vue component inside a form

remind

  • Custom components can invalidate the field property, only when you need to get the component's generation rules through the $f.component() method.
  • When form-create is initialized, maker will be automatically converted to object, which can be controlled by global configuration switchMaker.

maker.create

Generate custom components by creating 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 iview button component that is being loaded via 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 dynamically generates an iview button component via the json method.

Modify

You can dynamically modify the component's configuration items in two ways.

Modify component generation rules with rule

rule[0].props.loading = false;

Get the component generation rules and modify them with the $f.component() method

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

Demo

create-demo

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.template

The custom component is generated by means of template, and the maker.createTmp method is an alias for the method.

Generate

Maker

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

The above code dynamically generates a iview button component that is being loaded via the maker generator.

Object

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

The above code dynamically generates an iview button component via the Object method.

Modify

The internal values of the vm component can be dynamically modified in two ways.

Get the vm of the custom component via rule and modify it

rule[0].vm.text = '加载完毕';
rule[0].vm.loading = false;

Get the vm of the custom component and modify it with the $f.component() method

$f.component().btn.vm.text = '加载完毕';
$f.component().btn.vm.loading = false;