FormCreate

https://github.com/xaboy/form-create
Admin
FormCreate is a low-code form generation component that renders forms from JSON with dynamic...
Tokens:36,909
Snippets:163
Trust Score:8.5
License:MIT
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Clone and install form-create from GitHub

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Clones the form-create repository and installs its dependencies.

```shell
git clone https://github.com/xaboy/form-create.git
cd form-create
npm install
```

--------------------------------

### Install form-create with npm

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Installs the form-create package via npm.

```shell
npm install form-create
```

--------------------------------

### Install Vue 2 @form-create/element-ui

Source: https://github.com/xaboy/form-create/blob/next/packages/element-ui/README.md

Installs the Vue 2 version of @form-create/element-ui from the latest branch.

```sh
npm install @form-create/element-ui
```

--------------------------------

### Install Vue 3 @form-create/element-ui

Source: https://github.com/xaboy/form-create/blob/next/packages/element-ui/README.md

Installs the Vue 3 version of @form-create/element-ui from the next branch.

```sh
npm install @form-create/element-ui@next
```

--------------------------------

### Run development server

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Starts the development server for the form-create project. Alternatively, you can open demo/index.html directly in a browser.

```shell
npm run dev
```

--------------------------------

### npm install @form-create/tdesign@super (Vue 2.7)

Source: https://github.com/xaboy/form-create/blob/next/packages/tdesign/README.md

Install the Vue 2.7 version of @form-create/tdesign using the `super` tag.

```sh
npm install @form-create/tdesign@super
```

--------------------------------

### npm install @form-create/tdesign@next (Vue 3.0)

Source: https://github.com/xaboy/form-create/blob/next/packages/tdesign/README.md

Install the Vue 3.0 version of @form-create/tdesign using the `next` tag.

```sh
npm install @form-create/tdesign@next
```

--------------------------------

### yarn build commands for components and packages

Source: https://github.com/xaboy/form-create/blob/next/FORM_CREATE_OPERATION.md

Lists all yarn build commands for packaging components and packages in the form-create project. Use -c to target components and -p to target packages; the \* escape prevents zsh 'no matches found' errors. The final example combines multiple component paths.

```shell
## 打包所有的 components 和 packages ##
# yarn build (yarn bulld -all) #

## 打包所有的 components ##
# yarn build -c all #

## 打包所有的 components ##
# yarn build -p all #

## 打包指定components下的某个单独组件 ## ( \* 是为防止zsh报错 -> zsh: no matches found:)
# yarn build -c ant-design-vue element-ui # 指定打components下的ant-design-vue,element-ui的组件
# yarn build -c ant-design-vue/frame # 指定打ant-design-vue下的frame组件
# yarn build -c ant-design-vue/{frame,group} # 指定打ant-design-vue下的frame,group组件
# yarn build -c ant-design-vue/\* # 单独打ant-design-vue下的所有组件

## 打包指定pacakges下的某个单独库 ## ( \* 是为防止zsh报错 -> zsh: no matches found:)
# yarn build -p ant-design-vue # 单独打packages下ant-design-vue
# yarn build -p ant-design-vue element-ui # 指定打packages下的ant-design-vue,element-ui包

### 示例 ###
# yarn build -c ant-design-vue/frame element-ui/{group,frame} common/\*
```

--------------------------------

### Install @form-create/vant for Vue 2

Source: https://github.com/xaboy/form-create/blob/next/packages/vant/README.md

Installs the Vue 2 version of @form-create/vant. Use this command when your project is based on Vue 2.0.

```sh
npm install @form-create/vant
```

--------------------------------

### Install @form-create/antdv-next for Vue 3

Source: https://github.com/xaboy/form-create/blob/next/packages/antdv-next/README.md

Use this command to install the Vue 3 version of the package. Requires Vue ^3.5.12 and antdv-next as a peer dependency.

```sh
npm install @form-create/antdv-next@next
```

--------------------------------

### Install @form-create/vant for Vue 3

Source: https://github.com/xaboy/form-create/blob/next/packages/vant/README.md

Installs the Vue 3 version of @form-create/vant. Use this command when your project is based on Vue 3.0.

```sh
npm install @form-create/vant@next
```

