组件生成器

maker 组件生成器是用来生成组件规则的助手方法,通过链式操作即可快速生成对应的组件规则

获取 maker 生成器

浏览器

window.formCreate.maker

NodeJs

iview

import { maker } from 'form-create'
element 1.6.0+

import { maker } from 'form-create/element'

Maker 配置项说明 | 自定义组件

Maker.parse 1.6.0+

参数：{string|array} Json、{bool} toMaker=false

用法：

let rules = maker.parse(json);
let rule = rules.find(field);
rule.value = 'value';
rule.event.click = function(){
  //TODO
}

将 json 转换为生成规则,转换后可使用 find()方法快速查找指定field字段

Hidden 组件

maker.hidden

参数：{string} field、{string|number} value
用法：
```
maker.hidden('field','value')
```
生成一个 hidden 组件
参考：hidden组件

Input 组件

maker.input

参数：{string} field、{string} title、{string} value、{object} props

用法：

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

生成一个 input 组件,type 默认为 text

参考：input组件

maker.text

参数：{string} field、{string} title、{string} value、{object} props

用法：

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

生成一个 input 组件,type 为 text

maker.url

参数：{string} field、{string} title、{string} value、{object} props

用法：

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

生成一个 input 组件,type 为 url

maker.idate

参数：{string} field、{string} title、{string} value、{object} props

用法：

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

生成一个 input 组件,type 为 date

maker.password

参数：{string} field、{string} title、{string} value、{object} props

用法：

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

生成一个 input 组件,type 为 password

InputNumber 组件

maker.inputNumber

参数：{string} field、{string} title、{number} value、{object} props
用法：
```
maker.inputNumber('field','title','value',{disabled:true})
```
生成一个 inputNumber 组件,maker.number是该方法的别名
参考：InputNumber 组件

AutoComplete 组件

maker.autoComplete

参数：{string} field、{string} title、{string} value、{object} props

用法：

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

生成一个 autoComplete 组件,maker.auto是该方法的别名

参考：autoComplete 组件

Radio 组件

maker.radio

参数：{string} field、{string} title、{string|number} value、{object} props

用法：

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

生成一个 radio 组件

参考：Radio 组件

Checkbox 组件

maker.checkbox

参数：{string} field、{string} title、{array} value、{object} props

用法：

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

生成一个 checkbox 组件

参考：checkbox 组件

Select 组件

maker.select

参数：{string} field、{string} title、{string|number|array} value、{object} props

用法：

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

生成一个 select 组件,props.multiple 默认为 false

参考：select 组件

maker.selectOne

参数：{string} field、{string} title、{string|number} value、{object} props

用法：

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

生成一个 select 组件,props.multiple 为 false即为单选的下拉选择框

maker.selectMultiple

参数：{string} field、{string} title、{array} value、{object} props

用法：

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

生成一个 select 组件,props.multiple 为 true即为可多选的下拉选择框

Switch 组件

maker.switch

参数：{string} field、{string} title、{string|number} value、{object} props

用法：

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

生成一个 switch 组件

参考：switch 组件

Cascader 组件

maker.cascader

参数：{string} field、{string} title、{array} value、{object} props

用法：

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

生成一个 cascader 组件

参考：cascader 组件、data 数据结构、省市区二、三级联动数据

DatePicker 组件

maker.datePicker

参数：{string} field、{string} title、{array|string|date} value、{object} props
用法：
```
maker.datePicker('field','title','2018-12-16')
```
生成一个 datePicker 组件,type 默认为 date
参考：datePicker 组件

maker.date

参数：{string} field、{string} title、{date|string} value、{object} props
用法：
```
maker.date('field','title','2018-12-16')
```
生成一个 datePicker 组件,type 为 date,可选择日期

maker.dateRange

参数：{string} field、{string} title、{array} value、{object} props
用法：
```
maker.dateRange('field','title',['2018-11-30','2018-12-16'])
```
生成一个 datePicker 组件,type 为 dateRange,可选择日期区间

maker.dateTime

参数：{string} field、{string} title、{date|string} value、{object} props
用法：
```
maker.dateTime('field','title','2018-12-16 23:23:23')
```
生成一个 datePicker 组件,type 为 dateTime,可选择日期+时间

maker.dateTimeRange

参数：{string} field、{string} title、{array} value、{object} props
用法：
```
maker.dateTimeRange('field','title',['2018-11-30 23:23:23','2018-12-16 23:23:23'])
```
生成一个 datePicker 组件,type 为 dateTimeRange,可选择日期+时间区间

maker.year

参数：{string} field、{string} title、{string} value、{object} props
用法：
```
maker.year('field','title','2018-12-16')
```
生成一个 datePicker 组件,type 为 year,可选择年份

maker.month

