# MakingForm 表单设计器

通过拖拽快速配置出表单页面

# 简单例子

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    preview 
    generate-code 
    generate-json
  >
    <template slot="action">
    </template>
  </fm-making-form>
</template>

使用时需要设置设计器的高度,默认情况高度是根据父元素 100% 来渲染的

# 自定义操作按钮

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
  >
    <template slot="action">
      <!-- 自定义操作区域插槽 -->
      <el-button type="text" icon="el-icon-upload">保存</el-button>
    </template>
  </fm-making-form>
</template>

# 字段配置

<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;"
    :basic-fields="['input', 'textarea']"
    :advance-fields="['blank', 'fileupload']"
    :layout-fields="[]"
  >
  </fm-making-form>
</template>

# 调用实例方法

<fm-making-form 
  ref="makingform" 
  style="height: 500px;" 
  preview 
  generate-code 
  generate-json
>
</fm-making-form>
// 获取JSON数据
const json = this.$refs.makingform.getJSON()

# Attributes

参数 说明 类型 默认值
preview 设计器预览操作按钮显示 Boolean fasle
generate-json 设计器生成JSON按钮显示 Boolean false
generate-code 设计器生成代码按钮显示 Boolean false
clearable 设计器清空按钮显示 Boolean false
upload 设计器导入JSON按钮显示 Boolean false
basic-fields 设计器左侧基础字段配置,如果不设置该字段默认展示所有基础字段组件,请参考文档后面字段说明 Array ['input', 'textarea', 'number', 'radio', 'checkbox', 'time', 'date', 'rate', 'color', 'select', 'switch', 'slider', 'text']
advance-fields 设计器左侧高级字段配置,如果不设置该字段默认展示所有高级字段组件,请参考文档后面字段说明 Array ['blank', 'fileupload', 'imgupload', 'editor', 'cascader', 'table']
layout-fields 设计器左侧布局字段配置,如果不设置该字段默认展示所有布局字段组件,请参考文档后面字段说明 Array ['grid', 'tabs', 'divider']

# Slots

name 说明
action 设计器头部操作按钮自定义区域

# 方法

通过 ref 可以获取到 MakingForm 实例并调用实例方法

方法名 说明 参数
getJSON 获取设计器配置的JSON数据 -
getHtml 获取设计器生成的可以直接使用的HTML代码 -
setJSON 设置设计器的配置信息 (value) 通过getJSON方法获取的JSON数据

# 字段说明

表单设计器左侧字段详细说明,可通过 type 值配置左侧展示字段

# 基础字段

type 字段名 说明
input 单行文本
textarea 多行文本
number 计数器
radio 单选框组
checkbox 多选框组
time 时间选择器
date 日期选择器
rate 评分
color 颜色选择器
select 下拉选择框
switch 开关
slider 滑块
text 文字

# 高级字段

type 字段名 说明
blank 自定义
imgupload 图片
editor 编辑器
cascader 级联选择器
fileupload 文件 高级版本提供
table 子表单 高级版本提供

# 布局字段

type 字段名 说明
grid 栅格布局
tabs 标签页 高级版本提供
divider 分割线 高级版本提供