--------------------------------

### Install @form-create/tiny-vue for Vue3

Source: https://github.com/xaboy/form-create/blob/next/packages/tiny-vue/README.md

Install the Vue3 version of @form-create/tiny-vue using npm. This package requires Vue 3.5.12 or later and peer dependencies @opentiny/vue, @opentiny/vue-icon, and @opentiny/vue-theme.

```sh
npm install @form-create/tiny-vue@next
```

--------------------------------

### Install Vue2.7 version of @form-create/vant

Source: https://github.com/xaboy/form-create/blob/next/README.md

Use this command to install the Vue2.7 version of the @form-create/vant package. The @super tag specifies the Vue2.7 branch.

```sh
npm install @form-create/vant@super
```

--------------------------------

### Browser import for form-create

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Browser setup for form-create: include Vue, iView, optional district data, mock data, and the form-create script. The district and mock scripts are only needed for specific features.

```html
<!-- import Vue 2.5.16-->
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>

<!-- import iview 2.14.3-->
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.13.0/styles/iview.css">
<script src="https://cdn.bootcss.com/iview/2.13.0/iview.min.js"></script>

<!-- 省市区三级联动json数据,不使用三级联动不需要引入 -->
<script src="district/province_city_area.js"></script>

<!-- 模拟数据,实际使用中不需要引入 -->
<script src="demo/mock.js"></script>

<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>
```

--------------------------------

### Node.js import for form-create

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Node.js/ES module setup for form-create: import Vue, iView, styles, and form-create, then register iView and formCreate as Vue plugins. The district and mock imports are optional.

```javascript
//三级联动数据,不使用三级联动不需要引入
import 'form-create/district/province_city_area.js'
//示例规则,实际使用中不需要引入
import 'form-create/mock.js'
import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import formCreat from 'form-create'
Vue.use(iView);
Vue.use(formCreat)
```

--------------------------------

### maker.input with validation

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Quickly generate an input field with props, validation, and col layout. The example sets clearable and placeholder, and adds a required validation rule.

```javascript
$formCreate.maker.input("商品名称","goods_name","iphone 7").props({
     clearable:true,
     placeholder: "请输入商品名称"
}).validate([
     { required: true, message: '请输入goods_name', trigger: 'blur' },
]).col({span:12});
```

--------------------------------

### maker.create custom component

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Use maker.create to quickly generate a custom component with props, events, col layout, and children. The example creates an i-button with a click handler and a span child.

```javascript
maker.create('i-button').props({
        type:"primary",
        size:"large",
    }).on({
        "click":()=>{console.log(1);},
    }).col({span:8,labelWidth:1}).children([
        maker.create('span').domProps({
            innerHTML:'测试按钮'
        })
    ]),
```

--------------------------------

### form-create 全局配置 createOptions

Source: https://github.com/xaboy/form-create/wiki/form-create文档

全局配置对象，用于初始化 form-create 表单。包含 el 插入节点、form 表单配置、row 布局、upload 上传钩子、mounted 回调、onSubmit 提交事件，以及 submitBtn 和 resetBtn 按钮配置。注意 submitBtn 默认显示，resetBtn 默认不显示，可通过 show 控制。