参数：{string} field、{string} title、{string} value、{object} props
用法：
```
maker.dateRange('field','title','2018-12-16')
```
生成一个 datePicker 组件,type 为 month,可选择月份

TimePicker 组件

maker.timePicker

参数：{string} field、{string} title、{array|string|date} value、{object} props
用法：
```
maker.timePicker('field','title','23:23:23')
```
生成一个 timePicker 组件,type 默认为 time
参考：timePicker 组件

maker.time

参数：{string} field、{string} title、{string|date} value、{object} props
用法：
```
maker.timePicker('field','title','23:23:23')
```
生成一个 timePicker 组件,type 为 time,可选择时间

maker.timeRang

参数：{string} field、{string} title、{array} value、{object} props
用法：
```
maker.timePicker('field','title',['23:23:23','23:59:59'])
```
生成一个 timePicker 组件,type 默认为 time,可选择时间区间

ColorPicker 组件

maker.colorPicker

参数：{string} field、{string} title、{string} value、{object} props
用法：
```
maker.colorPicker('field','title','#FF7271')
```
生成一个 colorPicker 组件,maker.color是该方法的别名
参考：colorPicker 组件

Upload 组件

maker.upload

参数：{string} field、{string} title、{string|array} value、{object} props

用法：

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

生成一个 upload 组件,type 默认为 field

参考：upload 组件

maker.uploadImage 1.5.1+

参数：{string} field、{string} title、{array} value、{object} props

用法：

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

生成一个 upload 组件,type 为 image,maker.image是该方法的别名

maker.uploadFile 1.5.1+

参数：{string} field、{string} title、{array} value、{object} props

用法：

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

生成一个 upload 组件,type 为 file,maker.file是该方法的别名

maker.uploadImageOne 1.5.1+

参数：{string} field、{string} title、{string|array} value、{object} props
用法：
```
maker.uploadImageOne('field','title','image1.png',{action:'upload.php'})
```
生成一个 upload 组件,type 为 image且maxLength为1只能上传一张图片

maker.imageOne是该方法的别名

maker.uploadFileOne 1.5.1+

参数：{string} field、{string} title、{string} value、{object} props
用法：
```
maker.uploadFileOne('field','title','image1.png',{action:'upload.php'})
```
生成一个 upload 组件,type 为 file且maxLength为1只能上传一个文件

maker.fileOne是该方法的别名

Rate 组件

maker.rate

参数：{string} field、{string} title、{number} value、{object} props
用法：
```
maker.rate('field','title',10)
```
生成一个 rate 组件
参考：rate 组件

Slider 组件

maker.slider

参数：{string} field、{string} title、{number} value、{object} props
用法：
```
maker.slider('field','title',10)
```
生成一个 slider 组件,props.range默认为false
参考：slider 组件

maker.sliderRange

参数：{string} field、{string} title、{array} value、{object} props
用法：
```
maker.sliderRange('field','title',[10,100])
```
生成一个 slider 组件,props.range为true,可选择区间

Tree 组件

maker.tree

参数：{string} field、{string} title、{array} value、{object} props

用法：

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

生成一个 tree 组件

参考：tree 组件
相关方法：
- maker.treeSelected
- maker.treechecked

Frame 组件

maker.frame

参数：{string} field、{string} title、{array|string} value、{object} props
用法：
```
maker.tree('field','title',10)
```
生成一个 frame 组件
参考：frame 组件、data 数据结构
相关方法：
- maker.frameInputs
- maker.frameInputOne
- maker.frameFiles
- maker.frameFileOne
- maker.frameImages
- maker.frameImageOne

# 组件生成器

# Maker.parse 1.6.0+

# Hidden 组件

# maker.hidden

# Input 组件

# maker.input

# maker.text

# maker.url

# maker.idate

# maker.password

# InputNumber 组件

# maker.inputNumber

# AutoComplete 组件

# maker.autoComplete

# Radio 组件

# maker.radio

# Checkbox 组件

# maker.checkbox

# Select 组件

# maker.select

# maker.selectOne

# maker.selectMultiple

# Switch 组件

# maker.switch

# Cascader 组件

# maker.cascader

# DatePicker 组件

# maker.datePicker

# maker.date

# maker.dateRange

# maker.dateTime

# maker.dateTimeRange

# maker.year

# maker.month

# TimePicker 组件

# maker.timePicker

# maker.time

# maker.timeRang

# ColorPicker 组件

# maker.colorPicker

# Upload 组件

# maker.upload

# maker.uploadImage 1.5.1+

# maker.uploadFile 1.5.1+

# maker.uploadImageOne 1.5.1+

# maker.uploadFileOne 1.5.1+

# Rate 组件

# maker.rate

# Slider 组件

# maker.slider

# maker.sliderRange

# Tree 组件

# maker.tree

# Frame 组件

# maker.frame