Component generator

The maker component generator is a helper method for generating component rules, which can quickly generate corresponding component rules through chain operations.

Get maker generator

Browser

window.formCreate.maker

NodeJs

import { maker } from 'form-create'

Maker generator configuration item description

Hidden

maker.hidden

  • parameter{string} field{string|number} value

  • usage

    maker.hidden('field','value')
    

    Generate a hidden component

  • referencehidden

Input

maker.input

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.input('field','title','value',{disabled:true})
    

    Generate an input component, type defaults to text

  • referenceinput

maker.text

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.text('field','title','value',{disabled:true})
    

    Generate an input component, type is text

maker.url

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.url('field','title','value',{disabled:true})
    

    Generate an input component, type is url

maker.idate

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.idate('field','title','value',{disabled:true})
    

    Generate an input component, type is date

maker.password

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.password('field','title','value',{disabled:true})
    

    Generate an input component, type is password

InputNumber

maker.inputNumber

  • parameter{string} field{string} title{number} value{object} props

  • usage

    maker.inputNumber('field','title','value',{disabled:true})
    

    Generate an inputNumber component, maker.number is an alias for this method

  • referenceInputNumber

AutoComplete

maker.autoComplete

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.autoComplete('field','title','xaboy',{data:['xaboy','github','xian']})
    

    Generate an autoComplete component, maker.auto is an alias for this method

  • referenceautoComplete

Radio

maker.radio

  • parameter{string} field{string} title{string|number} value{object} props

  • usage

    maker.radio('field','title',1)
        .options([{value:1,label:'好用'},{value:2,label:'不好用',disabled:true}])
    

    Generate a radio component

  • referenceRadio

Checkbox

maker.checkbox

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.checkbox('field','title',[1,2])
        .options([{value:1,label:'高效'},{value:2,label:'简单'}])
    

    Generate a checkbox component

  • referencecheckbox

Select

maker.select

  • parameter{string} field{string} title{string|number|array} value{object} props

  • usage

    maker.select('field','title',1)
        .options([{value:1,label:'高效'},{value:2,label:'简单'}])
    

    Generate a select component, props.multiple defaults to false

  • referenceselect

maker.selectOne

  • parameter{string} field{string} title{string|number} value{object} props

  • usage

    maker.selectOne('field','title',1)
        .options([{value:1,label:'高效'},{value:2,label:'简单'}])
    

    Generate a select component, props.multiple is false which is the selection drop-down selection box

maker.selectMultiple

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.selectMultiple('field','title',[1,2])
        .options([{value:1,label:'高效'},{value:2,label:'简单'}])
    

    Generate a select component, props.multiple is true which is multi-selectable drop-down selection box

Switch

maker.switch

  • parameter{string} field{string} title{string|number} value{object} props

  • usage

    maker.switch('field','title',1,{trueValue:1,falseValue:0})
    

    Generate a switch component

  • referenceswitch

Cascader

maker.cascader

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.cascader('field','title',[],{data:[]})
    

    Generate a cascader component

  • referencecascaderData structure

DatePicker

maker.datePicker

  • parameter{string} field{string} title{array|string|date} value{object} props

  • usage

    maker.datePicker('field','title','2018-12-16')
    

    Generate a datePicker component, type defaults to date

  • referencedatePicker

maker.date

  • parameter{string} field{string} title{date|string} value{object} props

  • usage

    maker.date('field','title','2018-12-16')
    

    Generate a datePicker component, type is date, select date**

maker.dateRange

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.dateRange('field','title',['2018-11-30','2018-12-16'])
    

    Generate a datePicker component, type is dateRange, select the date range

maker.dateTime

  • parameter{string} field{string} title{date|string} value{object} props

  • usage

    maker.dateTime('field','title','2018-12-16 23:23:23')
    

    Generate a datePicker component, type is dateTime, select date + time

maker.dateTimeRange

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.dateTimeRange('field','title',['2018-11-30 23:23:23','2018-12-16 23:23:23'])
    

    Generate a datePicker component, type is dateTimeRange, select date + time interval

maker.year

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.year('field','title','2018-12-16')
    

    Generate a datePicker component, **type is year, select the year **

maker.month

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.dateRange('field','title','2018-12-16')
    

    Generate a datePicker component, **type is month, select month **

TimePicker

maker.timePicker

  • parameter{string} field{string} title{array|string|date} value{object} props

  • usage

    maker.timePicker('field','title','23:23:23')
    

    Generate a timePicker component, type defaults to time

  • referencetimePicker

maker.time

  • parameter{string} field{string} title{string|date} value{object} props

  • usage

    maker.timePicker('field','title','23:23:23')
    

    Generate a timePicker component, type is time, select time

maker.timeRang

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.timePicker('field','title',['23:23:23','23:59:59'])
    

    Generate a timePicker component, type defaults to time, select time interval

ColorPicker

maker.colorPicker

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.colorPicker('field','title','#FF7271')
    

    Generate a colorPicker component, maker.color is an alias for this method

  • referencecolorPicker

Upload

maker.upload

  • parameter{string} field{string} title{string|array} value{object} props

  • usage

    maker.upload('field','title','image1.png',{action:'upload.php',maxLength:1})
    

    Generate an upload component, type defaults to field

  • referenceupload

maker.uploadImage 1.5.1+

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.uploadImage('field','title',['image1.png'.'image2.png'],{action:'upload.php'})
    

    Generate an upload component, type is image, maker.image is an alias for this method

maker.uploadFile 1.5.1+

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.uploadFile('field','title',['image1.png'.'image2.png'],{action:'upload.php'})
    

    Generate an upload component, type is file, maker.file is an alias for this method

maker.uploadImageOne 1.5.1+

  • parameter{string} field{string} title{string|array} value{object} props

  • usage

    maker.uploadImageOne('field','title','image1.png',{action:'upload.php'})
    

    Generate an upload component, type is image and maxLength is 1. Only one image can be uploaded

    maker.imageOne is an alias for this method

maker.uploadFileOne 1.5.1+

  • parameter{string} field{string} title{string} value{object} props

  • usage

    maker.uploadFileOne('field','title','image1.png',{action:'upload.php'})
    

    Generate an upload component, type is file and maxLength is 1. Only one file can be uploaded

    maker.fileOne is an alias for this method

Rate

maker.rate

  • parameter{string} field{string} title{number} value{object} props

  • usage

    maker.rate('field','title',10)
    

    Generate a rate component

  • referencerate

Slider

maker.slider

  • parameter{string} field{string} title{number} value{object} props

  • usage

    maker.slider('field','title',10)
    

    Generate a slider component, props.range defaults to false

  • referenceslider

maker.sliderRange

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.sliderRange('field','title',[10,100])
    

    Generate a slider component, props.range is true, select interval

Tree

maker.tree

  • parameter{string} field{string} title{array} value{object} props

  • usage

    maker.tree('field','title',[12,13],{data:[]})
    

    Generate a tree component

  • referencetree

  • Related methods

    • maker.treeSelected
    • maker.treechecked

Frame

maker.frame

  • parameter{string} field{string} title{array|string} value{object} props

  • usage

    maker.tree('field','title',10)
    

    Generate a frame component

  • referenceframedata structure

  • Related methods

    • maker.frameInputs
    • maker.frameInputOne
    • maker.frameFiles
    • maker.frameFileOne
    • maker.frameImages
    • maker.frameImageOne