```javascript
{
    //插入节点,默认document.body
    el:null,
    //form配置
    form:{

        //是否开启行内表单模式
        inline:false,
        //表单域标签的位置，可选值为 left、right、top
        labelPosition:'right',
        //表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
        labelWidth:125,
        //是否显示校验错误信息
        showMessage:true,
        //原生的 autocomplete 属性，可选值为 off 或 on
        autocomplete:'off',
    },
    //row布局配置
    row:{
    	//栅格间距，单位 px，左右平分
        gutter:0,
        //布局模式，可选值为flex或不选，在现代浏览器下有效
        type:undefined,
        //flex 布局下的垂直对齐方式，可选值为top、middle、bottom
        align:undefined,
        //flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between
        justify:undefined,
        //自定义的class名称
        className:undefined
    },
    //文件上传全局配置
    upload:{

        //上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
        beforeUpload:()=>{},
        //文件上传时的钩子，返回字段为 event, file, fileList
        onProgress:(event, file, fileList)=>{},
        //文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
        onSuccess:(response, file, fileList)=>{
            // return 'filePath';
        },
        //文件上传失败时的钩子，返回字段为 error, file, fileList
        onError:(error, file, fileList)=>{},
        //点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
        onPreview:(file)=>{},
        //文件列表移除文件时的钩子，返回字段为 file, fileList
        onRemove:(file, fileList)=>{},
        //文件格式验证失败时的钩子，返回字段为 file, fileList
        onFormatError:(file, fileList)=>{},
        //文件超出指定大小限制时的钩子，返回字段为 file, fileList
        onExceededSize:(file, fileList)=>{},
        //辅助操作按钮的图标 ,设置为false将不显示
        handleIcon:'ios-eye-outline',
        //点击辅助操作按钮事件
        onHandle:(src)=>{},
        //是否可删除,设置为false是不显示删除按钮
        allowRemove:true,
    },
    //表单创建成功后回调函数
    mounted:()=>{},
    //表单提交事件
    onSubmit:(formData)=>{},

    //提交按钮配置,设置submitBtn=false或submitBtn.show=false时不显示按钮
    submitBtn:{

        //按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置
        type:"primary",
        //按钮大小，可选值为large、small、default或者不设置
        size:"large",
        //按钮形状，可选值为circle或者不设置
        shape:undefined,
        //开启后，按钮的长度为 100%
        long:true,
        //设置button原生的type，可选值为button、submit、reset
        htmlType:"button",
        //设置按钮为禁用状态
        disabled:false,
        //设置按钮的图标类型
        icon:"ios-upload",
        //按钮文字提示
        innerText:"提交",
        //设置按钮为加载中状态
        loading:false,
        //默认显示
        show:true
    },
    //重置按钮默认配置,设置resetBtn=true或resetBtn.show=true时显示
    resetBtn:{
        type:"ghost",
        size:"large",
        shape:undefined,
        long:true,
        htmlType:"button",
        disabled:false,
        icon:"refresh",
        innerText:"重置",
        loading:false,
        //默认不显示
        show:false
    }
}
```

--------------------------------

### Raw custom component rule

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Raw rule object for a custom component, equivalent to the maker.create example. Note the missing comma after the col object in the source.

```javascript
{
    type:'i-button',
    props:{
        type:"primary",
        size:"large",
    },
    on:{
      "click":()=>{console.log(1);}
    },
    col:{
        span:8,
        labelWidth:1
    }
    children:[
       {
            type:'span',
            domProps:{
                innerHTML:'测试按钮'
            }
        }
    ]

}
```

--------------------------------

### maker.select 快速生成选择器

Source: https://github.com/xaboy/form-create/wiki/form-create文档

快速生成 select 选择器组件，通过 options 设置选项，支持禁用单个选项。

```javascript
$formCreate.maker.select("产品分类","cate_id",["104","105"]).options([
     {"value": "104", "label": "生态蔬菜", "disabled": false},
     {"value": "105", "label": "新鲜水果", "disabled": false},
]);
```

--------------------------------

### Frame component file preview CSS (.fc-files)

Source: https://github.com/xaboy/form-create/blob/next/packages/antdv-next/examples/public/iframe.html

CSS for the frame component's file preview thumbnails. The .fc-files class styles each thumbnail container, .fc-files img makes images fill the box, and .fc-files.on highlights the selected state with a teal background and padding.

```css
.fc-files {
  display: inline-block;
  width: 58px;
  height: 58px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
  box-sizing: border-box;
}
.fc-files img {
  width: 100%;
  height: 100%;
  display: block;
}
.fc-files.on {
  background: #40d0c3;
  padding: 1px;
}
```

--------------------------------

### maker.switch 快速生成开关

Source: https://github.com/xaboy/form-create/wiki/form-create文档

快速生成 switch 开关组件，通过 slot 设置打开/关闭时的文字，通过 props 设置选中/未选中的值。

```javascript
$formCreate.maker.switch("是否上架","is_show","1").options([
     {"value": "104", "label": "生态蔬菜", "disabled": false},
     {"value": "105", "label": "新鲜水果", "disabled": false},
]).slot({open:"上架",close:"下架"}).props({"trueValue":"1","falseValue":"0"});
```

--------------------------------

### 安装 Vue3 版本的 @form-create/ant-design-vue

Source: https://github.com/xaboy/form-create/blob/next/packages/ant-design-vue/README.md

使用 npm 安装 Vue3 版本的 @form-create/ant-design-vue，通过 @next 标签指定 next 分支。

```sh
npm install @form-create/ant-design-vue@next
```

--------------------------------

### maker.radio 快速生成单选框

Source: https://github.com/xaboy/form-create/wiki/form-create文档

快速生成 radio 单选框组件，通过 options 设置选项，支持禁用单个选项。

```javascript
$formCreate.maker.radio("是否包邮","is_postage","0").options([
     {value:"0",label:"不包邮",disabled:false},
     {value:"1",label:"包邮",disabled:true},
]);
```

--------------------------------

### CSS样式：frame组件文件缩略图

Source: https://github.com/xaboy/form-create/blob/next/packages/element-ui/examples/public/iframe.html

定义frame组件中文件缩略图的样式，包括尺寸、边框、圆角、背景等，以及选中状态和图片样式。

```css
.fc-files {
  display: inline-block; width: 58px; height: 58px; text-align: center; line-height: 60px; border: 1px solid transparent; border-radius: 4px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, .2); margin-right: 4px; box-sizing: border-box;
}
.fc-files img {
  width: 100%; height: 100%; display: block;
}
.fc-files.on {
  background: #40d0c3; padding: 1px;
}
```

--------------------------------

### 安装 Vue2 版本的 @form-create/ant-design-vue

Source: https://github.com/xaboy/form-create/blob/next/packages/ant-design-vue/README.md

使用 npm 安装 Vue2 版本的 @form-create/ant-design-vue。该命令对应 latest 分支。

```sh
npm install @form-create/ant-design-vue
```

--------------------------------

### $f 实例方法

Source: https://github.com/xaboy/form-create/wiki/form-create文档

这些是form-create库中$f实例的方法，用于操作表单实例。

```APIDOC
## formData()

### Description
获取表单的value。

### Method
formData()

### Parameters
无

### Response
返回表单的value。
```

```APIDOC
## getValue(field)

### Description
获取指定字段的value。

### Method
getValue(field)

### Parameters
- **field** (string) - Required - 字段名称。

### Response
返回指定字段的value。
```

```APIDOC
## model(obj)

### Description
绑定表单组件到obj对象，支持双向数据绑定。结构`{field:{value,rule:{props,validate,options,slot,event}}}`。当直接修改没有生效时请使用`set`方法修改。

### Method
model(obj)

### Parameters
- **obj** (object) - Required - 绑定的对象。

### Response
无。
```

```APIDOC
## bind()

### Description
获取双向数据绑定的表单value。

### Method
bind()

### Parameters
无

### Response
返回双向数据绑定的表单value。
```

```APIDOC
## set(node, field, value)

### Description
用于表单生成后，修改组件的规则，使用方法类似`Vue.$set`方法。

### Method
set(node, field, value)

### Parameters
- **node** (object) - Required - 节点对象。
- **field** (string) - Required - 字段名称。
- **value** (any) - Required - 要设置的值。

### Response
无。
```

```APIDOC
## changeField(field, value)

### Description
修改指定字段的value。

### Method
changeField(field, value)

### Parameters
- **field** (string) - Required - 字段名称。
- **value** (any) - Required - 新的值。

### Response
无。
```

```APIDOC
## resetFields()

### Description
重置表单。

### Method
resetFields()

### Parameters
无

### Response
无。
```

```APIDOC
## destroy()

### Description
销毁表单。

### Method
destroy()

### Parameters
无

### Response
无。
```

```APIDOC
## hidden(fields, hidden = true)

### Description
隐藏或显示指定组件。

### Method
hidden(fields, hidden = true)

### Parameters
- **fields** (array) - Required - 字段名称数组。
- **hidden** (boolean) - Optional - 是否隐藏，默认为true。

### Response
无。
```

```APIDOC
## visibility(fields, visibility = true)

### Description
隐藏或显示指定组件。

### Method
visibility(fields, visibility = true)

### Parameters
- **fields** (array) - Required - 字段名称数组。
- **visibility** (boolean) - Optional - 是否可见，默认为true。

### Response
无。
```

```APIDOC
## removeField(field)

### Description
删除指定字段。

### Method
removeField(field)

### Parameters
- **field** (string) - Required - 字段名称。

### Response
无。
```

```APIDOC
## fields()

### Description
获得表单所有字段名称。

### Method
fields()

### Parameters
无

### Response
返回字段名称数组。
```

```APIDOC
## closeModal()

### Description
关闭frame组件的弹出框。

### Method
closeModal()

### Parameters
无

### Response
无。
```

```APIDOC
## submit()

### Description
表单验证通过后提交表单，触发onSubmit事件。

### Method
submit()

### Parameters
无

### Response
无。
```

```APIDOC
## reload(newRules)

### Description
根据新的表单规则重新渲染表单。

### Method
reload(newRules)

### Parameters
- **newRules** (array) - Required - 新的表单规则。

### Response
无。
```

```APIDOC
## validate(successFn, errorFn)

### Description
表单验证，如果验证通过执行successFn，未通过则执行errorFn。

### Method
validate(successFn, errorFn)

### Parameters
- **successFn** (function) - Required - 验证通过的回调函数。
- **errorFn** (function) - Required - 验证失败的回调函数。

### Response
无。
```

```APIDOC
## validateField(field, callback)

### Description
表单验证指定字段。

### Method
validateField(field, callback)

### Parameters
- **field** (string) - Required - 字段名称。
- **callback** (function) - Required - 回调函数，参数为错误信息。

### Response
无。

### Example
```javascript
$f.validateField(field,(errMsg)=>{
    if(errMsg){
        //TODO 验证未通过
    }else{
        //TODO 验证通过
    }
});
```
```

```APIDOC
## prepend(rule, field = undefined)

### Description
在field的字段之前输入指定表单元素，不传入field默认在第一个。

### Method
prepend(rule, field = undefined)

### Parameters
- **rule** (object) - Required - 表单元素规则。
- **field** (string) - Optional - 字段名称，默认为undefined。

### Response
无。

### Example
```javascript
$f.prepend({
   type:"input",
   title:"商品简介",
   field:"goods_info",
   value:"",
   props: {
       "type": "text",
       "placeholder": "请输入商品简介",
   },
   validate:[
       { required: true, message: '请输入商品简介', trigger: 'blur' },
   ],
});
```
```

```APIDOC
## append(rule, field = undefined)

### Description
在field的字段之后输入指定表单元素，不传入field默认在最后一个。

### Method
append(rule, field = undefined)

### Parameters
- **rule** (object) - Required - 表单元素规则。
- **field** (string) - Optional - 字段名称，默认为undefined。

### Response
无。

### Example
```javascript
$f.append($formCreate.maker.upload('产品主图','logo','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg')
    .props({
          "action": "",
          "maxLength": 1,
          "multiple": false,
          "type": "select",
          "uploadType": "image",
          "name": "file",
          "onSuccess": function () {
              return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
          }
    })
    .validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'})
,'goods_name');
```
```

```APIDOC
## submitStatus(props)

### Description
修改表单提交按钮状态。

### Method
submitStatus(props)

### Parameters
- **props** (object) - Required - 按钮状态配置。
  - **type** (string) - Optional - 按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置。
  - **size** (string) - Optional - 按钮大小，可选值为large、small、default或者不设置。
  - **shape** (string) - Optional - 按钮形状，可选值为circle或者不设置。
  - **long** (boolean) - Optional - 开启后，按钮的长度为 100%。
  - **htmlType** (string) - Optional - 设置button原生的type，可选值为button、submit、reset。
  - **disabled** (boolean) - Optional - 设置按钮为禁用状态。
  - **icon** (string) - Optional - 设置按钮的图标类型。
  - **innerText** (string) - Optional - 按钮文字提示。
  - **loading** (boolean) - Optional - 设置按钮为加载中状态。
  - **show** (boolean) - Optional - 是否显示。

### Response
无。

### Example
```javascript
$f.submitStatus({
    type:"primary",
    size:"large",
    shape:undefined,
    long:true,
    htmlType:"button",
    disabled:false,
    icon:"ios-upload",
    innerText:"提交",
    loading:false,
    show:true
})
```
```

```APIDOC
## btn.loading(loading = true)

### Description
让表单提交按钮进入loading状态。

### Method
btn.loading(loading = true)

### Parameters
- **loading** (boolean) - Optional - 是否加载中，默认为true。

### Response
无。
```

```APIDOC
## btn.finish()

### Description
让表单提交按钮恢复正常状态。

### Method
btn.finish()

### Parameters
无

### Response
无。
```

```APIDOC
## btn.disabled(disabled = true)

### Description
设置提交按钮禁用状态。

### Method
btn.disabled(disabled = true)

### Parameters
- **disabled** (boolean) - Optional - 是否禁用，默认为true。

### Response
无。
```

```APIDOC
## resetStatus(props)

### Description
修改表单重置按钮状态，配置与提交按钮相同。

### Method
resetStatus(props)

### Parameters
- **props** (object) - Required - 按钮状态配置，同submitStatus。

### Response
无。
```

```APIDOC
## resetBtn.loading(loading = true)

### Description
让重置按钮进入loading状态。

### Method
resetBtn.loading(loading = true)

### Parameters
- **loading** (boolean) - Optional - 是否加载中，默认为true。

### Response
无。
```

```APIDOC
## resetBtn.finish()

### Description
让表单提交按钮恢复正常状态。

### Method
resetBtn.finish()

### Parameters
无

### Response
无。
```

```APIDOC
## resetBtn.disabled(disabled = true)

### Description
设置重置按钮禁用状态。

### Method
resetBtn.disabled(disabled = true)

### Parameters
- **disabled** (boolean) - Optional - 是否禁用，默认为true。

### Response
无。
```

--------------------------------

### SliderRule raw parameters

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Raw SliderRule configuration object. Includes props for min, max, step, range mode, tooltip display, and event handlers for change and input.

```javascript
SliderRule :
{
     type:"slider",
     field:"slider",
     title:"滑块",
      value:[0,50], //滑块选定的值。普通模式下，数据格式为数字，在双滑块模式下，数据格式为长度是2的数组，且每项都为数字
     props:{
          "min": 0, //最小值
         "max": 100, //最大值
         "step": 1, //步长，取值建议能被（max - min）整除
         "disabled": false, //是否禁用滑块
         "range": true, //是否开启双滑块模式
         "showInput":false, //是否显示数字输入框，仅在单滑块模式下有效
         "showStops":true, //是否显示间断点，建议在 step 不密集时使用
          "showTip":"hover", //提示的显示控制，可选值为 hover（悬停，默认）、always（总是可见）、never（不可见）
         "tipFormat":undefined, //Slider 会把当前值传给 tip-format，并在 Tooltip 中显示 tip-format 的返回值，若为 null，则隐藏 Tooltip
         "inputSize":"small", //数字输入框的尺寸，可选值为large、small、default或者不填，仅在开启 show-input 时有效
     },
      event:{
         //在松开滑动时触发，返回当前的选值，在滑动过程中不会触发
         change:(value)=>{},
         //滑动条数据变化时触发，返回当前的选值，在滑动过程中实时触发
         input:(value)=>{},
     },
     validate:[]
 }
```

--------------------------------

### maker.upload

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Generates an upload rule.

```javascript
$formCreate.maker.upload(title,field,value)
```

--------------------------------

### JavaScript：frame组件选中与更新字段

Source: https://github.com/xaboy/form-create/blob/next/packages/element-ui/examples/public/iframe.html

在窗口加载后获取fodder字段值，为图片绑定点击事件以切换选中状态，并监听窗口关闭事件更新字段值。

```javascript
window.onload = function () {
    setTimeout(function () {
        //获取fodder字段值
        var value = form_create_helper.get('fodder'), images = Array.from(self.document.getElementsByTagName('img'));
        //选中对应的图片
        images.forEach(function (image) {
            if (value.indexOf(image.src) !== -1) {
                image.parentNode.classList.add('on');
            } else {
                image.parentNode.classList.remove('on');
            }
            image.addEventListener('click', onClick)
        });

        function onClick() {
            var p = this.parentNode;
            if (Array.from(p.classList).indexOf('on') !== -1) {
                p.classList.remove('on');
            } else {
                p.classList.add('on');
            }
        }

        document.getElementById('closeBtn').addEventListener('click', function () {
            //手动关闭frame弹出框
            form_create_helper.close('fodder');
        });

        //当页面关闭时更新frame字段的值
        window.onUnload = function () {
            var list = [];
            images.forEach(function (image) {
                if (Array.from(image.parentNode.classList).indexOf('on') !== -1) {
                    list.push(image.src);
                }
            });
            //修改表单fodder字段的值
            form_create_helper.set('fodder', list);
        }

        window.onunload = onUnload;
    });
}
```

--------------------------------

### switch 原始参数规则

Source: https://github.com/xaboy/form-create/wiki/form-create文档

switch 组件的完整规则对象，包含 props 配置、slot 自定义内容和 change 事件。

```javascript
switchRule :
{
        type:"switch",//必填!
        //label名称
        title:"是否上架",//必填!
        //字段名称
        field:"is_show",//必填!
        //input值
        value:"1",
        props: {
        	//开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。
            "size":"default",
            //禁用开关
            "disabled":false,
            //选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
            "trueValue":"1",
            //没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用
            "falseValue":"0",
        },
        slot: {
        	//自定义显示打开时的内容
            open:"上架",
            //自定义显示关闭时的内容
            close:"下架",
        },
        event:{
            //开关变化时触发，返回当前的状态 0 | 1
            change:(bool)=>{},
        },
        validate:[],
    }
```

--------------------------------

### maker.upload quick generation

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Quickly generate an Upload form item with maker. Sets props for select-type image upload, a single file limit, and a validation rule requiring at least one image.

```javascript
$formCreate.maker.upload("轮播图","pic",['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'])
  .props({
    "action": "",
    "maxLength": 1,
    "multiple": false,
    "type": "select",
    "uploadType": "image",
    "name": "file",
    "onSuccess": function () {
        return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
    }
}).validate({required:true, type: 'array', min: 1, message: '请上传1张图片', trigger: 'change'});
```

--------------------------------

### select 原始参数规则

Source: https://github.com/xaboy/form-create/wiki/form-create文档

select 组件的完整规则对象，包含多选、搜索、清空等 props 配置和 change、query-change 事件。

```javascript
selectRule :
{
        type: "select",//必填!
        field: "cate_id",//必填!
        title: "产品分类",//必填!
        //input值
        value: ["104","105"],
        //可选参数
        options: [
            {"value": "104", "label": "生态蔬菜", "disabled": false},
            {"value": "105", "label": "新鲜水果", "disabled": false},
        ],//必填!
        props: {
        	//是否支持多选
            "multiple": true,
            //是否可以清空选项，只在单选时有效
            "clearable": false,
            //是否支持搜索
            "filterable": true,

            // 暂不支持远程搜索
            // "remote": false, //是否使用远程搜索
            // "remote-method":Function, //远程搜索的方法
            // "loading": false, //当前是否正在远程搜索
            // "loading-text": "加载中", //远程搜索中的文字提示
            //选择框大小，可选值为large、small、default或者不填
            "size":"default",
            //选择框默认文字
            "placeholder": "请选择",
             //当下拉列表为空时显示的内容
            "not-found-text": "无匹配数据",
            //弹窗的展开方向，可选值为 bottom 和 top
            "placement": "bottom",
            //是否禁用
            "disabled": false,
        },
        event:{
            //选中的Option变化时触发，返回 value
            change:(checked)=>{},
            //搜索词改变时触发
            'query-change':(keyword)=>{},
        },
        validate:[],
    }
```

--------------------------------

### Prepend a form element with $f.prepend

Source: https://github.com/xaboy/form-create/wiki/form-create文档

Inserts a new form element before a specified field, or at the beginning if no field is provided.

```javascript
$f.prepend({
   type:"input",
   title:"商品简介",
   field:"goods_info",
   value:"",
   props: {
       "type": "text",
       "placeholder": "请输入商品简介",
   },
   validate:[
       { required: true, message: '请输入商品简介', trigger: 'blur' },
   ],
});
```
Tokens:
Raw